项目简介
主要是通过做一个多人在线多房间群聊的小项目、来练手全栈技术的结合运用。
主要技术: vue2全家桶 + socket.io + node(express) + mongodb(mongoose)
环境配置: 需安装配置好 node,mongodb环境([参考:http://gjincai.github.io/categories/mongodb/); 建议安装 Robomogo 客户端来管理mongodb数据。
编译运行:
1.开启MongoDB服务,新建命令行窗口1:
|
|
2.启动服务端node,新建命令行窗口2:
|
|
3.启动前端vue页面
|
|
然后在浏览器多个窗口打开 localhost:8080
,注册不同账号并登录、即可进行多用户多房间在线聊天。
主要效果预览:
代码目录概览
|
|
soeket.io 基础
soeket.io 在该项目中用到的基本功能如下(详情请看GitHub中的chatGroup.vue、server/index.js这两文件代码):
|
|
数据结构设计
主要有三个数据结构模型:
|
|
vue-router 路由设计
页面路由的跳转全部由前端的 vue-router 处理,页面功能少而全、仅3个:注册登录页、个人中心页、群聊页
|
|
vuex 全局状态
主要是通过vuex来全局管理个人账号的登录状态、当前所在群聊房间的信息:
|
|
在全局中更新state、获取state:
|
|
数据库接口api
|
|
更多详细的实现,请看 源码 chat-vue-node ,里面保留着开发摸索时的很多注释。