WebSocket 协议及其使用案例

文章目录

  • 前言
  • 一、初识 WebSocket 协议
    • 1.1 什么是 WebSocket 协议
    • 1.2 WebSocket 与 HTTP 的关系
    • 1.3 WebSocket 握手的过程
    • 1.4 WebSocket 解决了什么问题
  • 二、WebSocket 数据帧格式
    • 2.1 WebSocket 数据帧格式图示
    • 2.2 各字段的详细说明
  • 三、SpringBoot 项目中引入 WebSocket
    • 3.1 创建 Spring Boot 项目并引入 WebSocket 依赖
    • 3.2 继承 TextWebSocketHandler 类
    • 3.3 配置资源路径
    • 3.4 前端代码
    • 3.5 运行演示

前言

WebSocket 协议是一种用于实时通信、全双工的网络协议。它运行在传输层之上，通常基于 TCP 连接。相较于传统的 HTTP 协议，WebSocket 协议能够在单个连接上进行双向通信，实现数据的实时交互，因此在实时性较高的应用中表现得尤为出色。

一、初识 WebSocket 协议

1.1 什么是 WebSocket 协议

WebSocket 协议是一种允许服务器和客户端之间进行全双工、实时通信的协议。它克服了 HTTP 协议的请求-响应模式，通过在客户端和服务器之间建立持久性的连接，实现了数据的实时传输。传统的 HTTP 连接每次请求都需要建立和关闭，而 WebSocket 连接则能够一直保持开放状态，避免了频繁的连接建立和关闭开销。

WebSocket协议的特点包括：

  • 全双工通信： 服务器和客户端可以同时发送和接收数据，而不需要等待对方的请求或响应。
  • 持久连接： WebSocket 连接保持开放状态，避免了频繁的连接建立和关闭，降低了通信延迟。
  • 低延迟： 由于连接一直开放，数据可以实时传输，满足实时性需求。
  • 更少的数据开销： 与 HTTP 相比，WebSocket 连接只需要在握手阶段进行一次 HTTP 请求，减少了数据传输的开销。

1.2 WebSocket 与 HTTP 的关系

WebSocket 协议和 HTTP 协议之间有密切的关系，WebSocket 连接的建立需要通过 HTTP 握手来协商，其基本流程如下：

  • 在握手阶段，客户端首先发送一个 HTTP 请求，并在请求报头中设置一个 Upgrade 字段，表示希望升级到WebSocket连接。
  • 服务器在确认后，返回一个 HTTP 响应，即将协议切换为 WebSocket 协议，此时就表示升级成功了。
  • 此后，连接从 HTTP 协议升级为 WebSocket 协议，实现了全双工、数据实时通信。

下图展示了建立 WebSocket 连接的基本过程：

1.3 WebSocket 握手的过程

WebSocket 的握手是指在建立 WebSocket 连接时，客户端和服务器之间通过 HTTP 协议进行交互，以协商升级连接到 WebSocket 协议。WebSocket的握手过程允许服务器和客户端确认其支持WebSocket协议，并进行连接的升级。

以下是 WebSocket 握手的基本步骤：

  1. 客户端发送握手请求： 客户端通过发送一个 HTTP 请求来启动 WebSocket 握手。这个请求中需要包含一些特定的头部字段，以及用于安全验证的 Sec-WebSocket-Key 字段。

示例请求头部：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
  1. 服务器响应握手： 服务器接收到握手请求后，会验证 Sec-WebSocket-Key 字段，并生成一个响应密钥。如果验证通过，服务器会返回一个 HTTP 响应，表示升级到 WebSocket 协议。

示例响应头部：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
  1. 连接升级： 一旦客户端收到服务器的响应，表示握手成功。此时连接会从HTTP协议升级到WebSocket协议，客户端和服务器可以开始在同一个连接上进行实时的双向通信。

