实时通讯技术WebSocket

一、什么是WebSocket

简介：
WebSocket是一种在单个TCP连接上进行全双工通讯的协议。与传统的HTTP请求-响应模式不同，WebSocket允许服务器主动推送信息到客户端，从而实现实时、双向数据传输的能力。这在需要即时通信的场景中非常有用。

核心特性：

全双工通信：客户端和服务端都可以随时主动发送数据，而不必等待对方。
单一持久连接：建立连接后无需重复握手，多次通信都在同一连接中进行，减少开销和延迟。
轻量级数据格式：通常使用文本或二进制数据格式传输，减少网络消耗。

二、WebSocket的应用场景

实时消息推送：
比如聊天室、游戏大厅中的状态同步，聊天消息的即时显示。
实时数据更新/行情数据：
股票行情、比特币价格变化、体育比赛实时比分、在线协作文档的状态同步等需要快速、持续的更新数据。
在线协作和即时通知：
像Google Docs、Trello等产品中的多人协同操作需要实时同步数据。
在线客服和IM工具：
客服系统中需要服务端随时向客户端推送信息，客户端也可随时向服务端发送消息。

三、学习WebSocket的自学路线和方法

概念与规范入门：
- 阅读W3C和RFC文档（RFC 6455）或MDN上的WebSocket介绍，了解WebSocket握手流程、消息格式、状态码、心跳检测等基础内容。
- 推荐资料：
  - MDN WebSocket说明
  - RFC 6455文档
客户端层面学习（前端视角）：
- 使用浏览器原生的WebSocket对象进行连接和消息收发。
- 学会在JS代码中进行new WebSocket("ws://yourserver")的基本操作，捕获onopen、onmessage、onerror和onclose事件，验证基本交互是否成功。
- 简单调试和查看网络面板中WebSocket帧的收发情况。
服务端实现与框架选型（Java生态）：
- Java EE中已有WebSocket规范（JSR-356）。
- 使用Tomcat、Jetty或其他支持WebSocket的容器进行简单服务端端点的编写。
- Spring生态（推荐）：
  - Spring框架中使用Spring WebSocket模块快速构建WebSocket服务端。
  - 使用@ServerEndpoint（在非Spring框架中）、@EnableWebSocket、@ServerEndpoint或@Configuration注解和WebSocketHandler接口（在Spring中）实现WebSocket服务端逻辑。
深入扩展：
- 心跳检测和断线重连策略。
- 安全认证和权限控制：在实际生产中需要对WebSocket连接进行身份验证，比如通过HTTP握手的Header或JWT Token校验用户。
- 集群部署、消息广播、消息路由策略（可能需要与消息队列集成，如Redis、Kafka，或者使用STOMP协议进行消息分发）。
实践和练习：
- 从简单的单机聊天功能开始搭建。
- 学习如何在后端主动Push消息，例如当订单状态改变时自动通知前端。

四、简单Demo示例

场景描述：

假设你要做一个简单的WebSocket服务端，前端页面在用户连接后可以实时接收服务端每隔数秒推送的随机数。这个例子演示服务端主动推送消息给前端客户端。

技术栈：

使用Spring Boot（版本约2.x或3.x）快速开发WebSocket服务端。
前端使用纯HTML+JavaScript。

服务端代码示例（Spring Boot方式）

Step 1：添加依赖（示例是Maven方式）

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
</dependencies>

Step 2：配置WebSocket
创建一个配置类并注册一个WebSocketHandler：

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;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.TextMessage;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 将"/ws"路径映射到我们定义的MyHandler上，并允许跨域访问
        registry.addHandler(new MyHandler(), "/ws").setAllowedOrigins("*");
    }

    class MyHandler extends TextWebSocketHandler {
        @Override
        public void afterConnectionEstablished(WebSocketSession session) throws Exception {
            // 连接建立后，开启一个线程定时向前端发送数据
            new Thread(() -> {
                try {
                    while (session.isOpen()) {
                        double randomNumber = Math.random();
                        session.sendMessage(new TextMessage("服务端推送数据: " + randomNumber));
                        Thread.sleep(2000); // 2秒推送一次
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }).start();
        }
    }
}

说明：

@EnableWebSocket用于开启WebSocket支持。
MyHandler继承TextWebSocketHandler，在afterConnectionEstablished里启动一个线程周期性发送数据（实际生产环境需注意线程池和资源管理，这里是示例演示）。

前端简单示例（HTML + JavaScript）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
</head>
<body>
    <h1>WebSocket实时数据演示</h1>
    <div id="messages"></div>

    <script>
        // 假设后端服务运行在本地的8080端口
        var ws = new WebSocket("ws://localhost:8080/ws");

        ws.onopen = function() {
            console.log("WebSocket连接已建立.");
        };

        ws.onmessage = function(event) {
            var messagesDiv = document.getElementById("messages");
            var newMessage = document.createElement("p");
            newMessage.textContent = event.data;
            messagesDiv.appendChild(newMessage);
        };

        ws.onerror = function(event) {
            console.error("WebSocket发生错误:", event);
        };

        ws.onclose = function() {
            console.log("WebSocket连接已关闭.");
        };
    </script>
</body>
</html>