前言
很多人有疑问，安全可靠的http短连接不使用，为什么需要WebSocket呢？ WebSocket是一种在单个 TCP 连接上进行全双工通信的协议。它提供了连续的双向数据流，可以实时地在客户端和服务器间发送数据。本篇文章将详细讲解 WebSocket 的使用注意事项以及适用场景，并通过代码案例展示如何在 Web 服务中对接 WebSocket 和 HTTP。
注意事项
首先需要知道是WebSocket也有弊端，下面简单介绍WebSocket的注意事项
兼容性：尽管 WebSocket 在现代浏览器中得到了广泛支持，但在旧版浏览器（如 IE8 及以下版本）中可能无法工作。因此，在使用 WebSocket 时，请确保你的目标用户使用的浏览器支持 WebSocket 协议。如有必要，可使用 polyfill 或长轮询等技术作为兼容方案。
安全性：WebSocket 通信可能容易受到攻击，例如跨站脚本攻击（XSS）和跨站请求伪造攻击（CSRF）。为避免这些安全隐患，务必对 WebSocket 通信进行加密（如使用
wss://协议），并验证客户端身份。资源消耗：由于 WebSocket 需要服务器始终保持与客户端的连接，这可能导致服务器负载加重及资源消耗增加。在选择使用 WebSocket 时，请充分评估服务器性能，确保其能够应对大量客户端连接。
错误处理：与 HTTP 请求不同，WebSocket 连接在建立后保持长连接，因此错误处理方式也有所不同。要确保正确处理连接关闭、消息错误等情况，同时对异常情况进行监控和报警。
扩展性：当项目需要扩展时，考虑 WebSocket 如何适应新的需求和变化。例如，当需要支持更多客户端类型时，如何保证 WebSocket 服务的稳定性和可扩展性。
适用场景与代码案例
接下来重点介绍WebSocket两种重要使用场景：实时通信和数据推送
实时通信
WebSocket 非常适合实时通信场景，如在线聊天。下面的代码示例展示了如何使用 Node.js 和 WebSocket 库搭建一个简单的在线聊天室。
服务器端代码：
const express = require('express');
const WebSocket = require('ws');
const app = express();
const server = new WebSocket.Server({ noServer: true });
app.use(express.static('public'));
server.on('connection', (socket) => {
console.log('User connected');
socket.on('message', (message) => {
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
socket.on('close', () => {
console.log('User disconnected');
});
});
const port = process.env.PORT || 3000;
const serverInstance = app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
客户端代码（HTML + JavaScript）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<div id="chat"></div>
<form id="message-form">
<input type="text" id="message-input" placeholder="Type a message">
<button type="submit">Send</button>
</form>
<script>
const chat = document.getElementById('chat');
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const socket = new WebSocket('ws://localhost:3000');
socket.addEventListener('message', (event) => {
const message = document.createElement('div');
message.textContent = event.data;
chat.appendChild(message);
});
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
});
</script>
</body>
</html>
数据推送
在需要服务器主动向客户端推送数据的场景中，WebSocket 表现优秀。下面的代码示例展示了如何使用 Node.js 和 WebSocket 实现一个简单的实时数据推送服务。
服务器端代码：
const express = require('express');
const WebSocket = require('ws');
const app = express();
const server = new WebSocket.Server({ noServer: true });
let counter = 0;
setInterval(() => {
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(`Data: ${counter++}`);
}
});
}, 1000);
app.use(express.static('public'));
server.on('connection', (socket) => {
console.log('User connected');
socket.on('close', () => {
console.log('User disconnected');
});
});
const port = process.env.PORT || 3000;
const serverInstance = app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
客户端代码（HTML + JavaScript）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Data Push</title>
</head>
<body>
<div id="data"></div>
<script>
const dataDiv = document.getElementById('data');
const socket = new WebSocket('ws://localhost:3000');
socket.addEventListener('message', (event) => {
const data = document.createElement('div');
data.textContent = event.data;
dataDiv.appendChild(data);
});
</script>
</body>
</html>
通过以上代码示例，我们可以看到 WebSocket 在实时通信和数据推送场景中的应用。同时，请注意在使用 WebSocket 时关注上述提及的注意事项。