需要注意的是，Sec-WebSocket-Key 和 Sec-WebSocket-Accept 字段的计算是基于一种安全验证的机制。Sec-WebSocket-Key 是客户端随机生成的一个字符串，服务器会使用这个字符串进行一定的计算，然后生成Sec-WebSocket-Accept字段，以确保握手请求的合法性。

WebSocket 握手过程的成功完成意味着客户端和服务器之间已经建立了一个 WebSocket 连接，双方可以在这个连接上进行实时的数据传输。握手是 WebSocket 通信的起始点，之后的数据交换将遵循 WebSocket 的数据帧格式进行。

1.4 WebSocket 解决了什么问题

WebSocket 协议解决了传统 HTTP 协议在实时性、延迟和数据开销等方面存在的问题。通过保持持久性连接和全双工通信，WebSocket 协议实现了实时数据的传输，适用于需要及时通知和数据更新的应用，如：

  • 即时聊天应用，用户能够实时收到新消息。
  • 实时游戏，玩家可以同时看到其他玩家的动作。
  • 股票市场监控，投资者能够及时了解股价变动。

总之，WebSocket 协议弥补了 HTTP 协议在实时性通信方面的不足，为实时应用提供了高效、低延迟的解决方案。在接下来的内容中，我们将深入探讨 WebSocket 协议的数据格式以及在 Spring Boot 项目中的应用。

二、WebSocket 数据帧格式

2.1 WebSocket 数据帧格式图示

2.2 各字段的详细说明

WebSocket协议的数据帧格式是用于在WebSocket连接上传输数据的基本单位。每个数据帧包含了控制信息和有效负载（Payload Data）。以下是WebSocket数据帧的格式及其各个字段的详细说明：

  • FIN (1 bit)：表示消息是否是最后一个数据帧。若为1，则表示是消息的最后一个帧；若为0，则还有后续数据帧。

  • RSV1, RSV2, RSV3 (各占 1 bit)：保留位，通常设置为0，用于未来的扩展。

  • Opcode (4 bits)：指定数据帧的类型。常见的类型有：

    • 0x0：表示数据帧是一个连续帧。
    • 0x1：表示数据帧是文本帧。
    • 0x2：表示数据帧是二进制帧。
    • 0x8：表示连接关闭帧。
    • 0x9：表示Ping帧，用于心跳检测。
    • 0xA：表示Pong帧，作为对Ping的响应。
    • 其他值为保留或用于扩展。

  • MASK (1 bit)：表示Payload Data是否经过掩码加密。客户端发送给服务器的数据帧需要加密，所以MASK位为1。

  • Payload length (7 bits, 7+16 bits, 或 7+64 bits)：表示Payload Data的长度。

    • 若值在0~125之间，表示Payload Data的实际长度。
    • 若值为126，则表示后续的16 bits为无符号整数，用于表示Payload Data的长度。
    • 若值为127，则表示后续的64 bits为无符号整数，用于表示Payload Data的长度。

  • Extended payload length (16或64 bits)：仅在Payload length为126或127时出现，用于表示实际的Payload Data长度。

  • Masking-key (32 bits)：仅在MASK位为1时出现，用于解码Payload Data。Masking-key是一个32位的随机数。

  • Payload Data：有效负载数据。如果MASK位为1，则需要对Payload Data进行掩码解密，使用Masking-key进行解码。

WebSocket数据帧的格式允许在同一个连接上传输不同类型的数据，并且可以通过掩码保护数据的安全性。不同的Opcode类型用于标识数据的用途，例如文本数据、二进制数据、连接关闭、心跳检测等。

三、SpringBoot 项目中引入 WebSocket

3.1 创建 Spring Boot 项目并引入 WebSocket 依赖

引入 WebSocket 依赖非常简单，只需要在创建 SpringBoot 项目的时候，勾选上 WebSocket 就行了：

3.2 继承 TextWebSocketHandler 类

