当前位置：首页 > React

react如何实现实时通讯

2026-03-11 10:21:07React

React 实现实时通讯的方法

WebSocket 技术

WebSocket 是一种全双工通信协议，适用于实时通讯场景。React 中可通过 WebSocket API 或第三方库（如 socket.io-client）实现。

安装 socket.io-client：

npm install socket.io-client

示例代码：

import { useEffect, useState } from 'react';
import io from 'socket.io-client';

const socket = io('http://your-server-url');

function RealTimeComponent() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    socket.on('message', (data) => {
      setMessages(prev => [...prev, data]);
    });

    return () => {
      socket.off('message');
    };
  }, []);

  const sendMessage = (msg) => {
    socket.emit('message', msg);
  };

  return (
    <div>
      {messages.map((msg, idx) => <p key={idx}>{msg}</p>)}
      <button onClick={() => sendMessage('Hello')}>Send</button>
    </div>
  );
}

Server-Sent Events (SSE)

SSE 允许服务器单向推送数据到客户端，适合实时通知场景。

示例代码：

useEffect(() => {
  const eventSource = new EventSource('http://your-server-url/sse');
  eventSource.onmessage = (e) => {
    setMessages(prev => [...prev, e.data]);
  };
  return () => eventSource.close();
}, []);

Firebase Realtime Database

Firebase 提供实时数据库功能，适合快速集成。

配置 Firebase：

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, onValue } from 'firebase/database';

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// 监听数据变化
onValue(ref(db, 'path'), (snapshot) => {
  const data = snapshot.val();
  setMessages(data);
});

GraphQL Subscriptions

Apollo Client 支持 GraphQL 订阅，适用于基于 GraphQL 的后端。

示例代码：

import { useSubscription } from '@apollo/client';

const { data } = useSubscription(MESSAGE_SUBSCRIPTION);
useEffect(() => {
  if (data) setMessages(prev => [...prev, data.message]);
}, [data]);

轮询（Polling）

简单但低效的方案，适用于低频更新场景。

示例代码：

react如何实现实时通讯

useEffect(() => {
  const interval = setInterval(() => {
    fetch('/api/messages').then(res => res.json()).then(data => {
      setMessages(data);
    });
  }, 5000);
  return () => clearInterval(interval);
}, []);