Spring Boot + Vue.js 实时通信：WebSocket 实现指南

要使用 Spring Boot 和 Vue.js 实现 WebSocket 通信，需要遵循以下步骤：

创建 Spring Boot 应用程序

使用 Spring Initializr 创建一个新的 Spring Boot 应用程序，添加以下依赖项：

Spring Websocket
Spring WebSocket JavaScript客户端
Spring Web

创建 WebSocket 端点

在您的 Spring Boot 应用程序中创建一个 WebSocket 端点，以便客户端可以连接并与 WebSocket 通信。可以使用 @ServerEndpoint 注释创建 WebSocket 端点类。

示例：

@ServerEndpoint("/websocket")
public class WebSocketEndpoint {
    @OnOpen
    public void onOpen(Session session) {
        // 处理连接打开事件
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 处理收到消息事件
    }

    @OnClose
    public void onClose(Session session) {
        // 处理连接关闭事件
    }
}

配置 WebSocket

在您的 Spring Boot 应用程序中配置 WebSocket。可以使用 @EnableWebSocket 注释启用 WebSocket 支持，并使用 WebSocketConfigurer 接口配置 WebSocket。

示例：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new WebSocketEndpoint(), "/websocket").setAllowedOrigins("*");
    }
}

创建 Vue.js 应用程序

使用 Vue CLI 创建一个新的 Vue.js 应用程序。

连接 WebSocket

在您的 Vue.js 应用程序中连接 WebSocket。可以使用 WebSocket JavaScript 客户端库来连接 WebSocket。

示例：

var socket = new WebSocket('ws://localhost:8080/websocket');

socket.onopen = function() {
  // 处理连接打开事件
};

socket.onmessage = function(event) {
  // 处理收到消息事件
};

socket.onclose = function() {
  // 处理连接关闭事件
};

发送消息

在您的 Vue.js 应用程序中发送消息到 WebSocket。可以使用 WebSocket.send() 方法发送消息。

示例：

socket.send('Hello, World!');

以上是使用 Spring Boot 和 Vue.js 实现 WebSocket 通信的基本步骤。您可以根据需要进行更改和扩展。

Spring Boot + Vue.js 实时通信：WebSocket 实现指南