要使用 WebSocket 的相关功能，需要继承 TextWebSocketHandler 类来实现我们自己的 MyWebSocketHandler 类，我创建了一个websocket包，在里面建立一个类 MyWebSocketHandler：

然后需要重写里面的方法。这里我重新了四个方法：

这四个方法分别代表的含义：

  1. afterConnectionEstablished 方法：在WebSocket连接成功建立后被自动调用。

  2. handleTextMessage 方法：在WebSocket接收到文本消息时被自动调用。常常用于收到的消息进行转发。

  3. handleTransportError 方法：在连接出现异常时被自动调用。

  4. afterConnectionClosed 方法：在连接正常关闭后被自动调用。

通过实现这些方法，可以控制 WebSocket 连接的行为，包括连接的建立、消息的处理、异常的处理以及连接的关闭。这使得我们能够在应用中实现 WebSocket 通信的各种逻辑。

WebSocket 代码样例：

此处只是对连接建立、收到的消息、连接断开、异常等进行了简单的打印操作。

@Service
public class MyWebSocketHandler extends TextWebSocketHandler {
    /**
     * 这个方法会在 WebSocket 连接成功后，被自动调用
     *
     * @param session WebSocket 连接中对应的会话
     * @throws Exception 异常信息
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("TestWebSocketComponent 连接成功！");
    }

    /**
     * 这个方法会在 WebSocket 收到消息的时候，被自动调用
     *
     * @param session WebSocketSession
     * @param message 收到消息的值
     * @throws Exception 异常信息
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("TestWebSocketComponent 收到消息！" + message.toString());
        // session 是一个会话，其中记录了通信双方是谁（session 中就持有了 WebSocket 的通信连接）
        session.sendMessage(message);
    }

    /**
     * 这个方法会在连接出现异常的时候，被自动调用
     *
     * @param session   WebSocketSession
     * @param exception 异常信息
     * @throws Exception 异常信息
     */
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.out.println("TestWebSocketComponent 连接异常了！");
    }

    /**
     * 这个方法会在连接正常关闭后，被自动调用
     *
     * @param session WebSocketSession
     * @param status  关闭的状态
     * @throws Exception 异常信息
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("TestWebSocketComponent 连接关闭！");
    }
}

3.3 配置资源路径

要想使我们刚才创建的 MyWebSocketHandler 能够在建立 WebSocket 连接之后能够被调用，还需要对其进行配置，即注册该类与资源路径的映射关系。

  1. 首先创建一个 config包，然后在里面创建一个类 WebSocketConfig。
  2. 这个类需要实现 WebSocketConfigurer 接口，并重写 registerWebSocketHandlers 方法。

注意，需要添加 @Configuration 表示其是一个配置类，并且储存到 Spring 中；另外还需添加 @EnableWebSocket 注解，表示启用WebSocket 支持，使应用能够处理 WebSocket 连接。

@Configuration
@EnableWebSocket 
public class WebSocketConfig implements WebSocketConfigurer {
    /**
     * 通过这个方法，把刚才创建好的 Handler 类注册到具体的路径中
     *
     * @param registry WebSocketHandlerRegistry
     */
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    }
}
  1. 最后将刚才的 MyWebSocketHandler 与一个具体的请求路径关联。
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Autowired
    private MyWebSocketHandler myWebSocketHandler;

    /**
     * 通过这个方法，把刚才创建好的 Handler 类注册到具体的路径中
     *
     * @param registry WebSocketHandlerRegistry
     */
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 当浏览器通过 WebSocket 请求的路径是 '/test' 的时候，就会调用到 MyWebSocketHandler 这个类中的方法
        registry.addHandler(myWebSocketHandler, "/test");
    }
}

当建立了 WebSocket 连接并且请求的路径是 /test 的时候，就会调用到 MyWebSocketHandler 这个类中的方法。通过这个配置，将WebSocket 的处理逻辑和路径连接起来，使得 WebSocket 连接能够在应用中得到正确处理和响应。

