vue.js+websocket+mongodb实现纯粹的聊天室项目！下面的项目的构建过程和代码展示。
1：项目的整体结构图
chatroom/
│
├── backend/ # 后端服务目录
│ ├── config/ # 配置文件
│ │ └── db.js # 数据库连接配置
│ ├── controllers/ # 控制器目录
│ │ └── messageController.js # 处理消息的控制器
│ ├── models/ # 数据模型
│ │ └── message.js # 聊天消息模型
│ ├── routes/ # 路由配置
│ │ └── messageRoutes.js # 聊天消息相关路由
│ ├── server.js # 主服务器文件（入口）
│ ├── package.json # Node.js 项目配置文件
│ ├── .env # 环境变量配置文件
│
├── frontend/ # 前端服务目录
│ ├── public/ # 公共文件（如HTML模板）
│ │ ├── index.html # 入口HTML文件
│ │ └── favicon.ico # 网站图标
│ ├── src/ # 源代码
│ │ ├── assets/ # 静态资源（图片、音频等）
│ │ └── ...
│ │ ├── components/ # Vue 组件
│ │ │ ├── ChatRoom.vue # 聊天页面组件
│ │ │ ├── MessageList.vue # 消息列表组件
│ │ │ ├── MessageInput.vue # 消息输入框组件
│ │ ├── store/ # Vuex 状态管理
│ │ │ └── chatStore.js # 聊天状态管理
│ │ ├── App.vue # 根组件
│ │ ├── main.js # 项目入口文件（配置路由、全局样式等）
│ │ └── socket.js # WebSocket 客户端配置
│ ├── package.json # Vue 项目配置文件
│ └── vue.config.js # Vue 项目配置文件
│
├── .gitignore # Git 忽略文件
└── README.md # 项目说明文件
2：先看后端服务的内容说明书：
后端服务（backend/）
config/db.js
配置 MongoDB 数据库连接，使用 Mongoose。
const mongoose = require('mongoose');
const mongoURI = process.env.MONGO_URI || 'mongodb://localhost:27017/chatroom';mongoose.connect(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true }).then(() => console.log('MongoDB connected')).catch((err) => console.log('MongoDB connection error:', err));module.exports = mongoose;
controllers/messageController.js
处理聊天消息的存储和获取。
const Message = require('../models/message');// 存储新消息
const saveMessage = (messageData) => {const newMessage = new Message(messageData);return newMessage.save();
};// 获取所有消息
const getMessages = async () => {return await Message.find().sort({ timestamp: 1 }).limit(100);
};module.exports = { saveMessage, getMessages };
models/message.js
定义消息数据模型。
const mongoose = require('mongoose');const messageSchema = new mongoose.Schema({nickname: { type: String, required: true },text: { type: String, required: true },timestamp: { type: Date, default: Date.now },
});module.exports = mongoose.model('Message', messageSchema);
routes/messageRoutes.js
配置 API 路由，包括消息获取和存储。
const express = require('express');
const router = express.Router();
const { saveMessage, getMessages } = require('../controllers/messageController');// 获取历史聊天记录
router.get('/messages', async (req, res) => {try {const messages = await getMessages();res.json(messages);} catch (err) {res.status(500).send('Error retrieving messages');}
});module.exports = router;
server.js
配置 WebSocket 服务和 HTTP API 服务。
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const mongoose = require('mongoose');
const cors = require('cors');
const messageRoutes = require('./routes/messageRoutes');
const { saveMessage } = require('./controllers/messageController');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);// 配置 MongoDB
mongoose.connect('mongodb://localhost:27017/chatroom', { useNewUrlParser: true, useUnifiedTopology: true });// 配置中间件
app.use(cors());
app.use(express.json());
app.use('/api', messageRoutes);// WebSocket 连接
io.on('connection', (socket) => {console.log('User connected:', socket.id);// 监听客户端消息socket.on('send-message', (messageData) => {// 保存消息到数据库saveMessage(messageData).then(() => {io.emit('new-message', messageData); // 广播新消息});});socket.on('disconnect', () => {console.log('User disconnected:', socket.id);});
});// 启动服务器
server.listen(3000, () => {console.log('Server is running on http://localhost:3000');
});
3：下面看看前端的业务说明书：
前端服务（frontend/）
这样，你就有了一个独立、干净的聊天室项目，支持多人互动，能够容纳同时在线1000人，实时广播聊天消息，并且将所有聊天消息存储到 MongoDB 数据库中。
-
src/components/ChatRoom.vue
聊天室界面，包含消息列表和输入框 -
<template><div class="chatroom"><!-- 消息列表 --><MessageList :messages="messages" /><!-- 输入框 --><MessageInput @sendMessage="sendMessage" /></div> </template><script> import { io } from 'socket.io-client'; import MessageList from './MessageList.vue'; import MessageInput from './MessageInput.vue';export default {components: {MessageList,MessageInput},data() {return {socket: null,messages: [],nickname: 'User' // 默认昵称，用户可以修改};},mounted() {this.socket = io('http://localhost:3000');// 监听服务器发送的新消息this.socket.on('new-message', (message) => {this.messages.push(message);});// 获取历史消息this.socket.emit('get-messages');},methods: {sendMessage(text) {const message = { nickname: this.nickname, text };this.socket.emit('send-message', message);this.messages.push(message); // 本地显示发送的消息}} }; </script> -
src/components/MessageList.vue
显示消息列表组件。 -
<template><div class="message-list"><div v-for="(msg, index) in messages" :key="index" class="message"><strong>{{ msg.nickname }}:</strong> {{ msg.text }}</div></div> </template><script> export default {props: ['messages'] }; </script> -
src/components/MessageInput.vue
提供消息输入框并发送消息。 -
<template><div class="message-input"><input v-model="text" @keyup.enter="sendMessage" placeholder="输入消息..." /><button @click="sendMessage">发送</button></div> </template><script> export default {data() {return {text: ''};},methods: {sendMessage() {if (this.text.trim()) {this.$emit('sendMessage', this.text);this.text = ''; // 清空输入框}}} }; </script>src/socket.js
WebSocket 客户端配置。 -
import { io } from 'socket.io-client';export const socket = io('http://localhost:3000');运行和部署
- 后端
- 安装依赖：
npm install - 启动服务器：
node server.js
- 安装依赖：
- 前端
- 安装依赖：
npm install - 启动开发服务器：
npm run serve
- 安装依赖：
