前言

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它可以让浏览器和服务器之间实现实时双向数据传输。

WebSocket 的优点是：

可以节省服务器资源和带宽，提高性能和效率
可以让服务器主动向客户端推送数据，实现实时响应和交互
可以避免传统 HTTP 模式下的轮询和长轮询等低效的通信方式

WebSocket 的工作原理是：

客户端通过浏览器发起一个 HTTP 请求，请求头中包含 Upgrade: websocket 和 Sec-WebSocket-Key 等参数，表示要求升级协议为 WebSocket
服务器收到请求后，如果同意升级协议，就返回一个 HTTP 响应，响应头中包含 Upgrade: websocket 和 Sec-WebSocket-Accept 等参数，表示已经切换到 WebSocket 协议
客户端和服务器之间建立了一个 WebSocket 连接，可以通过 send() 和 onmessage() 方法来发送和接收数据帧

WebSocket 的使用方法是：

在客户端，使用 new WebSocket(url) 来创建一个 WebSocket 对象，url 是类似 ws://yourdomain:port/path 的服务端 WebSocket 地址
在服务端，根据不同的语言和框架，有不同的实现方式
在客户端和服务端，都可以使用 WebSocket 对象的属性和事件来监听连接状态、发送数据和接收数据

客户端

创建一个 WebSocket 对象并连接到本地主机的 3000 端口。连接成功后，我们使用 setInterval() 方法每 2 秒向服务器发送一条消息。当收到服务器响应时，我们将消息打印到控制台中。如果连接关闭或失败，我们也会在控制台中打印相应的消息

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script>
  // 创建 WebSocket 对象
  var ws = new WebSocket('ws://localhost:3000/');

  // 连接成功的回调函数
  ws.onopen = () => {
    setInterval(function () {
      ws.send('向服务器端发送信息' + Math.random);
    }, 2000);
  }

  // 接受到服务器发送的信息时的回调函数
  ws.onmessage = (e) => {
    console.log('收到服务器响应的消息', e.data);
  }

  // 连接关闭后的回调函数
  ws.onclose = (evt) => {
    console.log("关闭客户端连接");
  }

  // 连接失败后的回调函数
  ws.onerror = (evt) => {
    console.log("连接失败");
  }

  // 监听窗口关闭，断开连接
  window.onbeforeunload = function () {
    ws.close();
  }
</script>

服务器端

前端 nodejs 实现

使用 node.js 实现 WebSocket 服务器

使用 npm 下载 nodejs-websocket 依赖

shell 复制代码

npm i nodejs-websocket

创建 nodejs-websocket.js 文件

js 复制代码

var ws = require('nodejs-websocket');
var server = ws.createServer(function (socket) {
  var count = 1;
  socket.on('text',function (str) {
    console.log(str);
    socket.sendText('服务器端收到客户端发来的消息了' + count++);
  })
}).listen(3000);

这段代码使用了 nodejs-websocket 库来创建 WebSocket 服务器。

它监听在本地主机的 3000 端口上，当客户端连接到服务器时，服务器会向客户端发送一条消息，然后在收到客户端的消息时，会将消息打印到控制台并向客户端发送一条响应消息

使用 node 启动服务器

shell 复制代码

node .\nodejs-websocket.js

在 vscode 中使用 open with live server 打开页面

服务器端

客户端

在线连接工具：在线websocket测试-在线工具-postjson (coolaf.com)

后端 SpringBoot实现

引入依赖

xml 复制代码

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

创建 ServerEndpoint

endpoint 是 URL，描述进程间通信，例如，客户端与服务器之间的通信，客户端是一个 endpoint，服务器是另一个 endpoint

java 复制代码

@ServerEndpoint("/webSocket")
@Component
public class WsServerEndpoint {

    /**
     * 连接成功
     *
     * @param session 会话
     */
    @OnOpen
    public void onOpen(Session session) {
        System.out.println("连接成功");
    }

    /**
     * 连接关闭
     *
     * @param session 会话
     */
    @OnClose
    public void onClose(Session session) {
        System.out.println("连接关闭");
    }

    /**
     * 接收到消息
     *
     * @param text 消息
     */
    @OnMessage
    public String onMsg(String text) throws IOException {
        return "server 发送：" + text;
    }
}

添加 Spring 配置

java 复制代码

@Configuration
@EnableWebSocket
public class WebSocketConfig {

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

启动

运行 SpringBoot 启动类

WebSocket 连接 URL：ws://localhost:7100/api/webSocket

在 application.yml 中可以设置端口，api 为虚拟路径，webSocket 为 @ServerEndpoint 指定的路径

yaml 复制代码

server:
  port: 7100
  servlet:
    context-path: /api

使用 nodejs，SpringBoot 两种方式实现 WebSocket

前言

客户端

服务器端

前端 nodejs 实现

后端 SpringBoot实现

引入依赖

创建 ServerEndpoint

添加 Spring 配置

启动