💓 博客主页：瑕疵的CSDN主页
📝 Gitee主页：瑕疵的gitee主页
⏩ 文章专栏：《热点资讯》
现代Web开发：WebSocket 实时通信详解
- 现代Web开发：WebSocket 实时通信详解
- 引言
- WebSocket 概述
- 什么是 WebSocket
- WebSocket 的特点
- WebSocket 工作原理
- 握手过程
- 客户端请求
- 服务器响应
- 数据帧
- WebSocket API
- 客户端 API
- 服务器端实现
- 实战案例分析
- 实时聊天应用
- 项目结构
- 安装依赖
- 创建 WebSocket 服务器
- 创建客户端页面
- 编写客户端脚本
- WebSocket 安全性
- 使用 WSS
- 防止跨站请求伪造（CSRF）
- WebSocket 与其他技术的比较
- 与 AJAX 的比较
- 与长轮询（Long Polling）的比较
- 总结
- 参考资料
在现代Web开发中，实现实时通信是一个常见的需求。无论是在线聊天、实时协作编辑还是实时数据更新，WebSocket 技术都提供了强大的支持。本文将详细介绍 WebSocket 的基本概念、工作原理、实现步骤以及实际应用，帮助读者更好地理解和使用 WebSocket。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
- 全双工通信：WebSocket 提供了真正的双向通信，客户端和服务器可以同时发送数据。
- 低延迟：相比 HTTP 请求，WebSocket 的数据传输延迟更低。
- 轻量级：WebSocket 协议的头部信息非常小，减少了不必要的开销。
- 持久连接：一旦建立连接，除非客户端或服务器主动断开，否则连接会一直保持。
WebSocket 的握手过程是通过 HTTP 协议完成的。客户端发送一个特殊的 HTTP 请求，服务器响应一个特殊的 HTTP 状态码，从而完成握手。
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
握手完成后，客户端和服务器开始通过 WebSocket 进行数据传输。数据传输的基本单位是帧（frame），每个帧都有自己的格式。
在浏览器中，可以通过 WebSocket 对象来使用 WebSocket API。
const socket = new WebSocket('ws://example.com/socket');socket.onopen = function(event) {console.log('Connection opened:', event);
};socket.onmessage = function(event) {console.log('Message received:', event.data);
};socket.onclose = function(event) {console.log('Connection closed:', event);
};socket.onerror = function(error) {console.error('Error detected:', error);
};socket.send('Hello, server!');
在服务器端，可以使用多种语言和框架来实现 WebSocket 服务器。以下是使用 Node.js 和 ws 库的示例。
- 安装
ws库
npm install ws
- 创建 WebSocket 服务器
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:', message);});ws.send('Hello, client!');
});
假设我们要构建一个简单的实时聊天应用，包含用户登录、发送消息和接收消息功能。
chat-app/
├── client/
│ ├── index.html
│ └── script.js
├── server/
│ └── server.js
└── package.json
npm install ws
在 server/server.js 中创建 WebSocket 服务器。
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:', message);wss.clients.forEach(function each(client) {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});ws.send('Welcome to the chat!');
});console.log('WebSocket server is running on ws://localhost:8080');
在 client/index.html 中创建客户端页面。
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><title>Real-time Chat</title>
</head>
<body><div id='chat-container'><ul id='messages'></ul><input type='text' id='message-input' placeholder='Type a message...' /><button id='send-button'>Send</button></div><script src='./script.js'></script>
</body>
</html>
在 client/script.js 中编写客户端脚本。
const socket = new WebSocket('ws://localhost:8080');const messagesList = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');socket.onopen = function(event) {console.log('Connection opened:', event);
};socket.onmessage = function(event) {const messageItem = document.createElement('li');messageItem.textContent = event.data;messagesList.appendChild(messageItem);
};socket.onclose = function(event) {console.log('Connection closed:', event);
};socket.onerror = function(error) {console.error('Error detected:', error);
};sendButton.addEventListener('click', function() {const message = messageInput.value;socket.send(message);messageInput.value = '';
});
为了保证通信的安全性，可以使用 WSS（WebSocket Secure），即加密的 WebSocket 连接。WSS 使用 TLS/SSL 加密，确保数据传输的安全性。
const socket = new WebSocket('wss://example.com/socket');
在 WebSocket 服务器端，可以通过验证 Origin 头来防止 CSRF 攻击。
wss.on('connection', function connection(ws, req) {if (req.headers.origin !== 'http://example.com') {ws.close();return;}// 正常处理连接
});
- 数据传输方向：AJAX 只支持从客户端到服务器的单向数据传输，而 WebSocket 支持双向数据传输。
- 延迟：AJAX 的每次请求都需要建立新的连接，延迟较高；WebSocket 一旦建立连接，数据传输延迟较低。
- 资源消耗：AJAX 每次请求都会消耗一定的资源，而 WebSocket 在连接建立后，资源消耗较低。
- 数据传输方向：长轮询也只支持从客户端到服务器的单向数据传输，而 WebSocket 支持双向数据传输。
- 延迟：长轮询的延迟较高，因为每次请求都需要等待服务器响应；WebSocket 的延迟较低。
- 资源消耗：长轮询会频繁建立和关闭连接，资源消耗较高；WebSocket 一旦建立连接，资源消耗较低。
通过本文，我们深入了解了 WebSocket 的基本概念、工作原理、实现步骤以及实际应用。WebSocket 提供了一种高效、低延迟的实时通信方式，适用于多种应用场景。希望本文能帮助读者更好地理解和应用 WebSocket，提升Web开发能力。
- WebSocket 官方文档
- WebSocket API 参考
- WebSocket 教程
