当前位置：首页 > React

前端react实现websocket

2026-01-26 18:08:34React

使用 React 实现 WebSocket

在 React 中实现 WebSocket 通信可以通过原生 WebSocket API 或第三方库（如 socket.io-client）完成。以下是两种常见方法：

原生 WebSocket API 实现

创建一个自定义 Hook 或直接在组件中管理 WebSocket 连接：

import React, { useEffect, useState } from 'react';

function WebSocketComponent() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    const socket = new WebSocket('ws://your-websocket-server.com');

    socket.onopen = () => {
      console.log('WebSocket connected');
    };

    socket.onmessage = (event) => {
      setMessages((prev) => [...prev, event.data]);
    };

    socket.onclose = () => {
      console.log('WebSocket disconnected');
    };

    return () => {
      socket.close();
    };
  }, []);

  const sendMessage = () => {
    if (input.trim()) {
      socket.send(input);
      setInput('');
    }
  };

  return (
    <div>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

使用 `socket.io-client` 库

安装依赖：

npm install socket.io-client

在 React 组件中使用：

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

function SocketIOComponent() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = io('http://your-socketio-server.com');
    setSocket(newSocket);

    newSocket.on('connect', () => {
      console.log('Socket.IO connected');
    });

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

    return () => {
      newSocket.disconnect();
    };
  }, []);

  const sendMessage = () => {
    if (input.trim() && socket) {
      socket.emit('message', input);
      setInput('');
    }
  };

  return (
    <div>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

注意事项

连接管理：确保在组件卸载时关闭 WebSocket 连接，避免内存泄漏。
错误处理：监听 onerror 事件以处理连接异常。
重连逻辑：对于生产环境，建议实现自动重连机制。
安全：使用 wss:// 协议（WebSocket over TLS）确保数据传输加密。

服务端示例（Node.js + `ws` 库）

安装服务端依赖：

npm install ws

基本服务端代码：

前端react实现websocket

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');

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

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});