WebSocket 协议及其使用案例

这篇具有很好参考价值的文章主要介绍了WebSocket 协议及其使用案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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 连接的基本过程:

WebSocket 协议及其使用案例,Java EE,计算机网络,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-KeySec-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 数据帧格式图示

WebSocket 协议及其使用案例,Java EE,计算机网络,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 就行了:
WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket

3.2 继承 TextWebSocketHandler 类

要使用 WebSocket 的相关功能,需要继承 TextWebSocketHandler 类来实现我们自己的 MyWebSocketHandler 类,我创建了一个websocket包,在里面建立一个类 MyWebSocketHandler
WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket

然后需要重写里面的方法。这里我重新了四个方法:
WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket

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

  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
    WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket
  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 协议及其使用案例,Java EE,计算机网络,WebSocket
此时可以发现成功建立了 WebSocket 连接,并且可以通过抓包观察请求和响应。

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

请求:
WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket
响应:

WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket

页面中输入 “hello world”,然后发送:

WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket
此时可以看到,前端页面中成功通过 WebSocket 发送了消息。

后端输出:
WebSocket 协议及其使用案例,Java EE,计算机网络,WebSocket
发现此时后端也成功收到了刚才发送的消息。后续就可以将这个收到的消息进行转发,从而实现实时通信了。文章来源地址https://www.toymoban.com/news/detail-687987.html

到了这里,关于WebSocket 协议及其使用案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Java EE初阶八】多线程案例(计时器模型)

            计时器类似闹钟,有定时的功能,其主要是到时间就会执行某一操作,即可以指定时间,去执行某一逻辑(某一代码)。         在java标准库中,提供了Timer类,Timer类的核心方法是schedule( 里面包含两个参数,一个是要执行的任务代码,一个是设置多久之后

    2024年01月21日
    浏览(46)
  • 【Java EE初阶十五】网络编程TCP/IP协议(二)

            tcp的socket api和U大片的socket api差异很大,但是和前面所讲的文件操作很密切的联系         下面主要讲解两个关键的类:         1、ServerSocket:给服务器使用的类,使用这个类来绑定端口号         2、Socket:即会给服务器使用,又会给客户端使用;         

    2024年02月20日
    浏览(51)
  • 持久双向通信网络协议-WebSocket-入门案例实现demo

    1 介绍 WebSocket 是基于 TCP 的一种新的 网络协议 。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建 持久性 的连接, 并进行 双向 数据传输。 HTTP协议和WebSocket协议对比: HTTP是 短连接 (一次响应完即消除) WebSocket是 长连接

    2024年01月16日
    浏览(47)
  • java实现websocket握手协议

    其中最重要的是最后几个换行不要丢,将字符串转成byte[]写给客户端即可 收到的掩码转换 下面是服务器向客户端发送消息

    2024年02月08日
    浏览(42)
  • 【Java EE】SpringBoot的创建与简单使用

    如果你的IDEA是专业版,则哪个版本都可以。 如果你是社区版,则请下载 2021.1 - 2022.1.4 如果个⼈电脑安装的 idea 不在这个范围,需要卸载重新安装 卸载参考:《IDEA卸载和删除注册表》 一定要删除注册表 关于Maven相关知识与国内源配置可以参考博主写的【Java EE】关于Maven 在学

    2024年04月11日
    浏览(74)
  • 计算机网络——Wireshark软件使用与协议分析(ARP协议、IP与ICMP分析)

            一、实验目的   学习 Wireshark 的基本操作,抓取和分析有线局域网的数据包;掌握以太网 MAC帧的基本结构,掌握 ARP 协议的特点及工作过程。  二、实验内容 使用 Wireshark 抓取局域网的数据包并进行分析: 1. 学习 Wireshark 基本操作:重点掌握捕获过滤器和显示过滤器

    2024年02月05日
    浏览(46)
  • 计算机网络-应用协议与数据包分析实验(使用Wireshark)

            通过本实验,熟练掌握Wireshark的操作和使用,学习对HTTP协议进行分析。         学习http协议,使用Wireshark截获http报文,对http请求报文和响应报文进行分析。 1.截获报文 打开Wireshark开始截获报文,从浏览器访问:http://kczx.hnu.edu.cn/G2S/Template/View.aspx?courseId=124

    2024年02月02日
    浏览(52)
  • Java WebSocket Demo ,案例手把手教学 记录(11)

    希望能写一些简单的教程和案例分享给需要的人 java websocket 服务端 系统:window 开发工具:IDEA 2022.2.3 JAVA 网络通讯开发 填写项目名字 选择 JAVA 语言 选择 Maven 选择自己的JDK版本 (我当前用的是 1.8.0_301) 第三步:编写websocket核心代码:创建类 在 org.example 上右击鼠标(进入菜

    2024年02月03日
    浏览(50)
  • 剖析JWT,及其使用案例

    什么是JWT JWT 是一个开放标准,它定义了一种用于简洁,自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法。 可以使用 HMAC 算法或者是 RSA 的公钥密钥对进行签名 简单来说: 就是通过一定规范来生成token,然后可以通过解密算法逆向解密token,这样就可以获取用

    2024年02月17日
    浏览(33)
  • Java EE开发系列教程 - 使用EJB组件与JPA层交互

    因为之前JPA原生 property 属性在Wildfly实现中并不总是生效,所以这里换成了Wildfly默认的JPA实现,即Hibernate。把属性改成了Hibernate专有的。 hibernate.hbm2ddl.auto 定义是否自动生成表, create-and-drop 意为如果表存在,则删除后再创建。 hibernate.dialect 用来指定数据库厂商,以根据不同

    2024年04月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包