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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
JS字符串处理实例代码
Aug 05 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
JavaScript中的"=、==、==="区别讲解
Jan 22 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
浅谈react路由传参的几种方式
Mar 23 Javascript
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小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
python实现爬取千万淘宝商品的方法
2015/06/30 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Django 连接sql server数据库的方法
2018/06/30 Python
通过shell+python实现企业微信预警
2019/03/07 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
django有哪些好处和优点
2020/09/01 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
人事部专员岗位职责
2014/03/04 职场文书
平面设计求职信
2014/03/10 职场文书
公司合作协议书范本
2014/04/18 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
婚前协议书范本
2014/10/27 职场文书
2014年团工作总结
2014/11/27 职场文书
入门学习Go的基本语法
2021/07/07 Golang