WebSocket简介以及做一个简单的聊天工具示例

最新推荐文章于 2025-03-26 16:23:37 发布

猫与熵

最新推荐文章于 2025-03-26 16:23:37 发布

阅读量1k

点赞数 21

文章标签： websocket 网络协议网络

本文链接：https://blog.youkuaiyun.com/weixin_43837880/article/details/146352952

版权

WebSocket个人学习

WebSocket 是一种全双工通信协议，它基于 TCP 连接，可以在服务器和客户端之间建立持久连接，实现实时数据传输。WebSocket 允许服务器主动推送消息给客户端，而不像 HTTP 那样只能由客户端发起请求。

它的通信过程一般如下：

握手阶段：客户端通过 HTTP 发送 Upgrade 请求，将协议从 HTTP 升级为 WebSocket。
数据传输阶段：连接建立后，客户端和服务器可以随时相互发送消息，而不需要每次建立新的连接。
关闭连接：当任意一方发送关闭帧，连接终止。
WebSocket 使用 ws://（明文传输）和 wss://（加密传输，相当于 HTTPS）协议。

场景

适合
需要实时性强的应用，如聊天、游戏、金融数据推送等。
需要服务器主动推送数据的应用，如物联网设备状态更新。
需要减少 HTTP 轮询开销，提高性能的场景。
不适合：
只需要偶尔获取数据的情况（如静态网页、传统 API 请求）。
受 HTTP 代理限制的环境（部分防火墙可能会阻止 WebSocket 连接）。
需要强一致性、高安全性的企业系统（可考虑 gRPC、MQTT 等协议）。

示例（IDEA）

引入pom依赖
下面展示一些 内联代码片。

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

写配置类

作用：ServerEndpointExporter 作用是扫描 @ServerEndpoint 注解的 WebSocket 端点，并注册到 Spring 容器

@Configuration
public class WebSocketConfiguration {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

创建websocket服务器

写一个简单的聊天室

import jakarta.websocket.*;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@Component
@ServerEndpoint("/ws/{username}") // WebSocket 连接地址
public class WebSocketServer {

    // 存储在线用户
    private static final Map<String, Session> clients = new ConcurrentHashMap<>();

    private String username;

    @OnOpen
    public void onOpen(Session session, @PathParam("username") String username) {
        this.username = username;
        clients.put(username, session);
        System.out.println(username + " 连接成功！");
        sendMessageToAll(username + " 进入聊天室！");
    }

    @OnMessage
    public void onMessage(String message) {
        System.out.println(username + " 发送消息：" + message);
        sendMessageToAll(username + "：" + message);
    }

    @OnClose
    public void onClose() {
        clients.remove(username);
        System.out.println(username + " 断开连接！");
        sendMessageToAll(username + " 退出聊天室！");
    }

    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println(username + " 发生错误：" + error.getMessage());
    }

    private void sendMessageToAll(String message) {
        for (Session session : clients.values()) {
            try {
                session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

@ServerEndpoint(“/ws/{username}”)：定义 WebSocket 连接地址，前端访问 ws://localhost:8080/ws/用户名称。
@OnOpen：当有用户连接时，存入 clients，并通知所有用户。
@OnMessage：当用户发送消息时，转发给所有用户。
@OnClose：当用户断开时，通知其他用户并移除。
@OnError：发生异常时的处理。

启动webSocket服务器

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;

@SpringBootApplication
public class WebSocketApplication {
    public static void main(String[] args) {
        SpringApplication.run(WebSocketApplication.class, args);
        System.out.println("WebSocket 服务器已启动！");
    }
}

一个正常的springboot启动类，我们已经写了配置类，会自动注册bean用于启动websocket服务器

前段webSocket客户端

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
</head>
<body>
    <h2>WebSocket 聊天室</h2>
    <input id="username" placeholder="输入用户名">
    <button onclick="connect()">连接</button>
    <br><br>
    <input id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
    <br><br>
    <div id="chat"></div>

    <script>
        let socket;

        function connect() {
            const username = document.getElementById("username").value;
            if (!username) {
                alert("请输入用户名！");
                return;
            }

            socket = new WebSocket("ws://localhost:8080/ws/" + username);

            socket.onopen = function () {
                console.log("连接成功");
            };

            socket.onmessage = function (event) {
                document.getElementById("chat").innerHTML += "<p>" + event.data + "</p>";
            };

            socket.onclose = function () {
                console.log("连接关闭");
            };

            socket.onerror = function (error) {
                console.log("WebSocket 错误：" + error);
            };
        }

        function sendMessage() {
            const message = document.getElementById("message").value;
            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send(message);
            } else {
                alert("请先连接 WebSocket 服务器！");
            }
        }
    </script>
</body>
</html>

简单的一个websocket就完成了

webSocket知识点巩固

WebSocket 是一种全双工（Full-Duplex）的通信协议，可以在单个 TCP 连接上进行双向数据传输。
适用于实时性要求高的场景，如聊天、推送、游戏、股票行情等。

WebSocket 和 HTTP/HTTPS 的区别？

特性 HTTP/HTTPS WebSocket
连接方式短连接（每次请求创建连接）长连接（保持 TCP 连接）
传输模式请求-响应（Client 请求，Server 响应）全双工（Client 和 Server 可以互相发送数据）
头部开销每次请求都要带完整的 Header 握手后，无需额外 Header，减少开销
适用场景页面加载、API 请求实时通信、消息推送

WebSocket 的工作流程

客户端发起 WebSocket 握手请求（Upgrade 头）。
服务器返回 101 Switching Protocols，升级连接。
双方可以自由发送数据，保持连接。
任何一方可以主动关闭连接。

高级知识点

如何做用户身份认证，
方式 1：通过 URL 传递 token
@OnOpen
public void onOpen(Session session, @PathParam(“token”) String token) {
if (!validateToken(token)) {
session.close();
}
}
方式 2：前端连接时传递 token
var ws = new WebSocket(“ws://localhost:8080/ws?token=xxx”);
方式 3：Spring Security + WebSocket 结合
在 HandshakeInterceptor 里获取 JWT Token 并解析用户身份。
WebSocket 如何做心跳检测？
服务器定期发送 PING
前端监听 onclose 事件，自动重连
setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(“ping”);
}
}, 30000);
WebSocket 如何做负载均衡？

单机 WebSocket 不支持多节点，需要 Redis 发布订阅（Pub/Sub）来同步消息：
redisTemplate.convertAndSend(“websocket-channel”, message);
Spring Cloud Gateway 负载均衡
让 WebSocket 连接到多个实例，实现高可用。