3.4 前端代码

编写一个用于测试 WebSocket 连接的简单前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试 WebSocket 的使用</title>
</head>
<body>
    <input type="text" id="message">
    <button id="send-button">发送</button>

    <script>
        // 创建一个 WebSocket 实例，连接到服务器的 /test 路径
        let websocket = new WebSocket("ws://localhost:8081/test");

        // WebSocket 连接建立成功的回调函数
        websocket.onopen = function () {
            console.log("WebSocket 连接成功！");
        }

        // WebSocket 收到消息的回调函数
        websocket.onmessage = function (message) {
            console.log("WebSocket 收到消息：" + message.data);
        }

        // WebSocket 连接断开的回调函数
        websocket.onclose = function () {
            console.log("WebSocket 连接断开！");
        }

        // WebSocket 连接异常的回调函数
        websocket.onerror = function () {
            console.log("WebSocket 连接异常！");
        }

        // 获取页面元素
        let messageInput = document.querySelector("#message");
        let sendButton = document.querySelector('#send-button');

        // 发送按钮的点击事件
        sendButton.onclick = function(){
            console.log("WebSocket 发送消息：" + messageInput.value);
            websocket.send(messageInput.value); // 向服务器发送消息
        }
    </script>
</body>
</html>

这段代码创建了一个简单的 HTML 页面，其中包含一个输入框、一个发送按钮和一些用于 WebSocket 连接的 JavaScript 代码。具体来说：

  • 页面加载时，JavaScript 代码创建了一个 WebSocket 实例，连接到了ws://localhost:8081/test路径。这与之前在WebSocketConfig中注册的路径相对应。
  • 设置了 WebSocket 的各种回调函数，分别处理连接建立、消息接收、连接断开和连接异常时的情况。
  • 当用户在输入框中输入文本并点击发送按钮时，JavaScript代码会使用websocket.send(messageInput.value)将用户输入的消息发送给服务器。

这个前端页面用于与之前创建的 WebSocket 处理器进行通信，可以在浏览器中打开这个页面，然后在控制台中观察 WebSocket 连接状态和消息传输情况。

3.5 运行演示

启动SpringBoot项目，在浏览器中通过 http://localhost:8081/test.html进行访问：

此时可以发现成功建立了 WebSocket 连接，并且可以通过抓包观察请求和响应。

下面是在建立 WebSocket 连接时，通过 Fiddle 抓包获取到的具体请求和响应：

请求：

响应：

页面中输入 “hello world”，然后发送：


此时可以看到，前端页面中成功通过 WebSocket 发送了消息。

后端输出：

发现此时后端也成功收到了刚才发送的消息。后续就可以将这个收到的消息进行转发，从而实现实时通信了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/98398.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

python中的文件操作

python中的文件操作

我们平常对文件的基本操作&#xff0c;大概可以分为三个步骤&#xff08;简称文件操作三步走&#xff09;&#xff1a; ① 打开文件 ② 读写文件 ③ 关闭文件 【注意事项】 注意&#xff1a;可以只打开和关闭文件&#xff0c;不进行任何读写 文件打开 open函数&#xff…
阅读更多...
Hibernate(Spring Data)抓取策略

Hibernate(Spring Data)抓取策略

文章目录 示例代码放到最后&#xff0c;使用的是Springboot 项目1. 简介2. Hibernate抓取策略分类2.1 即时加载&#xff08;Eager Loading&#xff09;2.2 延迟加载&#xff08;Lazy Loading&#xff09;2.3 子查询加载&#xff08;Subselect Loading&#xff09;2.4 基于批处理…
阅读更多...
排序之选择排序

排序之选择排序

文章目录 前言一、直接选择排序1、直接选择排序基本思想2、直接选择排序代码实现3、直接选择排序的效率 二、堆排序1、堆排序2、堆排序的效率 前言 选择排序的基本思想就是每一次从待排序的数据元素中选出最小(或最大)的一个元素&#xff0c;存放在序列的起始位置&#xff0c;…
阅读更多...
pdfh5在线预览pdf文件

