如何使用 Server-sent Events 和 WebSocket 实现在线实时聊天

在现代 Web 应用中，实时聊天功能已经成为了必不可少的一部分。为了实现这种功能，我们可以使用多种技术，其中包括了 Server-sent Events 和 WebSocket。

Server-sent Events

Server-sent Events（SSE）是一种基于 HTTP 的实时通信协议，它可以让服务器向客户端发送事件流。这种协议与 WebSocket 不同，它是单向的，只能由服务器向客户端发送数据，而客户端无法向服务器发送数据。

下面是一个使用 SSE 实现实时聊天的示例代码：

服务端代码

// javascriptcn.com 代码示例
const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
}).listen(3000);

客户端代码

const eventSource = new EventSource('http://localhost:3000');

eventSource.addEventListener('message', (event) => {
  console.log(event.data);
});

在上面的代码中，服务端会每隔一秒向客户端发送一条消息，客户端会在接收到消息后将其打印出来。

WebSocket

WebSocket 是一种双向通信协议，它可以在客户端和服务器之间建立一个持久的连接，使得双方可以实时地发送和接收数据。

下面是一个使用 WebSocket 实现实时聊天的示例代码：

服务端代码

// javascriptcn.com 代码示例
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

客户端代码

// javascriptcn.com 代码示例
const ws = new WebSocket('ws://localhost:3000');

ws.onmessage = (event) => {
  console.log(event.data);
};

document.querySelector('button').addEventListener('click', () => {
  const input = document.querySelector('input');
  ws.send(input.value);
  input.value = '';
});

在上面的代码中，服务端会在有新的连接建立时向所有客户端广播消息，客户端则可以通过输入框发送消息并接收广播消息。

总结

以上就是使用 Server-sent Events 和 WebSocket 实现在线实时聊天的示例代码。虽然 SSE 和 WebSocket 都可以用于实现实时通信，但它们在实现方式和使用场景上有很大的差异，开发者需要根据实际需求选择合适的技术来实现实时通信功能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6558b20bd2f5e1655d2df04d