HTML5 WebSocket 长连接详解
在现代 Web 开发中，实时通信变得越来越重要。为了解决传统 HTTP 请求-响应模型的局限性，HTML5 引入了 WebSocket。WebSocket 是一种双向通信协议，它允许客户端和服务器之间建立持久的连接。本文将探讨 WebSocket 的工作原理，并提供简单的代码示例。
WebSocket 的基本概念
WebSocket 允许创建保持开放的连接，客户端可以随时发送消息，服务器也可以随时推送消息给客户端。这种连接被称为“长连接”，相对于传统的短连接（例如 HTTP），长连接在实时数据传输时具有明显的优势。
优点:
- 减少了频繁的握手开销。
- 实现了双向通信。
- 提高了数据传输的效率。
WebSocket 的工作原理
WebSocket 使用 HTTP 协议进行连接握手。一旦握手成功，接下来的数据传输将通过 WebSocket 协议进行。
- 客户端发送一个 HTTP 请求以升级到 WebSocket。
- 服务器响应并确认升级。
- 连接建立后，双方可以随时交换数据。
下面的示意图展示了 WebSocket 的基本工作流程：
sequenceDiagram
participant C as Client
participant S as Server
C->>S: HTTP Upgrade Request
S->>C: HTTP Upgrade Response
C<->S: WebSocket Data Exchange
代码示例
以下是一个简单的 WebSocket 客户端和服务器的实现示例。我们将在示例中使用 Node.js 作为服务器，浏览器作为客户端。
1. WebSocket 服务器代码（Node.js）
首先，您需要安装 ws 库：
npm install ws
// server.js
const WebSocket = require('ws');
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.send('Hello! You are connected to the WebSocket server.');
});
2. WebSocket 客户端代码（HTML）
下面的 HTML 代码创建一个简单的 WebSocket 客户端，并提供一个输入框以发送消息：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Demo</title>
</head>
<body>
WebSocket Demo
<input type="text" id="messageInput" placeholder="Type a message...">
<button id="sendButton">Send</button>
<div id="messages"></div>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('Connected to the server');
};
ws.onmessage = function(event) {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML += `<p>${event.data}</p>`;
};
document.getElementById('sendButton').addEventListener('click', function() {
const messageInput = document.getElementById('messageInput');
ws.send(messageInput.value);
messageInput.value = '';
});
</script>
</body>
</html>
结论
WebSocket 为我们提供了一种高效的双向通信机制，使得实时应用得以实现。通过简单的代码示例，我们可以看到如何在客户端和服务器之间建立持久连接，并进行数据交换。随着 WebSocket 的普及，其在各种应用（如在线游戏、实时聊天和股票市场）中的应用也愈加广泛。希望本文能对你理解和使用 WebSocket 提供帮助！