pdfh5在线预览pdf文件

前言 pc浏览器和ios的浏览器都可以直接在线显示pdf文件&#xff0c;但是android浏览器不能在线预览pdf文件&#xff0c;如何预览pdf文件&#xff1f; Github: https://github.com/gjTool/pdfh5 Gitee: https://gitee.com/gjTool/pdfh5 使用pdfh5预览pdf 编写预览页面 <…
阅读更多...
PSP - 蛋白质结构预测 OpenFold Multimer 模型训练参数与配置

PSP - 蛋白质结构预测 OpenFold Multimer 模型训练参数与配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132575709 OpenFold Multimer 是用于预测蛋白质多聚体结构的计算方法。基于OpenFold 的单体预测框架&#xff0c;利用深度学习技术&#xff0c;结…
阅读更多...
Python Flask Web开发二：数据库创建和使用

Python Flask Web开发二：数据库创建和使用

前言 数据库在 Web 开发中起着至关重要的作用。它不仅提供了数据的持久化存储和管理功能&#xff0c;还支持数据的关联和连接&#xff0c;保证数据的一致性和安全性。通过合理地设计和使用数据库&#xff0c;开发人员可以构建强大、可靠的 Web 应用程序&#xff0c;满足用户的…
阅读更多...
Mysql数据库（1）—索引

Mysql数据库（1）—索引

索引是什么&#xff1f; 索引是帮助MySQL高效获取数据的排好序的数据结构。常见的索引数据结构包括&#xff1a; 二叉树红黑树Hash表B-Tree mysql索引分类 按逻辑结构分类&#xff1a;B tree索引、Hash索引、Full-text索引。按物理存储分类&#xff1a; &#xff08;1&…
阅读更多...
Linux命令awk详细用法

Linux命令awk详细用法

简介 awk 是一种强大的文本处理工具&#xff0c;用于在命令行环境下对文件或数据流进行逐行处理和分析。它是由 Alfred Aho、Peter Weinberger 和 Brian Kernighan 在 1977 年开发的&#xff0c;并以他们三人的姓氏命名。awk 在 Unix/Linux 系统中非常常见&#xff0c;也有 Win…
阅读更多...
【Git】在idea中多分支开发如何——合并分支、处理冲突

【Git】在idea中多分支开发如何——合并分支、处理冲突

博主简介&#xff1a;22级计算机科学与技术本科生一枚&#x1f338;博主主页&#xff1a;是瑶瑶子啦每日一言&#x1f33c;: “人间总有一两风&#xff0c;填我十万八千梦” 目录 一、背景二、具体操作 一、背景 我当前开发的分支——hfy我想将subject分支的最新代码拉取&…
阅读更多...
银河麒麟V10（Tercel）服务器版安装 Docker

银河麒麟V10（Tercel）服务器版安装 Docker

一、服务器环境 ## 查看系统版本&#xff0c;确认版本 cat /etc/kylin-release Kylin Linux Advanced Server release V10 (Tercel)## 操作系统 uname -p aarch64## 内核版本&#xff08;≥ 3.10&#xff09; uname -r 4.19.90-21.2.ky10.aarch64## iptables 版本&#xff08;…
阅读更多...
PowerBuilder通过jdbc连接mysql

PowerBuilder通过jdbc连接mysql

PowerBuilder,一个古老的IDE,打算陆续发些相关的,也许还有人需要,内容可能涉及其他作者,但基本都是基于本人实践整理,如涉及归属,请联系. 打开PB,菜单Tools--> system options,打开JAVA选项,点击新增文件&#xff08;白色文件图标&#xff09; 重要&#xff1a;需要在这里修…
阅读更多...
实体店砍价营销活动制作技巧大公开

实体店砍价营销活动制作技巧大公开

