如何使用 springboot 和 reactjs 正确配置 websocket?
How to properly configure websocket with springboot and reactjs?
我可以与我的 springboot 服务器建立 websocket 连接,但是当我尝试发送消息时,我无法从 @MessageMapping
访问端点。这是我的配置:
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/simulator")
.setAllowedOrigins("http://myiphere:3000")
.withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/endpoint");
registry.setApplicationDestinationPrefixes("/app");
}
还有一个简单的控制器:
@RestController
@RequestMapping("/api")
public class MyController {
@MessageMapping("/hello/")
@SendTo("/endpoint/greeting")
public Greeting getCurrentLocation() {
System.out.println("hello here");
return GenericBuilder.of(Greeting::new)
.with(Greeting::setContent, "hello from server")
.build();
}
}
我按照 this 教程在 ReactJS 中使用 socketjs-client
库:
import SockJS from "sockjs-client";
import Stomp from "stompjs";
let stompClient;
const connect = () => {
const socket = new SockJS("http://myiphere:8081/simulator");
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log("Connected " + frame);
stompClient.subscribe("http://myiphere:8081/endpoint/greeting", function (greeting) {
console.log("hi" + JSON.parse(greeting.body).content);
});
});
};
const sendSomething = () => {
stompClient.send("http://myiphere:8081/app/hello/", {});
};
还有一些带有绑定到上述方法的onClick事件的按钮。连接正常,我在浏览器控制台中收到 "connected" 消息,但是当我尝试单击带有 sendSomething()
的按钮时,我在浏览器控制台和服务器控制台中都没有收到任何消息。
已解决。
问题出在 send()
方法中的绝对 url 路径。
P.S.: 我一直在很多网站上寻找这个问题的答案,发现不需要使用绝对路径subscribe()
url.
P.P.S.: 如果其他人遇到这些问题,请寻找额外的 /
。设置 url 时必须小心。来自 JS 的模式应该与来自 SpringBoot 的模式匹配。
我可以与我的 springboot 服务器建立 websocket 连接,但是当我尝试发送消息时,我无法从 @MessageMapping
访问端点。这是我的配置:
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/simulator")
.setAllowedOrigins("http://myiphere:3000")
.withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/endpoint");
registry.setApplicationDestinationPrefixes("/app");
}
还有一个简单的控制器:
@RestController
@RequestMapping("/api")
public class MyController {
@MessageMapping("/hello/")
@SendTo("/endpoint/greeting")
public Greeting getCurrentLocation() {
System.out.println("hello here");
return GenericBuilder.of(Greeting::new)
.with(Greeting::setContent, "hello from server")
.build();
}
}
我按照 this 教程在 ReactJS 中使用 socketjs-client
库:
import SockJS from "sockjs-client";
import Stomp from "stompjs";
let stompClient;
const connect = () => {
const socket = new SockJS("http://myiphere:8081/simulator");
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log("Connected " + frame);
stompClient.subscribe("http://myiphere:8081/endpoint/greeting", function (greeting) {
console.log("hi" + JSON.parse(greeting.body).content);
});
});
};
const sendSomething = () => {
stompClient.send("http://myiphere:8081/app/hello/", {});
};
还有一些带有绑定到上述方法的onClick事件的按钮。连接正常,我在浏览器控制台中收到 "connected" 消息,但是当我尝试单击带有 sendSomething()
的按钮时,我在浏览器控制台和服务器控制台中都没有收到任何消息。
已解决。
问题出在 send()
方法中的绝对 url 路径。
P.S.: 我一直在很多网站上寻找这个问题的答案,发现不需要使用绝对路径subscribe()
url.
P.P.S.: 如果其他人遇到这些问题,请寻找额外的 /
。设置 url 时必须小心。来自 JS 的模式应该与来自 SpringBoot 的模式匹配。