使用Spring Boot和JavaScript的WebSocket

Question

这是我尝试创建JavaScript客户端和Java服务器之间WebSocket通道的简单方法。

// java websocket server configuration with spring boot
// server port: 8080 set in the "application.yml"

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer{
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket")
                .setAllowedOrigins("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {                
        registry.setApplicationDestinationPrefixes("/app")
                .enableSimpleBroker("/notification");
    }   
} 

// js websocket client configuration with "webstomp-client"

import webstomp from 'webstomp-client';

const connection = new WebSocket('ws://localhost:8080/websocket');
const stompClient = webstomp.over(connection);
stompClient.connect(()=>{
  stompClient.subscribe('/app/notification', () => console.log('Connection established with server'));
});

控制台显示以下内容：

WebSocket连接到“ws://localhost:8080/websocket”失败：在WebSocket握手期间出错：意外的响应代码：200

我查看了很多其他帖子，大部分与允许来源有关。 我尝试将来源设置为 localhost以及本地IP地址，但没有成功。

我漏掉了什么？任何帮助都将是非常宝贵的。

编辑：客户端使用create-react-app创建，如果相关的话。

编辑：客户端位于：http:localhost:3000，服务器位于：http:localhost:8080。

- Edv Beq

---

请问您能否展示一下在您的服务器中是如何处理 app/notification 路由的呢？ - edkeveked

@edkeveked 我有一个 WebSocket 控制器类，但目前它并没有做太多事情。所以我还没有处理任何东西。 - Edv Beq

也许问题就出在这里。你是否向已经通过 app/notification 订阅的用户返回了一些内容？ - edkeveked

@edkeveked 我认为它甚至没有到达那里。在任何订阅发生之前，该通道就关闭了。客户端和服务器是否在不同的端口上是否重要？我认为不是，但无论如何我都会提一下。 - Edv Beq

什么是不同端口上的客户端和服务器？嗯，例如可以将客户端服务于localhost:4200，而将服务器服务于localhost:8080。 最后一件事我想提到的是，也许可以删除.setAllowedOrigins("*")并在应用程序的全局级别设置CORS。 - edkeveked

Answer 1

您正在服务器端使用SockJS配置您的终端，但是您在客户端没有使用SockJS。这就是为什么您会收到200状态码而不是101的原因。要么在客户端使用SockJS（而不是原始WebSocket），要么在服务器端删除withSockJS()。

- Sergi Almar

---

是的 - 就是这样。昨晚我也是通过试错找到了答案。我会给你打勾的。为了在客户端上添加sockjs支持，我需要使用sockjs库吗？ - Edv Beq

是的，在客户端添加SockJS并使用new SockJS（'http://localhost:8080/websocket'）代替new WebSocket（'ws：// localhost：8080 / websocket'）。 - Sergi Almar