当前位置:   article > 正文

websocket的工作原理_websocket的实现原理

websocket的实现原理

WebSocket 是一种在 Web 应用程序中实现全双工通信的协议。它允许客户端和服务器之间建立一个持久的连接,双方可以在这个连接上相互发送数据,而不需要通过传统的 HTTP 请求/响应模式。这使得 WebSocket 特别适用于实时应用,如聊天应用、在线游戏、实时数据推送等。以下是 WebSocket 的工作原理的详细说明。

WebSocket 的工作原理

1. 建立连接

WebSocket 连接的建立从一个 HTTP 请求开始。客户端通过一个 HTTP 请求(通常称为 "握手" 请求)请求升级协议,从 HTTP 升级到 WebSocket。

客户端请求:

 

http复制代码

GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com

  • Upgrade: websocket 和 Connection: Upgrade 标头表示客户端请求升级到 WebSocket 协议。
  • Sec-WebSocket-Key 是一个 Base64 编码的随机密钥,用于安全验证。

服务器响应:

 

http复制代码

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat

  • 状态码 101 Switching Protocols 表示服务器同意协议升级。
  • Sec-WebSocket-Accept 是服务器基于 Sec-WebSocket-Key 计算的一个值,确保握手请求的合法性。
2. 数据传输

一旦连接建立,客户端和服务器之间的通信使用 WebSocket 帧(frame)。WebSocket 帧有不同的类型,包括文本帧、二进制帧、关闭帧、Ping 帧和 Pong 帧。

  • 文本帧(Text Frame):用于传输文本数据(UTF-8 编码字符串)。
  • 二进制帧(Binary Frame):用于传输二进制数据。
  • 关闭帧(Close Frame):用于关闭连接。
  • Ping 帧和 Pong 帧:用于连接的心跳检测,维持连接的活跃状态。

每个 WebSocket 帧都有一个固定的头部格式,用于控制帧的类型和传输的负载数据。

3. 关闭连接

WebSocket 连接可以由客户端或服务器任意一方关闭。关闭连接的过程通过发送一个关闭帧来实现,另一方收到关闭帧后会响应一个关闭帧并关闭连接。

 

http复制代码

// 客户端或服务器发送关闭帧 0x88 0x00

关闭帧的第一个字节 0x88 表示帧的类型为关闭帧,第二个字节 0x00 表示负载长度为 0。

WebSocket 的优点

  1. 全双工通信:客户端和服务器可以在同一个连接上同时发送和接收消息,减少延迟。
  2. 持久连接:连接一旦建立,可以持续存在,避免了 HTTP 请求/响应的开销。
  3. 减少带宽消耗:由于减少了 HTTP 头部的开销,WebSocket 比传统的轮询和长轮询更高效。

WebSocket 的使用

客户端代码示例(JavaScript)
 

javascript复制代码

// 创建 WebSocket 连接 var socket = new WebSocket("ws://example.com/socket"); // 连接打开事件 socket.onopen = function(event) { console.log("WebSocket is open now."); // 发送数据 socket.send("Hello Server!"); }; // 接收消息事件 socket.onmessage = function(event) { console.log("Received message from server:", event.data); }; // 连接关闭事件 socket.onclose = function(event) { console.log("WebSocket is closed now."); }; // 连接错误事件 socket.onerror = function(error) { console.log("WebSocket error:", error); };

服务器代码示例(Node.js + ws 库)
 

javascript复制代码

const WebSocket = require('ws'); // 创建 WebSocket 服务器 const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('A new client connected'); // 接收消息事件 ws.on('message', function incoming(message) { console.log('Received message:', message); // 发送消息给客户端 ws.send('Hello from server'); }); // 连接关闭事件 ws.on('close', function close() { console.log('Client disconnected'); }); });

WebSocket 协议的详细解析

WebSocket 帧格式

WebSocket 帧头部格式如下:

 

复制代码

0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |F|R|R|R| opcode|M| Payload len | Extended payload length | |I|S|S|S| (4) |A| (7) | (16/64) | |N|V|V|V| |S| | (if payload len==126/127) | | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | +---------------------------------------------------------------+

  • FIN (1 bit): 表示是否是消息的最后一帧。
  • RSV1, RSV2, RSV3 (1 bit each): 保留位,通常为 0。
  • Opcode (4 bits): 表示帧的类型(如文本帧、二进制帧、关闭帧等)。
  • MASK (1 bit): 表示是否掩码(客户端发送给服务器的数据必须使用掩码)。
  • Payload len (7 bits): 表示负载数据的长度,如果值为 126 或 127,则使用扩展的负载长度字段。
  • Extended payload length (16/64 bits): 当负载长度大于 125 时使用此字段。
  • Masking-key (32 bits): 如果 MASK 设置为 1,则此字段用于解码负载数据。
  • Payload Data: 实际传输的数据。

总结

WebSocket 提供了一种在客户端和服务器之间进行实时通信的高效方法。通过一次握手请求,WebSocket 可以建立一个持久的、全双工的通信连接,减少了频繁建立和关闭连接的开销。理解其工作原理和帧格式有助于在应用中更好地使用和调试 WebSocket,从而实现高效的实时通信。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/在线问答5/article/detail/893978
推荐阅读
相关标签
  

闽ICP备14008679号