在当今的 web 应用开发中，实时性交互成为了越来越重要的需求。比如在线聊天、实时数据展示、股票行情监控等。传统的 HTTP 协议由于其单向请求 - 响应的工作模式，无法很好地满足实时双向通信的需求。而 WebSocket 协议的出现则填补了这一空白，它提供了一种在浏览器和服务器之间进行全双工通信的机制，即双方可以在任何时刻向对方发送数据。
WebSocket 协议基础
概念与原理
WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。与 HTTP 不同，WebSocket 一旦建立连接，连接会一直保持打开状态，双方可以随时向对方发送数据。其原理基于 TCP 协议，通过握手阶段将 HTTP 连接升级为 WebSocket 连接。
下面是 WebSocket 连接建立的过程示意图：
渲染错误: Mermaid 渲染失败: Parse error on line 6: ... 响应（升级确认） Client<->>Server: WebSocke ----------------------^ Expecting 'NEWLINE', 'AS', ',', 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', 'TXT', got 'INVALID'
在握手阶段，客户端发送一个 HTTP 请求，请求头中包含 Upgrade: websocket 和 Connection: Upgrade 字段，表示希望将当前的 HTTP 连接升级为 WebSocket 连接。服务器收到请求后，如果支持 WebSocket 协议，会返回一个 101 状态码，表示同意升级。之后，双方就可以通过这个 TCP 连接进行实时双向通信了。
与 HTTP 协议的对比
| 特性 | HTTP | WebSocket |
|---|---|---|
| 连接模式 | 单向请求 - 响应 | 全双工通信 |
| 开销 | 每次请求都有请求头，开销较大 | 连接建立后，数据传输开销小 |
| 实时性 | 服务器不能主动推送数据，实时性差 | 服务器可以主动推送数据，实时性好 |
WebSocket API 使用
在浏览器端，JavaScript 提供了原生的 WebSocket API 来创建和管理 WebSocket 连接。下面是一个简单的示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Example</title>
</head>
<body>
<script>
// 创建 WebSocket 实例
const socket = new WebSocket('ws://echo.websocket.org');
// 连接成功事件
socket.onopen = function () {
console.log('Connected to the WebSocket server');
// 向服务器发送消息
socket.send('Hello, server!');
};
// 接收到服务器消息事件
socket.onmessage = function (event) {
console.log('Received message from server: ', event.data);
};
// 连接关闭事件
socket.onclose = function () {
console.log('Connection closed');
};
// 连接错误事件
socket.onerror = function (error) {
console.log('WebSocket error: ', error);
};
</script>
</body>
</html>在上述代码中，首先创建了一个 WebSocket 实例，指定了服务器的地址。然后通过监听 onopen、onmessage、onclose 和 onerror 事件来处理连接的不同状态和接收服务器发送的消息。
在服务器端，不同的编程语言和框架都提供了对 WebSocket 的支持。下面是使用 Node.js 和 ws 库实现的一个简单的 WebSocket 服务器示例：
javascript
const WebSocket = require('ws');
// 创建 WebSocket 服务器实例
const wss = new WebSocket.Server({ port: 8080 });
// 监听客户端连接事件
wss.on('connection', function connection(ws) {
// 接收到客户端消息事件
ws.on('message', function incoming(message) {
console.log('received: %s', message);
// 向客户端发送消息
ws.send('Server received: ' + message);
});
// 客户端连接关闭事件
ws.on('close', function close() {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on port 8080');WebSocket 应用场景
在线聊天
在线聊天是 WebSocket 最常见的应用场景之一。通过 WebSocket 协议，客户端可以实时接收其他用户发送的消息，服务器也可以实时推送新消息给所有在线用户。以下是一个简单的在线聊天示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Chat</title>
<style>
#chat-box {
height: 300px;
border: 1px solid #ccc;
overflow-y: scroll;
padding: 10px;
}
</style>
</head>
<body>
<div id="chat-box"></div>
<input type="text" id="message-input" placeholder="Type your message">
<button onclick="sendMessage()">Send</button>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chatBox = document.getElementById('chat-box');
const messageInput = document.getElementById('message-input');
socket.onopen = function () {
console.log('Connected to the chat server');
};
socket.onmessage = function (event) {
const message = document.createElement('p');
message.textContent = event.data;
chatBox.appendChild(message);
};
function sendMessage() {
const message = messageInput.value;
if (message) {
socket.send(message);
messageInput.value = '';
}
}
</script>
</body>
</html>实时数据展示
在股票行情、实时监控等场景中，需要实时更新页面上的数据。WebSocket 可以让服务器在数据发生变化时及时将更新后的数据推送给客户端，从而实现实时数据展示。
javascript
// 客户端代码
const socket = new WebSocket('ws://localhost:8080/stock');
socket.onopen = function () {
console.log('Connected to the stock data server');
};
socket.onmessage = function (event) {
const stockData = JSON.parse(event.data);
// 更新页面上的股票数据展示
document.getElementById('stock-price').textContent = stockData.price;
};
// 服务器代码
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 模拟股票数据
let stockPrice = 100;
// 每隔一段时间更新股票数据并推送
setInterval(() => {
stockPrice += Math.random() - 0.5;
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({ price: stockPrice }));
}
});
}, 1000);
wss.on('connection', function connection(ws) {
// 连接建立时发送初始数据
ws.send(JSON.stringify({ price: stockPrice }));
});WebSocket 性能优化与注意事项
性能优化
- 心跳机制：为了保持 WebSocket 连接的稳定性，可以在客户端和服务器之间定期发送心跳消息。如果一段时间内没有收到心跳响应，则认为连接已经断开，可以尝试重新连接。
- 数据压缩：对于大量的数据传输，可以使用数据压缩算法（如 Gzip）来减少数据传输量，提高传输效率。
注意事项
- 安全性：WebSocket 连接默认是不安全的（ws 协议），在生产环境中应该使用安全的 WebSocket 协议（wss 协议），以防止数据泄露和中间人攻击。
- 兼容性：虽然现代浏览器都支持 WebSocket 协议，但在一些旧版本的浏览器中可能不支持。在开发时需要考虑兼容性问题，可以使用 polyfill 来提供兼容方案。
总结
WebSocket 协议为 Web 应用提供了一种高效、实时的双向通信机制，能够满足各种实时性交互的需求。通过使用原生的 WebSocket API 或相关的库，开发者可以轻松地在浏览器和服务器之间建立 WebSocket 连接，并实现各种实时应用。在实际开发中，需要注意性能优化和安全性问题，以确保应用的稳定性和可靠性。