砍价营销是一种非常受欢迎的促销方式&#xff0c;可以吸引更多的顾客参与&#xff0c;提高销售量和品牌知名度。乔拓云网为您提供了一个简便而实用的砍价营销活动制作指南&#xff0c;让您轻松打造一场成功的砍价活动。 首先&#xff0c;您需要注册并登录乔拓云网账号&#xff…
阅读更多...
简单了解网络传输介质

简单了解网络传输介质

目录 一、同轴电缆 二、双绞线 三、光纤 四、串口电缆 一、同轴电缆 10BASE前面的数字表示传输带宽为10M&#xff0c;由于带宽较低、现在已不再使用。 50Ω同轴电缆主要用来传送基带数字信号&#xff0c;因此也被称作为基带同轴电缆&#xff0c;在局域网中得到了广泛的应用…
阅读更多...
【函数栈帧解析：代码的迷人堆积和无限嵌套】

【函数栈帧解析：代码的迷人堆积和无限嵌套】

本章重点 一、何为函数栈帧 二、函数栈帧特性 - 同栈 - 后进先出 三、认识内存空间布局图 四、认识相关寄存器 五、认识相关汇编命令 六、测试代码&#xff1a; 七、函数栈帧全过程 要解决的问题​​​​​​​ 局部变量是怎么创建的&#xff1f;为什么局部变量的值是随机值&am…
阅读更多...
echarts图表共用一个 timeline（A表 timeline 同时控制B表）

echarts图表共用一个 timeline（A表 timeline 同时控制B表）

先看效果： 再看代码（部分）： let barOption = {baseOption: {height: 350,timeline: {x: cen
阅读更多...
部署项目至服务器

部署项目至服务器

安装conda https://zhuanlan.zhihu.com/p/489499097 个人租借的服务器如何进行端口的开放呢&#xff1f; 防火墙设置&#xff1a; 添加规则设置&#xff1a; 即可&#xff1b; 通常下租借的服务器没有防火墙设置 相关链接&#xff1a; https://blog.csdn.net/weixin_4520…
阅读更多...
SAP-MM-冲销凭证布局变更

SAP-MM-冲销凭证布局变更

业务场景&#xff1a; 仓管员在冲销物料凭证时MBST&#xff0c;显示行很少&#xff0c;只有7行&#xff0c;提出需求调整布局为多行&#xff0c;但是MBST没有调整布局功能&#xff0c; 解决&#xff1a;点击“定制本地布局-选项-字体设置”调整字体大小 跟据需求调整字体&…
阅读更多...
正中优配：什么叫融资融券

正中优配：什么叫融资融券

融资融券是股市中常见的一种买卖方法。融资是指投资者通过某些途径借到资金&#xff0c;用以购买股票。融券是指投资者借股票卖出&#xff0c;并承诺在未来某一时点将股票偿还。 融资融券的实质是一种杠杆买卖&#xff1a;投资者通过融资或融券&#xff0c;增加了自己的资金量…
阅读更多...
30个惊艳的数据可视化作品，让你感受“数据之美”！

30个惊艳的数据可视化作品，让你感受“数据之美”！

‍ 在一个信息大爆炸的时代&#xff0c;每天都有很多的新消息、新发现、新趋势向我们狂轰乱炸而来。在这个过程中&#xff0c;我们既是数据的生产者&#xff0c;也是数据的使用者&#xff0c;然而初次获取和存储的原始数据总是杂乱无章的。 要想数据达到生动有趣、让人一目了…
阅读更多...
什么是 ORAM

什么是 ORAM

参考文献&#xff1a; [GO96] Goldreich O, Ostrovsky R. Software protection and simulation on oblivious RAMs[J]. Journal of the ACM (JACM), 1996, 43(3): 431-473.[Batcher68] Batcher K E. Sorting networks and their applications[C]//Proceedings of the April 30…
阅读更多...
最新文章

Copyright @ 2022~2023