当前位置：首页 > news >正文

WebSocket简单了解

news 2025/8/27 6:41:42

WebSocket 是一种计算机网络通信协议，它在客户端和服务器之间建立一个持久的、双向的通信通道。与传统的 HTTP 请求-响应模型不同，WebSocket 允许数据在客户端和服务器之间实时双向传输，因此非常适合需要即时交互的应用，如实时聊天、在线游戏、股票行情等。

WebSocket 的工作原理

建立连接：
WebSocket 通过 HTTP 协议进行握手，以便建立初始连接。具体流程如下：
- 客户端向服务器发送一个 WebSocket 握手请求（HTTP 请求）。这个请求的标志是 Upgrade 头部字段，告诉服务器要升级为 WebSocket 协议。
- 服务器接收到这个请求后，如果支持 WebSocket 协议，会返回一个带有 101 Switching Protocols 状态码的 HTTP 响应，表示切换到 WebSocket 协议。
一旦这个握手成功，连接就被升级为 WebSocket 连接，后续的通信就不再使用 HTTP 协议，而是使用 WebSocket 协议。
双向通信：
- 一旦建立连接，客户端和服务器可以相互发送消息，而不需要像 HTTP 那样每次都重新建立连接。双方可以随时发送数据包（称为“消息”）。
- WebSocket 协议支持文本消息和二进制消息（如图像或文件）。数据可以是 UTF-8 编码的文本，也可以是 二进制数据（如 Blob 或 ArrayBuffer）。
关闭连接：
- 一旦通信结束，任何一方都可以发起关闭连接的请求。关闭过程也是通过 WebSocket 协议的帧（frame）来实现的。关闭连接时，双方会交换一个特殊的“关闭帧”。

WebSocket 的优点

实时性：
WebSocket 提供了一个全双工的通信通道，可以在客户端和服务器之间实现实时数据传输。比如，股票行情、实时聊天、多人在线游戏等都可以通过 WebSocket 实现。
减少延迟：
与传统的轮询机制相比，WebSocket 消除了每次请求都建立新连接的开销，减少了延迟。
节省带宽：
WebSocket 连接一旦建立，后续的数据传输是基于持久连接的，因此减少了频繁的请求和响应，节省了带宽。
双向通信：
WebSocket 支持双向通信，可以让客户端和服务器随时互相发送消息。这对于许多应用非常重要，例如即时消息和推送通知。

WebSocket 与 HTTP 的区别

特性	WebSocket	HTTP
连接方式	双向通信，持久连接，持久握手	单向通信，每次请求-响应都需要建立新的连接
消息传输方式	双向实时传输（可以推送数据）	客户端请求后，服务器响应一次，不能主动发送数据
建立连接的开销	只需一次握手即可，后续消息传输没有开销	每次请求都要建立新连接
应用场景	实时应用，如在线游戏、股票行情、实时聊天等	页面请求、资源请求、API调用等

WebSocket 示例

以下是一个简单的 WebSocket 客户端和服务器的实现示例：

1. WebSocket 客户端 (JavaScript)

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');// 当连接成功时触发
socket.onopen = function() {console.log('WebSocket连接已打开');// 发送消息socket.send('Hello, Server!');
};// 当接收到消息时触发
socket.onmessage = function(event) {console.log('收到消息:', event.data);
};// 当连接关闭时触发
socket.onclose = function() {console.log('WebSocket连接已关闭');
};// 发生错误时触发
socket.onerror = function(error) {console.log('WebSocket发生错误:', error);
};

2. WebSocket 服务器 (Node.js 示例)

const WebSocket = require('ws');// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function(ws) {console.log('客户端已连接');// 监听客户端消息ws.on('message', function(message) {console.log('收到客户端消息:', message);// 回复客户端ws.send('Hello, Client!');});// 客户端连接关闭时触发ws.on('close', function() {console.log('客户端连接关闭');});
});