当前位置：首页 > React

react websocket 实现

2026-01-26 11:46:45React

使用 React 实现 WebSocket 连接

在 React 中实现 WebSocket 连接可以通过原生 WebSocket API 或第三方库（如 socket.io-client）完成。以下是两种方法的详细实现方式。

原生 WebSocket API 实现

原生 WebSocket API 是浏览器内置的功能，无需额外安装库。

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

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

  useEffect(() => {
    // 创建 WebSocket 连接
    const ws = new WebSocket('ws://your-websocket-server-url');

    ws.onopen = () => {
      console.log('WebSocket 连接已建立');
      setSocket(ws);
    };

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

    ws.onclose = () => {
      console.log('WebSocket 连接已关闭');
    };

    ws.onerror = (error) => {
      console.error('WebSocket 错误:', error);
    };

    // 清理函数，组件卸载时关闭连接
    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, []);

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

  return (
    <div>
      <h3>消息列表</h3>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg}</li>
        ))}
      </ul>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={sendMessage}>发送</button>
    </div>
  );
};

export default WebSocketComponent;

使用 socket.io-client 实现

socket.io-client 是一个流行的 WebSocket 库，支持更多功能（如自动重连、事件命名等）。

安装依赖：

npm install socket.io-client

实现代码：

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

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

  useEffect(() => {
    // 创建 Socket.io 连接
    const newSocket = io('http://your-socketio-server-url');

    newSocket.on('connect', () => {
      console.log('Socket.io 连接已建立');
      setSocket(newSocket);
    });

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

    newSocket.on('disconnect', () => {
      console.log('Socket.io 连接已关闭');
    });

    // 清理函数
    return () => {
      newSocket.disconnect();
    };
  }, []);

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

  return (
    <div>
      <h3>消息列表</h3>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg}</li>
        ))}
      </ul>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={sendMessage}>发送</button>
    </div>
  );
};

export default SocketIOComponent;