摘要：WebSocket详解：建立连接、数据传输与关闭连接WebSocket是一种基于TCP的通信协议，提供了全双工的通信通道，允许客户端和服务器之间进行实时的双向数据传输。与传统的HTTP协议不同，WebSocket可以在建立连接后保持持久通信...
WebSocket详解：建立连接、数据传输与关闭连接
WebSocket是一种基于TCP的通信协议，提供了全双工的通信通道，允许客户端和服务器之间进行实时的双向数据传输。与传统的HTTP协议不同，WebSocket可以在建立连接后保持持久通信，从而实现低延迟、高效率的数据交换。本文将详细介绍WebSocket的工作流程，包括建立连接、数据传输和关闭连接。
高防CDN就选蓝易云，百度搜索：蓝易云
建立连接
1. 客户端发起WebSocket握手请求
客户端通过发送一个特殊的HTTP请求来发起WebSocket握手。这个请求包含一个 Upgrade头部，指示服务器将协议从HTTP升级为WebSocket。例如：
GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 132. 服务器接收握手请求并进行验证
服务器接收到握手请求后，检查请求头部以验证是否符合WebSocket协议的要求。服务器需要确保请求包含正确的 Upgrade和 Connection头部，并验证 Sec-WebSocket-Key。
3. 服务器返回握手响应
如果握手验证通过，服务器返回一个HTTP响应，状态码为101 Switching Protocols，表示成功升级到WebSocket协议。响应示例如下：
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=4. 建立连接完成
握手成功后，客户端和服务器之间的TCP连接升级为WebSocket连接，双方可以开始实时的双向数据传输。
数据传输
1. 双向通信
在WebSocket连接建立后，客户端和服务器可以使用该连接进行双向通信，不再需要每次通信都重新建立连接。客户端和服务器都可以随时发送和接收消息。
2. 发送与接收消息
消息可以是文本或二进制形式。客户端和服务器通过 send()方法发送消息，通过 onmessage事件接收消息。示例如下：
客户端发送消息：
socket.send("Hello, Server!");服务器接收消息并回复：
socket.onmessage = function(event) { console.log("Message from client: ", event.data); socket.send("Hello, Client!"); };3. 数据格式与帧
WebSocket消息由一个或多个帧（frame）组成，每个帧包含消息的部分数据。消息可以分为多个帧发送，提高了传输的灵活性。
关闭连接
1. 发起关闭请求
客户端或服务器可以随时选择关闭WebSocket连接。关闭连接的一方发送一个特殊的关闭帧（Close Frame）给另一方，指示连接即将关闭。
socket.close(1000, "Normal Closure");2. 接收关闭请求并响应
接收到关闭帧的一方会发送一个关闭帧作为响应，确认关闭连接。双方在接收到关闭帧后，WebSocket连接正式关闭。
3. 关闭连接的流程
一方发送关闭帧。另一方接收关闭帧，并发送关闭帧作为响应。双方都收到关闭帧后，连接关闭。WebSocket的关键特性
1. 持久连接
WebSocket连接在建立后可以保持较长时间的通信，不需要像HTTP那样每次请求都重新建立连接，从而减少了延迟和资源消耗。
2. 实时双向通信
WebSocket允许客户端和服务器之间进行实时的双向数据传输，非常适合需要低延迟、高频次数据交换的应用场景，如实时聊天、在线游戏、股票交易等。
3. 心跳机制
WebSocket可以通过心跳机制检测连接是否存活。客户端和服务器可以定期发送心跳消息，如果在一定时间内未收到心跳响应，则认为连接已断开。
4. 数据压缩与加密
WebSocket支持数据压缩（如使用Per-message deflate扩展）和加密（如通过wss协议），提高了传输效率和安全性。
实用示例
以下是一个使用JavaScript和Node.js实现的简单WebSocket通信示例。
客户端代码（JavaScript）：
// 创建WebSocket连接 const socket = new WebSocket(ws://localhost:8080); // 连接建立时触发 socket.onopen = function(event) { console.log("Connected to server"); socket.send("Hello, Server!"); }; // 接收到消息时触发 socket.onmessage = function(event) { console.log("Message from server: ", event.data); }; // 连接关闭时触发 socket.onclose = function(event) { console.log("Connection closed: ", event.reason); };服务器代码（Node.js）：
const WebSocket = require(ws); // 创建WebSocket服务器 const wss = new WebSocket.Server({ port: 8080 }); // 监听连接事件 wss.on(connection, function(socket) { console.log("Client connected"); // 接收到消息时触发 socket.on(message, function(message) { console.log("Message from client: ", message); socket.send("Hello, Client!"); }); // 连接关闭时触发 socket.on(close, function(reason) { console.log("Connection closed: ", reason); }); });分析说明表
步骤
描述
建立连接
客户端发起握手请求，服务器验证并响应，成功升级为WebSocket连接。
数据传输
客户端和服务器通过WebSocket连接进行实时的双向数据传输，使用send()发送消息，onmessage接收消息。
关闭连接
发送关闭帧，接收方响应关闭帧，连接正式关闭。
关键特性
持久连接、实时双向通信、心跳机制、数据压缩与加密。
思维导图
WebSocket
建立连接
数据传输
关闭连接
客户端握手请求
服务器验证响应
双向通信
发送与接收消息
发起关闭请求
接收关闭请求
关闭连接流程
总结
WebSocket协议提供了一种高效、低延迟的实时双向通信方式，非常适合需要频繁数据交换的应用场景。通过本文的详细讲解，您应该对WebSocket的建立连接、数据传输和关闭连接的流程有了深入的了解，并能应用于实际项目中。WebSocket不仅提升了通信效率，还为构建实时应用提供了坚实的基础。
