vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

发布时间：2020-12-16 08:16:42 所属栏目：百科来源：网络整理

导读：项目简介主要是通过做一个多人在线多房间群聊的小项目、来练手全栈技术的结合运用。项目源码：chat-vue-node 主要技术： vue2全家桶 + socket.io + node(express) + mongodb(mongoose) 环境配置：需安装配置好 node,mongodb环境（参考：）; 建议安装 Robo

项目简介

主要是通过做一个多人在线多房间群聊的小项目、来练手全栈技术的结合运用。

项目源码：chat-vue-node

主要技术： vue2全家桶 + socket.io + node(express) + mongodb(mongoose)

环境配置：需安装配置好 node,mongodb环境（参考：）; 建议安装 Robomogo 客户端来管理mongodb数据。

编译运行：

1.开启MongoDB服务，新建命令行窗口1：

2.启动服务端node，新建命令行窗口2：

3.启动前端vue页面

然后在浏览器多个窗口打开 localhost:8080，注册不同账号并登录、即可进行多用户多房间在线聊天。

主要效果预览：

代码目录概览

soeket.io 基础

soeket.io 在该项目中用到的基本功能如下（详情请看GitHub中的chatGroup.vue、server/index.js这两文件代码）：

// 客户端发送进入房间请求
socket.emit('joinToRoom',data)
// 服务端监听
socket.on('joinToRoom',function (data) {
// ......
// 服务端处理进入房间、离开房间
socket.join(roomGroupId)
// 有人进入房间，向该群其它的成员发送更新在线成员
io.sockets.in(roomGroupId).emit('joinToRoom',chat)
io.sockets.in(roomGroupId).emit('updateGroupNumber',roomNum[roomGroupId])
}

// 客户端发送聊天消息
socket.emit('emitChat',chat)
// 服务端监听并向群内其它人群发该消息
socket.on('emitChat',function (data) {
let roomGroupId = chat.chatToGroup
// 向特定的群成员转发消息
socket.in(roomGroupId).emit('broadChat',chat)
})

数据结构设计

主要有三个数据结构模型：

vue-router 路由设计

页面路由的跳转全部由前端的 vue-router 处理，页面功能少而全、仅3个：注册登录页、个人中心页、群聊页

vuex 全局状态

主要是通过vuex来全局管理个人账号的登录状态、当前所在群聊房间的信息：

在全局中更新state、获取state:

数据库接口api

更多详细的实现，请看源码chat-vue-node ，里面保留着开发摸索时的很多注释。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!