使用 MERN 技术栈和 Socket.IO 构建实时聊天应用程序
如今，实时聊天应用越来越受欢迎，而使用 MERN 技术栈和 Socket.IO 构建一个实时聊天应用是学习如何创建实时应用的绝佳途径。在本篇博文中，我们将逐步介绍从零开始构建实时聊天应用的过程。
简介：
Socket.IO 是一个 JavaScript 库，它支持浏览器和服务器之间实时、双向且基于事件的通信。它适用于所有平台、浏览器和设备，并兼顾可靠性和速度。MERN 技术栈是一个流行的全栈 JavaScript 框架，它结合了 MongoDB、Express.js、React.js 和 Node.js。在本教程中，我们将使用 MERN 技术栈和 Socket.IO 构建一个实时聊天应用程序。
搭建后端
构建实时聊天应用程序的第一步是搭建后端。我们将使用 Node.js 和 Express.js 创建 RESTful API，并使用 MongoDB 作为数据库。以下是搭建后端的步骤：
- 在您的计算机上安装Node.js和MongoDB。
- 为你的项目创建一个新文件夹，然后在终端中导航到该文件夹。
- 运行 npm init 为你的项目创建一个新的 package.json 文件。
- 运行 npm install express mongoose socket.io cors dotenv 安装必要的依赖项。
- 创建一个新的 index.js 文件，开始构建后端。在 index.js 文件中，我们将创建服务器并使用 Mongoose 连接到 MongoDB 数据库。我们还将设置用于创建和获取消息的 RESTful API 路由。以下是一个示例：
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');
const socketio = require('socket.io');
const app = express();
const server = require('http').Server(app);
const io = socketio(server);
dotenv.config();
const port = process.env.PORT || 5000;
// Connect to MongoDB
mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });
const connection = mongoose.connection;
connection.once('open', () => {
console.log('MongoDB connection established successfully');
});
// Middleware
app.use(cors());
app.use(express.json());
// API Routes
const messagesRouter = require('./routes/messages');
app.use('/messages', messagesRouter);
// Start server
server.listen(port, () => {
console.log(`Server running on port ${port}`);
});
// Socket.IO
io.on('connection', (socket) => {
console.log(`Socket ${socket.id} connected`);
socket.on('sendMessage', (message) => {
io.emit('message', message);
});
socket.on('disconnect', () => {
console.log(`Socket ${socket.id} disconnected`);
});
});
创建前端
现在后端已经搭建完毕，我们可以开始创建前端了。我们将使用 React.js 构建前端，并使用 Socket.IO 实现客户端和服务器之间的实时通信。以下是创建前端的步骤：
- 在终端中运行 npx create-react-app my-app 创建一个新的 React 应用。
- 通过运行 cd my-app 命令导航到新创建的应用程序目录。
- 运行 npm install socket.io-client 安装必要的依赖项。
- 打开 src/App.js 文件，开始构建前端。在 App.js 文件中，我们将创建一个表单，供用户输入姓名和留言。我们还会实时显示从服务器收到的消息列表。以下是一个示例：
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:5000');
function App() {
const [name, setName] = useState('');
const [message, setMessage] = useState('');
const [messages, setMessages] = useState([]);
useEffect(() => {
socket.on('message', (message) => {
setMessages((messages) => [...messages, message]);
});
}, []);
const handleSubmit = (event) => {
event.preventDefault();
if (name && message) {
socket.emit('sendMessage', { name, message });
setName('');
setMessage('');
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" value={name} placeholder="Your name" onChange={(event) => setName(event.target.value)} />
<input type="text" value={message} placeholder="Your message" onChange={(event) => setMessage(event.target.value)} />
<button type="submit">Send</button>
</form>
<ul>
{messages.map((message, index) => (
<li key={index}>
{message.name}: {message.message}
</li>
))}
</ul>
</div>
);
}
export default App;
结论：
在本篇博文中，我们详细介绍了如何使用 MERN 技术栈和 Socket.IO 构建实时聊天应用程序。首先，我们使用 Node.js、Express.js、MongoDB 和 Socket.IO 搭建了后端。然后，我们使用 React.js 和 Socket.IO 创建了前端。通过本教程，您应该能够更好地理解如何使用 MERN 技术栈和 Socket.IO 构建实时应用程序。
小小的支持也能产生巨大的作用！
文章来源：https://dev.to/bhavik786/building-a-real-time-chat-application-using-mern-stack-and-socketio-1obn