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

    前言

    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 秒向服务器发送一条消息。当收到服务器响应时，我们将消息打印到控制台中。如果连接关闭或失败，我们也会在控制台中打印相应的消息

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    服务器端

    前端 nodejs 实现

    使用 node.js 实现 WebSocket 服务器

    使用 npm 下载 nodejs-websocket 依赖

    npm i nodejs-websocket

    • 1

    创建 nodejs-websocket.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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

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

    使用 node 启动服务器

    node .\nodejs-websocket.js

    • 1

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

    服务器端

    image-20231010080652847

    客户端

    image-20231010080715381

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

    image-20231010080957521

    后端 SpringBoot实现

    引入依赖

    <dependency>
    <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-websocketartifactId>
dependency>

    • 1
    • 2
    • 3
    • 4

    创建 ServerEndpoint

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

    @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;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    添加 Spring 配置

    @Configuration
@EnableWebSocket
public class WebSocketConfig {

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    启动

    运行 SpringBoot 启动类

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

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

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

    • 1
    • 2
    • 3
    • 4

    image-20231010092954979

  • 相关阅读:
    第二章 初识Linux Shell
    HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
    元梦之星内测上线，如何在B站打响声量？
    【Linux私房菜】—— 远程登录与数据传输、Vim与Vi的基础用法、关机与重启、登录与注销
    关于电影的HTML网页设计—— 电影小黄人6页 HTML+CSS+JavaScript
    算法入门教程（五、贪心）
    【电力系统】热电联产机组优化调度问题附matlab代码
    谷歌开源芯片 180 纳米制造工艺
    Spring默认缓存的使用-Simple
    最刁钻的阿里面试官总结的面试者常用面试题，看看你会哪些？
  • 原文地址：https://blog.csdn.net/weixin_62726289/article/details/133738421