项目介绍主要是通过做一个多人在线多房间群聊的小项目来实践全栈技术的结合。项目源码：chat-vue-node主要技术：vue2全家桶+socket.io+node(express)+mongodb(mongoose)环境配置：需要安装配置Node和mongodb环境（参考：[http://gjincai.github.io/categories/mongodb/);推荐安装Robomogo客户端来管理mongodb数据。编译运行：1.启动MongoDB服务，新建命令行窗口1：mongod2。启动server节点，新建命令行窗口2：cdservernodeindex.js3。启动前端vue页面cdclientcnpminstallnpmrundev然后在浏览器中打开多个窗口打开localhost:8080，注册不同的账号并登录，就可以多用户多房间在线聊天了。主要效果预览：代码目录概览|--chat-vue-node|--client//前端客户端：所有基于vue-cli的聊天页面|--server//后台服务器|--api.js//express通过mongoose操作mongodb数据库的所有接口|--db.js//数据库初始化、Schema数据模型|--index.js//后台服务启动入口|--package.json.gitignoreREADME.mdsoeket.iobasics本项目中soeket.io使用的基本函数如下（具体可参考GitHub中的chatGroup.vue和server/index.js文件）：//客户端连接varsocket=io.connect('http://localhost:8081')//服务端监听连接io.on('connection',function(socket){//......}//客户端发送进入房间socket的请求。emit('joinToRoom',data)//服务器监听socket.on('joinToRoom',function(data){//......//服务器处理进入和离开房间socket.join(roomGroupId)//有人进入Room，向群内其他成员发送更新在线成员io.sockets.in(roomGroupId).emit('joinToRoom',chat)io.sockets.in(roomGroupId).emit('updateGroupNumber',roomNum[roomGroupId])}//客户端发送聊天消息socket.emit('emitChat',chat)//服务端监听并发送消息给群内其他人socket.on('emitChat',function(data){让房间组id=chat.chatToGroup//转发消息给特定的群成员socket.in(roomGroupId).emit('broadChat',chat)})数据结构设计主要有三个数据结构模型：//用户信息的数据结构模型constaccountSchema=newSchema({account:{type:Number},//用户账号nickName:{type:String},//用户昵称pass:{type:Number},//密码regTime:{type:Number}//注册time})//聊天群的数据结构模型：聊天群包含的成员constrelationSchema=newSchema({groupAccount:Number,//群账号groupNickName:String,//群昵称groupNumber:[]//群成员})//单个聊天群的聊天消息记录constgroupSchema=newSchema({account:Number,//聊友账号nickName:String,//聊友昵称chatTime:Number,//发送消息的时间戳chatMes:String,//聊天消息内容chatToGroup:Number,//聊天群账号chatType:String//消息类型：进群，离群，发消息})Vue-router路由设计页面路由跳转全部由前端控制Vue-router处理,页面功能少但完整，只有3个：注册登录页面、个人中心页面、群聊页面routes:[//{path:'/',name:'Hello',component:Hello},{path:'/'，重定向：'/登录'，名称：'你好'，组件：你好},{path:'/login',name:'Login',component:Login},{path:'/center',name:'Center',component:Center},{path:'/chatGroup',name:'ChatGroup',component:ChatGroup}]//未登录时，通过编程方式跳转到登录页面：router.push({path:'login'})vuex全局状态主要通过vuex全局管理个人账号的登录状态，当前群聊信息：exportdefaultnewVuex.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){returnstate.chatState},getGroupState(state){returnstate.groupState}}})全局更新状态,获取state://updatethis.$store.dispatch('updateChatState',{account:null,nickName:null})//获取this.$store.getters.getChatState数据库接口apimodule.exports=function(app){app.all("*",function(req,res,next){next()})//api登录登录app.get('/api/user/login',function(req,res){//...})//api注册registerapp.get('/api/user/register',function(req,res){//...})//getAccountGroup获取无障碍房间app.get('/api/user/getAccountGroup',function(req,res){//...})//getGroupNumberGet当前房间的群成员app.get('/api/user/getGroupNumber',function(req,res){//...})//apigetChatLog获取当前房间的聊天记录app.get('/api/getChatLog',function(req,res){//...})app.get('*',function(req,res){res.end('404')})}更详细的实现，请看源码chat-vue-node，在开发探索中保留了很多注释
