没有 SockJS 的 Spring Boot Websocket

Question

我已经为此苦苦挣扎了至少两个星期。我对 websockets 很陌生。我在休息端点方面有很好的经验。

我的用例很简单。客户端启动一个 websocket 连接，向服务器发送一些信息，服务器使用该信息，并每隔 5 秒定期向客户端发送一些信息。 我按照这里的教程 - https://spring.io/guides/gs/messaging-stomp-websocket/ 正如解释的那样，它完美地工作。 按照上面的教程，客户端发起一个http请求，升级为websocket。

在我的例子中，前端是一个 Angular 10 应用程序，前端开发人员更喜欢使用 rxjs/websocket 而不想使用 SockJS client，因为他确信我们不必支持任何旧版浏览器，这就是我感到震惊的地方。 显然rxjs/websocket 需要ws:// 协议中的url。

从下面的 sn-p 中，我认为我的等效 ws 协议将是 ws://localhost:8080/test 但是，它似乎不起作用。我不确定出了什么问题。非常感谢任何帮助！

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer
{

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config)
    {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/ws/");
    

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry)
    {
        registry.addEndpoint("/test");
    }

}

在教程中，我更改了app.js，如下进行测试。

function connect() {
    // var socket = new SockJS('http://localhost:8080/test'); This works perfectly
    // stompClient = Stomp.over(socket);
    ws = new WebSocket('ws://localhost:8080/test');
    stompClient = Stomp.client(ws);

    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/' + $("#site").val(), function (message) {
            showMessageSentFromServer(JSON.stringify(message.body));
        });
    });
}

当我打开 chrome 的开发者工具并检查时，我看到 websocket 连接已建立并升级，或者这就是我所看到的。但是，在控制台中，我看到如下错误日志。我不确定出了什么问题。

网络截图：

控制台失败日志：

stomp.min.js:8 Uncaught DOMException: Failed to construct 'WebSocket': The URL '[object WebSocket]' is invalid.
    at Object.client (http://localhost:8080/webjars/stomp-websocket/stomp.min.js:8:7229)
    at connect (http://localhost:8080/app.js:18:25)
    at HTMLButtonElement.<anonymous> (http://localhost:8080/app.js:54:9)
    at HTMLButtonElement.dispatch (http://localhost:8080/webjars/jquery/jquery.min.js:3:10315)
    at HTMLButtonElement.q.handle (http://localhost:8080/webjars/jquery/jquery.min.js:3:8342)

长话短说，我设法通过删除withSockJS() 在服务器端禁用了SockJs。那么我等效的 ws 协议 URL 是什么？

此外，除此之外，我面临的另一个挑战是，如何根据来自客户端的输入，设置一个可以将消息发送到客户端订阅的 websocket 主题的预定进程。我知道使用@Scheduled 注释设置计划进程很容易。但在我的情况下，我想要一些来自客户端的输入，这些输入是计划进程中所必需的。

另外，请分享您拥有的任何资源或示例，以解释如何使用 rxjs 实现对主题的 websocket stomp 客户端订阅

Answer 1

我可以通过进行两个简单的更改来解决问题。

1. 我让我的后端支持ws 和http 协议，方法是向WebSocketConfig 添加两个端点，如下所示 - 一个有sockjs，另一个没有sockjs，这使我的后端更多在支持两种协议以建立websocket 连接方面具有灵活性。我不知道为什么春季文档或其他任何地方都没有提到这一点。也许，人们认为它是隐含的！

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer
{

        @Override
        public void configureMessageBroker(MessageBrokerRegistry config)
        {
                config.enableSimpleBroker("/topic");
                config.setApplicationDestinationPrefixes("/ws/");
        }

        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry)
        {
                registry.addEndpoint("/test"); // This will allow you to use ws://localhost:8080/test to establish websocket connection
                registry.addEndpoint("/test").withSockJS(); // This will allow you to use http://localhost:8080/test to establish websocket connection
        }

}

1. 正如@arturgrzesiak在之前的评论中指出的那样，传递给Stomp.client(url)的参数有错误我很傻，传递wsobject而不是普通的url。

stompClient = Stomp.client('ws://localhost:8080/test');

最后，

如果有人想使用SockJS客户端连接，可以使用连接

var socket = new SockJS('http://localhost:8080/test');
stompClient = Stomp.over(socket);

如果有人只想使用普通的 Websocket 对象进行连接，请使用以下内容。

stompClient = Stomp.client('ws://localhost:8080/test');

我发布了这个解决方案，因为这对那些有类似痛苦经历的人很有用，他们可能会觉得它很有用。

Answer 2

如评论中所述：

来自 stomp 文档：var url = "ws://localhost:15674/ws"; var client = Stomp.client(url); - 你应该只传递 url 字符串而不是已经创建的 websocket 对象。

Answer 3

我不是专家，但我认为所有 WebSocket URI 都使用方案 ws: 或 wss: 来实现安全的 WebSocket。要更熟悉 WebSocket，您应该查看 How Do Websockets Work?。

当我开始使用 Websockets 时，我从 Androidhive; Building Group Chat App using Sockets 学到了很多东西

我不太习惯使用 Spring Websockets，但在过去我使用 Java EE 时，它相对简单。您所要做的就是使用带注释的@ServerEndpoint 配置服务器端点。在那里你可以使用带有注释的函数

@OnMessage
public String onMessage(String message, Session session) {
    ...
}

@OnOpen
public void onOpen(Session session) {
    ...
    // Here you can start a session handler
    // which will send message every 5 sec or so.
    s = new SessionHandler(session, id);
    s.start();
}

@OnClose
public void onClose(Session session) {
    ...
}

这是您发送消息的方式

public void send(String msg) throws IOException {
    session.getBasicRemote().sendText(msg);
    // session.getBasicRemote().flushBatch(); 
}

这里是 javascript 方面，

var wsUri = "ws://" + (document.location.hostname === "" ? "localhost" : document.location.hostname) + ":" +
            (document.location.port === "" ? "80" : document.location.port);

var websocket;
function connect() {
    websocket = new WebSocket(wsUri);

    websocket.onopen = function (evt) {
        onOpen(evt);
    };
    websocket.onmessage = function (evt) {
        onMessage(evt);
    };
    websocket.onerror = function (evt) {
        onError(evt);
    };

    websocket.onclose = function (evt) {
        onClose(evt);
    };
}

connect();

我知道这是专注于 Java EE，但也许您可以考虑使用 Java EE，它不再那么糟糕了。如果您有兴趣，请查看这个更深入的示例How to build applications with the WebSocket API for Java EE and Jakarta EE