vue.js+websocket+mongodb实现纯粹的聊天室项目

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 数据库中。

1. src/components/ChatRoom.vue
   聊天室界面，包含消息列表和输入框

2. <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>
   

3. src/components/MessageList.vue
   显示消息列表组件。

4. <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>
   

5. src/components/MessageInput.vue
   提供消息输入框并发送消息。

6. <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 客户端配置。

7. import { io } from 'socket.io-client';export const socket = io('http://localhost:3000');
   

   ---

   运行和部署

8. 后端
   • 安装依赖：npm install
   • 启动服务器：node server.js
9. 前端
   • 安装依赖：npm install
   • 启动开发服务器：npm run serve