利用 React 和 Server-Sent Events 实现实时通讯

在现代 Web 应用程序中，实时通讯已经变得越来越重要。无论是在线聊天、实时游戏、实时数据展示还是其他实时功能，都需要一种可靠的实时通讯方式。本文将介绍如何使用 React 和 Server-Sent Events 实现实时通讯。

什么是 Server-Sent Events

Server-Sent Events（简称 SSE）是一种基于 HTTP 的实时通讯技术。它允许服务器向客户端推送事件流，客户端可以通过 EventSource API 接收这些事件。相比于 WebSocket，SSE 更加轻量级，且不需要建立复杂的握手协议。

SSE 的消息格式是纯文本，每个消息以一个 data 字段开始，后面可以跟着其他自定义字段。客户端通过监听 message 事件接收消息，可以通过 onopen 和 onerror 事件监听连接状态。

React 中使用 Server-Sent Events

在 React 中使用 Server-Sent Events 也非常简单。我们可以使用 useEffect 钩子函数监听事件流，并在组件卸载时取消监听。

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const eventSource = new EventSource('/api/events');
    eventSource.onmessage = (e) => {
      const data = JSON.parse(e.data);
      setMessage(data.message);
    };
    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <p>{message}</p>
    </div>
  );
}

export default App;

在上面的示例中，我们使用 useEffect 钩子函数创建了一个 EventSource 对象，并在 onmessage 回调函数中更新组件的状态。在组件卸载时，我们使用 return 函数关闭 EventSource 连接。

服务器端实现

在服务器端实现 SSE 也非常简单。我们可以使用 Node.js 的 http 模块创建一个 HTTP 服务器，然后使用 res.write 和 res.flush 方法向客户端发送事件流。

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

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  setInterval(() => {
    const data = { message: 'Hello, world!' };
    res.write(`data: ${JSON.stringify(data)}\n\n`);
    res.flush();
  }, 1000);
});

server.listen(3000);

在上面的示例中，我们使用 setInterval 函数每秒钟向客户端发送一个事件。事件以 data 字段开头，后面跟着我们自定义的数据。在每个事件之间，我们使用两个换行符分隔。

总结

使用 React 和 Server-Sent Events 实现实时通讯非常简单。我们可以使用 useEffect 钩子函数监听事件流，并在组件卸载时取消监听。在服务器端，我们可以使用 Node.js 的 http 模块创建一个 HTTP 服务器，然后使用 res.write 和 res.flush 方法向客户端发送事件流。使用 SSE 可以让我们避免复杂的握手协议，从而更加轻量级地实现实时通讯。

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