React项目服务端连接Socket.io与MongoDB及客户端消息组件实现方法

一、服务端实现与Socket.io连接 #

1. 安装依赖 #

在服务端项目目录下执行命令安装Socket.io：

npm install socket.io

2. 修改服务端启动文件（如server.js） #

结合你现有Express项目结构，调整代码以兼容Socket.io运行：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const mongoose = require('mongoose');

const app = express();
// 创建HTTP服务器，Socket.io需依托HTTP服务运行
const server = http.createServer(app);
// 初始化Socket.io实例，配置跨域规则（匹配你的React客户端地址）
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // React客户端运行地址
    methods: ["GET", "POST"]
  }
});

// 保留原有MongoDB连接代码
mongoose.connect('mongodb://localhost:27017/your-db-name')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error(err));

// 处理Socket.io连接事件
io.on('connection', (socket) => {
  console.log('用户已连接，socket ID:', socket.id);

  // 监听客户端发送的消息事件
  socket.on('send_message', (data) => {
    // 可选：将消息存入MongoDB（调用你的消息模型）
    // Message.create(data).then(res => console.log(res)).catch(err => console.error(err));
    
    // 向所有客户端广播消息
    io.emit('receive_message', data);
    // 若仅向除发送者外的客户端广播，使用socket.broadcast.emit(...)
  });

  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log('用户已断开连接，socket ID:', socket.id);
  });
});

// 启动服务，注意监听server而非app
const PORT = process.env.PORT || 5000;
server.listen(PORT, () => console.log(`服务运行在端口${PORT}`));

二、React客户端消息组件实现 #

1. 安装客户端依赖 #

在React项目目录下执行命令安装Socket.io客户端：

npm install socket.io-client

2. 编写消息组件示例 #

创建MessageComponent.jsx组件，实现消息收发功能：

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

// 初始化Socket连接，指向服务端地址
const socket = io('http://localhost:5000');

const MessageComponent = () => {
  const [messages, setMessages] = useState([]);
  const [inputMessage, setInputMessage] = useState('');

  // 监听服务端推送的消息
  useEffect(() => {
    const handleReceiveMessage = (data) => {
      setMessages(prev => [...prev, data]);
    };

    socket.on('receive_message', handleReceiveMessage);

    // 组件卸载时移除监听
    return () => {
      socket.off('receive_message', handleReceiveMessage);
    };
  }, []);

  // 发送消息到服务端
  const handleSendMessage = (e) => {
    e.preventDefault();
    if (!inputMessage.trim()) return;

    const messageData = {
      content: inputMessage,
      sender: '当前用户ID/昵称', // 替换为实际用户标识
      timestamp: new Date()
    };

    socket.emit('send_message', messageData);
    setInputMessage('');
  };

  return (
    <div className="message-container">
      <div className="messages-list">
        {messages.map((msg, index) => (
          <div key={index} className="message-item">
            <p><strong>{msg.sender}:</strong> {msg.content}</p>
            <small>{new Date(msg.timestamp).toLocaleString()}</small>
          </div>
        ))}
      </div>
      <form onSubmit={handleSendMessage} className="message-input-form">
        <input
          type="text"
          value={inputMessage}
          onChange={(e) => setInputMessage(e.target.value)}
          placeholder="输入消息..."
        />
        <button type="submit">发送</button>
      </form>
    </div>
  );
};

export default MessageComponent;

三、关键注意事项 #

• 跨域配置：若React客户端与服务端不在同一域名/端口，必须在Socket.io服务端配置cors，否则会触发跨域错误。
• 消息持久化：在服务端send_message事件处理逻辑中，可调用MongoDB模型方法将消息存入数据库，实现聊天记录持久化。
• 身份校验：可根据业务需求，在Socket连接时校验用户身份（如传递token），限制未授权用户连接。

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