使用 Socket.io 和 MERN 构建实时聊天应用程序

在当今的数字时代，实时通信是现代 Web 应用的基石。无论是客户支持、游戏还是社交网络，即时收发信息的能力都至关重要。在本文中，我们将探讨如何使用 Socket.io 和 MERN 协议栈
（MongoDB、Express.js、React.js 和 Node.js）构建实时聊天应用程序。

为什么选择 Socket.io 和 MERN？

Socket.io 支持客户端和服务器之间的双向事件驱动交互，从而简化了实时通信。结合强大的 MERN 协议栈，您可以创建一个具有实时功能和强大后台的成熟应用程序。

前提条件

在深入实施之前，请确保您具备以下条件：

JavaScript 和 Node.js 的基础知识。
熟悉 React.js。
已安装 Node.js 和 npm。
已安装 MongoDB 或可访问 MongoDB Atlas 等云实例。

架构

设置项目

把项目分为两个主要文件夹：server和client。

mkdir realtime-chat-app
cd realtime-chat-app
mkdir server client

初始化服务器：

cd server
npm init -y
npm install express mongoose socket.io cors

初始化客户端：

cd ../client
npx create-react-app .
npm install socket.io-client

构建后端 (Node.js 和 Express)

1. 设置 Express 服务器：

在server/index.js：

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

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
    cors: {
        origin: 'http://localhost:3000',
        methods: ['GET', 'POST']
    }
});

app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/chatApp', {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

const messageSchema = new mongoose.Schema({
    sender: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User',
        required: true
    },
    content: {
        type: String,
        required: true
    },
    chatRoom: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'ChatRoom',
        required: true
    },
    readBy: [{
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User'
    }],
    createdAt: {
        type: Date,
        default: Date.now
    }
});

const Message = mongoose.model('Message', messageSchema);

io.on('connection', (socket) => {
    console.log('New user connected:', socket.id);

    socket.on('send_message', async (data) => {
        const newMessage = new Message(data);
        await newMessage.save();

        io.emit('receive_message', data);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected:', socket.id);
    });
});

server.listen(5000, () => console.log('Server running on port 5000'));

构建前端 (React.js)

设置客户端：

在client/src/App.js：

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

const socket = io('http://localhost:5000');

function App() {
    const [username, setUsername] = useState('');
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        socket.on('receive_message', (data) => {
            setMessages((prevMessages) => [...prevMessages, data]);
        });
    }, []);

    const sendMessage = () => {
        if (message.trim() && username.trim()) {
            const newMessage = { username, content: message };
            socket.emit('send_message', newMessage);
            setMessage('');
        }
    };

    return (
        <div className="App">
            <h1>Real-Time Chat App</h1>
            <input 
                type="text" 
                placeholder="Enter username" 
                value={username} 
                onChange={(e) => setUsername(e.target.value)} 
            />
            <input 
                type="text" 
                placeholder="Enter message" 
                value={message} 
                onChange={(e) => setMessage(e.target.value)} 
                onKeyPress={(e) => e.key === 'Enter' && sendMessage()} 
            />
            <button onClick={sendMessage}>Send</button>

            <div className="messages">
                {messages.map((msg, index) => (
                    <div key={index} className="message">
                        <strong>{msg.username}: </strong>{msg.content}
                    </div>
                ))}
            </div>
        </div>
    );
}

export default App;

设置聊天应用程序的样式：

在client/src/App.css：

.App {
    text-align: center;
    margin: 20px;
}

input {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.messages {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    max-height: 300px;
    overflow-y: scroll;
}

.message {
    margin: 5px 0;
    padding: 5px;
    background-color: #f1f1f1;
    border-radius: 5px;
}