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 相关文章推荐
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
js中生成map对象的方法
Jan 09 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
js操作iframe父子窗体示例
May 22 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
php实现session共享的实例方法
2019/09/19 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
js module大战
2019/04/19 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
Python AES加密模块用法分析
2017/05/22 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python 变量类型详解
2018/10/10 Python
Python创建数字列表的示例
2019/11/28 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
委托书格式
2014/08/01 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript