使用 Server-Sent Events 和 Redis 实现实时聊天室的方法

实时聊天室是现代 Web 应用程序中的常见功能。它可以让用户在实时交互中获得更好的用户体验。在本文中，我们将介绍如何使用 Server-Sent Events 和 Redis 实现实时聊天室，并提供详细的代码示例。

Server-Sent Events

Server-Sent Events (SSE) 是一种基于 HTTP 的协议，它允许服务器向客户端发送异步消息。SSE 是一种轻量级的实时通信协议，相比于 WebSockets，它更容易实现和部署。SSE 通过 HTTP 连接发送单向流式数据，这意味着服务器可以持续向客户端发送消息，而客户端不需要发送任何请求。

使用 SSE 实现实时聊天室需要两个组件：服务器端和客户端。

服务器端

在服务器端，我们需要创建一个 HTTP 服务器，该服务器将向客户端发送 SSE 事件。我们可以使用 Node.js 和 Express 框架来创建 HTTP 服务器。以下是一个简单的示例：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

app.get('/chat', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // TODO: 发送 SSE 事件
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，我们创建了一个名为 /chat 的路由，该路由将发送 SSE 事件。我们设置了响应头来告诉客户端如何处理 SSE 事件。Content-Type 告诉客户端响应是 SSE 事件，Cache-Control 禁用缓存，Connection 告诉客户端保持连接。我们还需要在路由处理程序中发送 SSE 事件。

客户端

在客户端，我们需要使用 JavaScript 来处理 SSE 事件。以下是一个简单的示例：

const source = new EventSource('/chat');

source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received message:', data.message);
};

在上面的代码中，我们创建了一个名为 source 的 EventSource 对象，该对象将连接到服务器端的 /chat 路由。当服务器发送 SSE 事件时，客户端的 onmessage 处理程序将被调用。在处理程序中，我们可以解析事件数据并执行相应的操作。在本例中，我们将事件数据解析为 JSON 对象并将消息打印到控制台。

Redis

Redis 是一个开源的高性能键值存储数据库。它支持多种数据结构，包括字符串、列表、哈希表、集合和有序集合。Redis 还提供了发布/订阅机制，可以用于实现实时通信。

在实时聊天室中，我们可以使用 Redis 的发布/订阅机制来实现消息传递。当用户发送消息时，我们可以将消息发布到 Redis 通道。所有订阅该通道的客户端都将收到该消息。

服务器端

在服务器端，我们需要使用 Redis 客户端来连接到 Redis 数据库并订阅消息通道。以下是一个简单的示例：

// www.javascriptcn.com code example
const redis = require('redis');
const client = redis.createClient();

client.on('message', (channel, message) => {
  const data = JSON.parse(message);
  // TODO: 发送 SSE 事件
});

client.subscribe('chat');

在上面的代码中，我们创建了一个名为 client 的 Redis 客户端，该客户端将连接到默认主机和端口上的 Redis 数据库。我们使用 subscribe 方法订阅名为 chat 的消息通道。当 Redis 接收到发布到该通道的消息时，客户端的 on('message') 处理程序将被调用。

在处理程序中，我们可以解析消息数据并执行相应的操作。在本例中，我们将消息解析为 JSON 对象并发送 SSE 事件。

客户端

在客户端，我们需要使用 SSE 事件来接收服务器发送的消息。以下是一个简单的示例：

const source = new EventSource('/chat');

source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received message:', data.message);
};

在上面的代码中，我们创建了一个名为 source 的 EventSource 对象，该对象将连接到服务器端的 /chat 路由。当服务器发送 SSE 事件时，客户端的 onmessage 处理程序将被调用。在处理程序中，我们可以解析事件数据并执行相应的操作。在本例中，我们将事件数据解析为 JSON 对象并将消息打印到控制台。

示例代码

以下是一个完整的示例代码，其中使用 Server-Sent Events 和 Redis 实现实时聊天室：

服务器端

// www.javascriptcn.com code example
const express = require('express');
const redis = require('redis');
const app = express();
const client = redis.createClient();

app.get('/chat', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  client.on('message', (channel, message) => {
    const data = JSON.parse(message);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  });

  client.subscribe('chat');
});

app.post('/chat', express.json(), (req, res) => {
  const { username, message } = req.body;
  client.publish('chat', JSON.stringify({ username, message }));
  res.sendStatus(200);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，我们创建了两个路由：/chat 和 /chat（POST）。/chat 路由将发送 SSE 事件，/chat（POST）路由将发布消息到 Redis 通道。我们使用 Redis 客户端来订阅消息通道，并在有新消息时发送 SSE 事件。

客户端

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Real-time Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form>
    <input type="text" id="username" placeholder="Username">
    <input type="text" id="message" placeholder="Message">
    <button type="submit">Send</button>
  </form>
  <script>
    const source = new EventSource('/chat');
    const messages = document.getElementById('messages');

    source.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const li = document.createElement('li');
      li.appendChild(document.createTextNode(`${data.username}: ${data.message}`));
      messages.appendChild(li);
    };

    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();
      const username = document.getElementById('username').value;
      const message = document.getElementById('message').value;
      fetch('/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, message })
      });
      document.getElementById('message').value = '';
    });
  </script>
</body>
</html>

在上面的代码中，我们创建了一个基本的 HTML 页面，用于发送和接收聊天消息。我们使用 EventSource 对象来接收服务器发送的 SSE 事件，并将消息显示在页面上。我们还使用 fetch 函数来将消息发布到服务器。当用户提交表单时，我们使用 fetch 函数将消息发送到服务器，并清除消息输入框。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d42d51a941bf71347e0273