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));
}, []);
