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获取当前日期和时间的简单实例
Nov 19 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
js图片切换具体实现代码
Oct 13 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
HTML+JS实现在线朗读器
Feb 15 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python扩展内置类型详解
2018/03/26 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
对Python中画图时候的线类型详解
2019/07/07 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
技术总监管理职责范本
2014/03/06 职场文书
教师暑期培训感言
2014/08/15 职场文书
离职感谢信怎么写
2015/01/22 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
校园开放日新闻稿
2015/07/17 职场文书
数学复习课教学反思
2016/02/18 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python