什么是 websocket？如何与前端通信？

程序员朱永胜2023-09-042024-11-12

有的时候博客内容会有变动，首发博客是最新的，其他博客地址可能会未同步, 认准https://blog.zysicyj.top

什么是 WebSocket？

WebSocket 是一种在 Web 应用程序中实现双向通信的协议。它允许在客户端和服务器之间建立持久的、全双工的连接，以便实时地发送数据。

传统的 HTTP 协议是一种无状态的请求 - 响应协议，客户端发送请求，服务器返回响应，然后连接立即关闭。这种模型适用于大多数 Web 应用程序，但对于需要实时数据更新或双向通信的应用程序来说，它并不理想。

WebSocket 通过在客户端和服务器之间建立长久的 TCP 连接，提供了一种持久性的通信通道。它通过在 HTTP 握手过程中升级连接，从而允许在同一个连接上进行双向通信。

WebSocket 的特点包括：

双向通信：WebSocket 允许客户端和服务器之间双向发送数据，而不仅仅是客户端向服务器发送请求。
实时性：WebSocket 提供了高效的实时数据传输，可以在数据可用时立即将其推送给客户端。
较低的开销：WebSocket 使用较少的网络开销，因为它使用持久连接而不需要频繁的握手和头部信息。
兼容性：WebSocket 协议已经得到了广泛的支持，现代的 Web 浏览器和服务器都可以很好地支持 WebSocket。

WebSocket 在许多实时应用程序中得到广泛应用，例如聊天应用程序、实时协作工具、股票市场报价、多人游戏等。它提供了一种强大的机制，使得开发者可以轻松实现实时和双向的 Web 应用程序。

Spring Boot 如何实现 WebSocket

在 Spring Boot 中，可以使用 Spring WebSocket 模块来实现 WebSocket 功能。以下是使用 Spring Boot 实现 WebSocket 的基本步骤：

添加依赖：在 pom.xml 文件中添加以下依赖，以引入 Spring WebSocket 和 Tomcat WebSocket 的支持：


<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-websocket</artifactId>
</dependency>

创建一个 WebSocket 处理器类：创建一个类，实现 org.springframework.web.socket.handler.TextWebSocketHandler
，并重写handleTextMessage 和afterConnectionEstablished等方法来处理 WebSocket 事件。

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的文本消息
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 处理连接建立事件
    }
}

配置 WebSocket 端点：创建一个配置类，继承自 org.springframework.web.socket.config.annotation.WebSocketConfigurer
，并重写registerWebSocketHandlers 方法来注册 WebSocket 处理器和端点。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/websocket").setAllowedOrigins("*");
    }
}

启动应用程序：编写一个 Spring Boot 启动类，并添加 @SpringBootApplication 注解来启动应用程序。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {

    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

通过这些步骤，您可以在 Spring Boot 中实现 WebSocket 功能。客户端可以使用 JavaScript 的 WebSocket
对象或其他 WebSocket 客户端库来连接到您的 WebSocket 端点。

请注意，上述代码只是一个基本示例，您可以根据实际需求进行更复杂的 WebSocket 实现。另外，还可以使用 @MessageMapping
注解来处理特定消息类型，使用 SimpMessagingTemplate 发送消息给订阅了特定主题的客户端等。

前端如何与 websocket 通信

在前端处理 WebSocket 连接和消息，您可以使用 JavaScript 的 WebSocket API 来实现。以下是基本的前端处理步骤：

创建 WebSocket 对象：使用 WebSocket 构造函数创建一个 WebSocket 对象，并传入 WebSocket 服务器的 URL。

1	var socket = new WebSocket("ws://localhost:8080/your-application/websocket");

监听 WebSocket 事件：通过 WebSocket 对象的事件处理程序，监听 WebSocket 的连接状态和消息事件。

socket.onopen = function () {
    // 连接建立后的操作
};

socket.onclose = function () {
    // 连接关闭后的操作
};

socket.onerror = function (error) {
    // 错误处理
};

socket.onmessage = function (event) {
    var message = event.data;
    // 处理收到的消息
};

发送消息：使用 WebSocket 对象的 send 方法发送消息到 WebSocket 服务器。

1	socket.send("Hello, server!");

关闭连接：使用 WebSocket 对象的 close 方法关闭 WebSocket 连接。

1	socket.close();

通过这些步骤，您可以在前端处理 WebSocket 连接和消息。您可以根据实际需求，在事件处理程序中实现您的业务逻辑，例如更新 UI、发送和接收数据等。

请注意，WebSocket 连接是异步的，所以您需要适当处理连接建立、关闭和错误事件。此外，还可以使用其他 WebSocket 库（如 Socket.io、SockJS 等）来简化 WebSocket 处理，并提供更多高级功能，如自动重连、心跳检测等。

如何使用 Python 与 websocket 通信

要实现 Python 和 Spring Boot WebSocket 的通信，可以使用 Python 的 WebSocket 客户端库与 Spring Boot 的 WebSocket 服务器进行通信。以下是一种常见的实现方式：

安装 WebSocket 客户端库：使用 Python 的包管理工具（如 pip）安装 websocket-client 库。

1	pip install websocket-client

在 Python 中创建 WebSocket 连接：在 Python 代码中导入 websocket 库，并创建一个 WebSocket 连接到 Spring Boot 的 WebSocket 服务器。

import websocket

def on_message(ws, message):
    # 处理收到的消息
    print(f"Received: {message}")

def on_error(ws, error):
    # 处理错误
    print(f"Error: {error}")

def on_close(ws):
    # 处理连接关闭
    print("Connection closed")

def on_open(ws):
    # 处理连接建立
    print("Connection established")
    # 发送消息
    ws.send("Hello from Python!")

websocket.enableTrace(True)
ws = websocket.WebSocketApp("ws://localhost:8080/your-websocket-endpoint",
                            on_message=on_message,
                            on_error=on_error,
                            on_close=on_close)
ws.on_open = on_open
ws.run_forever()

在 Spring Boot 中处理 WebSocket 消息：在您的 Spring Boot 应用程序中创建 WebSocket 处理器类，处理来自 Python 客户端的消息。

import org.springframework.stereotype.Component;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;

@Component
public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的消息
        System.out.println("Received: " + message.getPayload());
        // 发送消息给 Python 客户端
        session.sendMessage(new TextMessage("Hello from Spring Boot!"));
    }
}