ReactJS使用WebSocket及Socket.IO集成求助：客户端渲染服务器消息

一、完善服务器端代码（实现每5秒推送消息） #

你给出的server.js已经有了基础依赖，我帮你补全剩余部分，实现定时推送功能：

const path = require('path');
const express = require('express');
const http = require("http");
const socketIo = require("socket.io");

const DIST_DIR = path.join(__dirname, 'public/');
const PORT = 3000;
const app = express();

// 创建HTTP服务器并挂载Socket.IO
const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: "http://localhost:3000", // 允许React客户端跨域请求，根据实际端口调整
    methods: ["GET", "POST"]
  }
});

// 托管静态文件（适配React打包后的静态资源）
app.use(express.static(DIST_DIR));

// 监听客户端连接事件
io.on('connection', (socket) => {
  console.log('新客户端已连接');

  // 每5秒向当前连接的客户端推送消息
  const interval = setInterval(() => {
    const message = `服务器推送：${new Date().toLocaleTimeString()}`;
    socket.emit('server-message', message); // 自定义事件名，方便客户端识别
    console.log('已发送消息:', message);
  }, 5000);

  // 客户端断开时清除定时器，避免内存泄漏
  socket.on('disconnect', () => {
    console.log('客户端已断开连接');
    clearInterval(interval);
  });
});

// 启动服务器
server.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

服务器端注意点： #

• 配置CORS是为了避免跨域报错，确保React客户端的地址和端口与配置一致
• 定时器绑定在单个客户端连接上，断开时及时清除，防止无效定时器占用资源

二、React客户端：接收消息并渲染到页面 #

接下来在React组件中集成Socket.IO，完成消息接收、控制台打印和页面渲染：

首先安装客户端依赖：

npm install socket.io-client

然后创建一个实时消息组件（比如RealTimeFeed.js）：

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

const RealTimeFeed = () => {
  const [messageList, setMessageList] = useState([]); // 存储所有推送消息
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    // 初始化Socket连接，指向服务器地址
    const newSocket = io('http://localhost:3000');
    setSocket(newSocket);

    // 监听服务器推送的消息事件
    newSocket.on('server-message', (message) => {
      console.log('收到服务器消息:', message); // 控制台打印消息
      // 更新消息列表，触发React重新渲染
      setMessageList(prevList => [...prevList, message]);
    });

    // 组件卸载时断开Socket连接，清理资源
    return () => {
      newSocket.disconnect();
    };
  }, []);

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>实时消息推送</h2>
      <div style={{ border: '1px solid #eee', borderRadius: '8px', padding: '10px', marginTop: '20px' }}>
        {messageList.length === 0 ? (
          <p>等待服务器推送消息...</p>
        ) : (
          messageList.map((msg, index) => (
            <div key={index} style={{ padding: '8px', borderBottom: '1px solid #f5f5f5' }}>
              {msg}
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export default RealTimeFeed;

客户端关键说明： #

• 用useEffect在组件挂载时初始化Socket连接，卸载时断开，避免无效连接占用资源
• 用useState维护消息列表状态，每次收到新消息时更新状态，React会自动重新渲染页面
• 同时完成了控制台打印和页面渲染的需求

三、测试流程 #

1. 启动服务器：node server.js
2. 启动React客户端（如果是create-react-app创建的项目）：npm start
3. 打开浏览器访问React应用，你会看到页面每隔5秒新增一条消息，浏览器控制台也会同步打印对应的内容

这样就同时解决了服务器定时推送、客户端接收后控制台打印和页面渲染的问题啦！

内容的提问来源于stack exchange，提问作者jubilantdollop