React实现实时聊天

使用Socket.IO实现实时通信

安装Socket.IO客户端库：

npm install socket.io-client

创建Socket连接：

import io from 'socket.io-client';
const socket = io('http://your-server-url');

建立React组件结构

创建聊天室主组件：

function ChatRoom() {
  const [messages, setMessages] = useState([]);
  const [currentMessage, setCurrentMessage] = useState('');

  // 消息发送处理
  const sendMessage = () => {
    if (currentMessage.trim()) {
      socket.emit('chat message', currentMessage);
      setCurrentMessage('');
    }
  };

  return (
    <div>
      <MessageList messages={messages} />
      <MessageInput 
        value={currentMessage}
        onChange={setCurrentMessage}
        onSend={sendMessage}
      />
    </div>
  );
}

处理实时消息事件

设置消息监听：

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

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

消息列表展示组件

创建可滚动的消息列表：

function MessageList({ messages }) {
  return (
    <div style={{ height: '400px', overflowY: 'auto' }}>
      {messages.map((msg, i) => (
        <div key={i}>{msg}</div>
      ))}
    </div>
  );
}

消息输入组件

构建带发送按钮的输入框：

function MessageInput({ value, onChange, onSend }) {
  return (
    <div>
      <input 
        type="text" 
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && onSend()}
      />
      <button onClick={onSend}>发送</button>
    </div>
  );
}

后端服务器配置

Node.js服务器示例：

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

const app = express();
const server = require('http').createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
  console.log('用户连接');

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('用户断开');
  });
});

server.listen(3001, () => {
  console.log('服务器运行在3001端口');
});

样式优化

添加基础CSS样式：

.chat-container {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

.message {
  padding: 8px 12px;
  margin: 5px 0;
  background: #f0f0f0;
  border-radius: 4px;
}

.input-area {
  display: flex;
  margin-top: 10px;
}

.input-area input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-area button {
  margin-left: 10px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

用户身份标识

添加用户昵称功能：

const [user, setUser] = useState('匿名用户');

// 发送消息时带上用户信息
socket.emit('chat message', {
  user,
  text: currentMessage,
  time: new Date().toLocaleTimeString()
});

消息持久化存储

使用MongoDB存储历史消息：

// 消息模型
const mongoose = require('mongoose');
const messageSchema = new mongoose.Schema({
  user: String,
  text: String,
  time: String
});
const Message = mongoose.model('Message', messageSchema);

// 保存消息
socket.on('chat message', async (msg) => {
  const newMsg = new Message(msg);
  await newMsg.save();
  io.emit('chat message', msg);
});

加载历史消息

获取存储的历史记录：

useEffect(() => {
  fetch('/api/messages')
    .then(res => res.json())
    .then(data => setMessages(data));
}, []);