在开发 Web 应用时，经常会碰到多个客户端同时向服务端发送消息的情况。这时候，如果不加以处理，容易出现资源竞争、数据丢失等问题。本文将介绍一些前端处理多个客户端同时向服务端发送消息的常用方法。
1. WebSockets
WebSockets 是一种在浏览器和服务端之间建立持久化连接的协议。使用 WebSockets 可以实现双向通信，客户端和服务端可以实时地交换信息。借助 WebSockets，我们可以轻松处理多个客户端同时向服务端发送消息的问题。
实现方式
WebSockets 的实现方式有两种：
原生 API：使用原生的 WebSockets API 在客户端与服务端之间建立连接，然后通过 send() 方法向服务端发送消息。
WebSocket 库：借助第三方库，如 Socket.io，可以更加方便地实现 WebSockets 功能。
实例代码
在客户端，使用原生 API：
// www.javascriptcn.com code example
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('Connected to server');
};
ws.onmessage = (event) => {
console.log(`Received message: ${event.data}`);
};
ws.send('Hello, server!');在服务端，使用 Node.js 的内置模块 websocket：
// www.javascriptcn.com code example
const WebSocket = require('websocket').server;
const server = http.createServer((req, res) => {
res.writeHead(404);
res.end();
});
wsServer = new WebSocket({
httpServer: server
});
wsServer.on('request', (req) => {
const connection = req.accept(null, req.origin);
connection.on('message', (message) => {
if (message.type === 'utf8') {
console.log(`Received message: ${message.utf8Data}`);
connection.sendUTF('Hello, client!');
}
});
});
server.listen(8080, () => {
console.log('Listening on port 8080');
});2. 基于 EventSource 的服务器推送技术
基于 EventSource 的服务器推送技术是一种比较轻量级的实现多个客户端之间实时通信的方法。这种方式不需要建立持久连接，客户端只需要向服务端发送订阅请求，服务端通过该请求伪造出一个 EventSource 对象，然后将消息推送到客户端。
实现方式
在客户端，使用原生 API：
const evtSource = new EventSource('/events');
evtSource.onmessage = (event) => {
console.log(`Received message: ${event.data}`);
};在服务端，通过 Node.js 的内置模块 http 实现：
// www.javascriptcn.com code example
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/events') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const event = `data: ${new Date()}\n\n`;
res.write(event);
}, 1000);
} else {
res.writeHead(404);
res.end();
}
}).listen(8080, () => {
console.log('Listening on port 8080');
});3. Ajax 轮询
Ajax 轮询是一种通过持续向服务端发送请求获取新数据的技术。在轮询中，客户端会不断地向服务端发出请求询问是否有新消息，服务端会将最新的消息以 JSON 格式返回给客户端。使用 Ajax 轮询，我们可以实现多个客户端同时向服务端发送消息时的实时通信。
实现方式
在客户端，使用原生 API：
// www.javascriptcn.com code example
function poll() {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(`Received message: ${data.message}`);
}
};
xhr.open('GET', '/poll', true);
xhr.send();
}
setInterval(poll, 1000);在服务端，通过 Node.js 的内置模块 http 实现：
// www.javascriptcn.com code example
http.createServer((req, res) => {
if (req.url === '/poll') {
const data = { message: 'Hello, client!' };
res.writeHead(200, {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
});
res.end(JSON.stringify(data));
} else {
res.writeHead(404);
res.end();
}
}).listen(8080, () => {
console.log('Listening on port 8080');
});结语
以上是处理多个客户端同时向服务端发送消息的常用方法。每种方法都有其优缺点，具体使用时需要根据实际情况选择。同时，无论使用哪种方法，都需要注意在客户端和服务端之间建立合适的协议，以避免出现资源竞争、数据丢失等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfb0dde46428fe9eb8481a