项目简介
主要是通过做一个多人在线多房间群聊的小项目、来练手全栈技术的结合运用。
项目源码: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 ,里面保留着开发摸索时的很多注释。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。