不使用SockJS的Spring Boot Websocket

Question

我至少已经为此挣扎了两个星期。我对websockets非常陌生，但是在rest端点方面有丰富的经验。

我的用例很简单。客户端启动一个websocket连接，向服务器发送一些信息，服务器使用这些信息，并以每5秒一次的常规间隔向客户端发送一些信息。 我遵循了这里的教程 - https://spring.io/guides/gs/messaging-stomp-websocket/ 按照上述教程，客户端启动了一个http请求，该请求被升级为websocket。

在我的情况下，前端是一个angular 10应用程序，前端开发人员喜欢使用rxjs/websocket，不想使用SockJS client，因为他确信我们不需要支持任何旧版浏览器，这就是我被卡住的地方。 显然，rxjs/websocket需要在ws://协议中指定URL。

从以下代码片段中，我认为我的等效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 客户端订阅主题。

- Manikdn84

---

从 stomp 文档 中得知：var url = "ws://localhost:15674/ws"; var client = Stomp.client(url); - 你应该传递一个 url 字符串而不是已经创建好的 websocket 对象。 - artur grzesiak

所发布的代码似乎没有正确使用Rxjs websocket，因为应该以小写字母开头，如ws = new webSocket('ws://localhost:8080/test')。 - Constantin Konstantinidis

@arturgrzesiak 你是我的救星！那似乎解决了我的问题。我刚意识到那个错误有多傻，但价值连城。非常感谢你！ - Manikdn84

@arturgrzesiak，如果您能在接下来的3个小时内将您的评论发布为答案，我很高兴向您颁发我的悬赏，因为我无法为回复颁发奖励。再次感谢。 - Manikdn84

Answer 1

通过进行两个简单的更改，我成功解决了这个问题。

1. 如下所示，我通过向WebSocketConfig添加两个端点来支持ws和http协议, 一个是带有 sockjs 的端点，另一个是没有的。这使得我的后端更加灵活，可以支持建立websocket连接的两种协议。我不知道为什么在Spring文档中没有提到这一点。也许人们认为这是默认的！

@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
        }

}

2. 正如之前评论中 @arturgrzesiak 指出的，Stomp.client(url) 传递的参数存在错误。我很傻地传递了 ws 对象而不是普通的 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');

我发表了这个解决方案，因为它对于那些经历过类似痛苦经历的人可能会有用，并且他们可能会发现它有用。

- Manikdn84

---

非常有用，感谢！我要补充的是，在注册端点时需要包括允许的来源（SB v2.5.4），例如 registry.addEndpoint("/test").setAllowedOrigins("*");。 - nkmuturi

这解决了我的问题，谢谢。我原以为可以手动创建一个WebSocket并通过.over传递它，但是.client(url)对我有用！ - user227669

Answer 2

如评论所述：

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

- artur grzesiak

Answer 3

我不是专家，但我认为所有WebSocket URI都使用ws:或wss:安全WebSocket协议。要更熟悉WebSockets，您应该查看Websockets工作原理？。

当我开始学习Websockets时，我从Androidhive;使用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，现在它已经不那么糟糕了。如果你感兴趣，可以看一下这个更深入的示例如何使用Java EE和Jakarta EE的WebSocket API构建应用程序

- Kallinn110

---

谢谢，但这不是我要找的。 - Manikdn84