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


Posted in Javascript onOctober 21, 2017

项目简介

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

项目源码:chat-vue-node

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

环境配置: 需安装配置好 node,mongodb环境(参考:https://3water.com/article/109449.htm); 建议安装 Robomogo 客户端来管理mongodb数据。

编译运行:

1.开启MongoDB服务,新建命令行窗口1:

mongod

2.启动服务端node,新建命令行窗口2:

cd server
node index.js

3.启动前端vue页面

cd client
cnpm install
npm run dev

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

主要效果预览:

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

代码目录概览

|--chat-vue-node
  |--client        // 前端客户端:基于 vue-cli 搭建的所有聊天页面
  |--server        // 后台服务端
    |--api.js       // express 通过 mongoose 操作 mongodb 数据库的所有接口
    |--db.js       // 数据库初始化、Schema数据模型
    |--index.js      // 后台服务启动入口
    |--package.json
  .gitignore
  README.md

soeket.io 基础

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

// 客户端连接
var socket = io.connect('http://localhost:8081')
// 服务端监听到连接
io.on('connection', function(socket){
 // ......
}

// 客户端发送进入房间请求
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)
})

数据结构设计

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

// 用户信息的数据结构模型
const accountSchema = new Schema({
 account: {type: Number},  // 用户账号
 nickName: {type: String},  // 用户昵称
 pass: {type: Number},    // 密码
 regTime: {type: Number}   // 注册时间
})
// 聊天群的数据结构模型:聊天群包含的成员
const relationSchema = new Schema({
 groupAccount: Number,    // 群账号
 groupNickName: String,   // 群昵称
 groupNumber: []       // 群成员
})
// 单个聊天群的聊天消息记录
const groupSchema = new Schema({
 account: Number,      // 聊天者的账号
 nickName: String,      // 聊天者的昵称
 chatTime: Number,      // 发消息的时间戳
 chatMes: String,      // 聊天的消息内容
 chatToGroup: Number,    // 聊天的所在群账号
 chatType: String      // 消息类型:进入群、离开群、发消息
})

vue-router 路由设计

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

routes: [
 // {path: '/', name: 'Hello', component: Hello},
 {path: '/', redirect: '/login', name: 'Hello', component: Hello},
 {path: '/login', name: 'Login', component: Login},
 {path: '/center', name: 'Center', component: Center},
 {path: '/chatGroup', name: 'ChatGroup', component: ChatGroup}
]
// 未登录时,通过编程式跳去登录页:
router.push({ path: 'login' })

vuex 全局状态

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

export default new Vuex.Store({
 state: {
  chatState: {
   account: null,
   nickName: null
  },
  groupState: null  // 点击进群的时候更新
 },
 mutations: {
  updateChatState (state, obj) {
   state.chatState = obj
  },
  updateGroupState (state, obj) {
   state.groupState = obj
  }
 },
 actions: {
  updateChatState ({commit}, obj) {
   commit('updateChatState', obj)
  },
  updateGroupState ({commit}, obj) {
   commit('updateGroupState', obj)
  }
 },
 getters: {
  getChatState (state) {
   return state.chatState
  },
  getGroupState (state) {
   return state.groupState
  }
 }
})

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

// 更新
this.$store.dispatch('updateChatState', {account: null, nickName: null})
// 获取
this.$store.getters.getChatState

数据库接口api

module.exports = function (app) {
 app.all("*", function(req, res, next) {
  next()
 })
 // api login 登录
 app.get('/api/user/login', function (req, res) { // ... })
 // api register 注册
 app.get('/api/user/register', function (req, res) { // ... })
 // getAccountGroup 获取可进入的房间
 app.get('/api/user/getAccountGroup', function (req, res) { // ... })
 // getGroupNumber 获取当前房间的群成员
 app.get('/api/user/getGroupNumber', function (req, res) { // ... })
 // api getChatLog 获取当前房间的聊天记录
 app.get('/api/getChatLog', function (req, res) { // ... })
 app.get('*', function(req, res){
  res.end('404')
 })
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue使用keep-alive实现数据缓存不刷新
Oct 21 #Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 #Javascript
Vue filter介绍及其使用详解
Oct 21 #Javascript
详解node nvm进行node多版本管理
Oct 21 #Javascript
JS实现瀑布流布局
Oct 21 #Javascript
js实现Tab选项卡切换效果
Jul 17 #Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 #Javascript
You might like
php函数之子字符串替换 str_replace
2011/03/23 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
高效率JavaScript编写技巧整理
2013/08/23 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
react-router中的属性详解
2017/06/01 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
详解datagrid使用方法(重要)
2020/11/06 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python匹配中文的正则表达式
2016/05/11 Python
python numpy格式化打印的实例
2018/05/14 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python之信息加密题目详解
2019/06/26 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python将string转换到float的实例方法
2019/07/29 Python
python+OpenCV实现图像拼接
2020/03/05 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
新郎父亲婚宴答谢词
2014/01/11 职场文书
搞笑获奖感言
2014/01/30 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
化妆品活动策划方案
2014/05/23 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书