如何使用 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 的模式匹配。