B/S(Web)实时通讯解决方案分享

在B/S(Web)应用中，实时通讯已经成为了非常重要的一部分。下面为大家分享一些B/S(Web)实时通讯的解决方案。

方案一：WebSocket

WebSocket 是HTML5标准中提出的一种在Web浏览器和Web服务器之间进行全双工通信的技术，允许服务器主动向客户端发送数据。通过 WebSocket 连接，服务端可以实时地将数据推送到客户端中，非常适用于需要实时更新数据的应用场景。

在实现上，我们可以使用 Node.js 来搭建 WebSocket 服务器，同时在前端使用 WebSocket 的 JavaScript API 来建立连接，接收和发送消息。以下摘自 Node.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('connected');
});

// 前端代码
const ws = new WebSocket('ws://localhost:8080');

ws.addEventListener('open', function (event) {
  ws.send('hello server!');
});

ws.addEventListener('message', function (event) {
  console.log('received: ', event.data);
});

在上述示例中，我们先启动一个 WebSocket 服务器，然后在前端建立连接，向服务器发送一条消息，同时可以监听到从服务端发送过来的消息。

方案二：Server-Sent Events (SSE)

Server-Sent Events（SSE）是一种允许Web浏览器接受来自Web服务器的自动推送事件的标准。与 WebSocket 相比，SSE 更加轻量级，同时支持单向通信，只能从服务器端向客户端发送数据。

以下是使用 Node.js 和 SSE 实现的示例代码：

// 后端代码
const http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' });
  res.write('retry: 10000\n');

  setInterval(function () {
    res.write('event: test\n');
    res.write('data: ' + new Date() + '\n\n');
  }, 1000);
}).listen(8080);

// 前端代码
const source = new EventSource('http://localhost:8080');

source.addEventListener('test', function (event) {
  console.log('received: ', event.data);
});

在上述示例中，我们先启动一个 HTTP 服务器，向客户端发送包含 SSE 格式的数据流，同时在前端建立连接，监听从服务端发送过来的数据。

总结

以上两种实时通讯的解决方案，都可以很好地解决 B/S(Web) 应用中的实时通讯需求，但也各自具有自己的优劣势，需要根据具体应用场景选择合适的方案。