大家好，关于源码分享网站群管理系统很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于群聊网站源码的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
点击右上方红色按钮关注“web秀”，让你真正秀起来
前言
在《Nodejs+WebSocket简单介绍及示例-第一章》中简单的介绍了，Nodejs+WebSocket的使用方法及作用，今天就用它来搭建一个简单的聊天室功能。
1、Nodejs+WebSocket创建后台服务器功能
2、Vue视图层，接收后台数据并渲染页面
3、LocalStorage存储会话ID等用户信息
vue+webpack生成vue项目
脚手架搭建项目也是非常好用，简单命令即可搞定
cdweb-im\n#npminstall\n
这就是整个生成后的项目结构。
WebSocket服务端
在项目根目录下新建server/index.js文件。
varws=require(“nodejs-websocket”);\n//这里用到了moment，请大家自行安装\nvarmoment=require(‘moment’);\n\nconsole.log(“开始建立连接…”)\n\nletusers=[];\n\n//向所有连接的客户端广播\nfunctionboardcast(obj){\nserver.connections.forEach(function(conn){\nconn.sendText(JSON.stringify(obj));\n})\n}\n\nfunctiongetDate(){\nreturnmoment().format(‘YYYY-MM-DDHH:mm:ss’)\n}\n\nvarserver=ws.createServer(function(conn){\nconn.on(“text”,function(obj){\nobj=JSON.parse(obj);\nif(obj.type===1){\nusers.push({\nnickname:obj.nickname,\nuid:obj.uid\n});\nboardcast({\ntype:1,\ndate:getDate(),\nmsg:obj.nickname+’加入聊天室’,\nusers:users,\nuid:obj.uid,\nnickname:obj.nickname\n});\n}else{\nboardcast({\ntype:2,\ndate:getDate(),\nmsg:obj.msg,\nuid:obj.uid,\nnickname:obj.nickname\n});\n}\n})\nconn.on(“close”,function(code,reason){\nconsole.log(“关闭连接”)\n});\nconn.on(“error”,function(code,reason){\nconsole.log(“异常关闭”)\n});\n}).listen(8001)\nconsole.log(“WebSocket建立完毕”)\n
如果上方代码阅读体验太差，可以看下方图或者直接到文章最下方，点击了解更多阅读：
这里和《Nodejs+WebSocket简单介绍及示例-第一章》大体结构相同，不同的是，这里向客户端发送消息是用的一个方法
server.connections.forEach(function(conn){\nconn.sendText(JSON.stringify(obj));\n})\n
遍历所有连接，发送信息。
这里为什么要JSON.stringify(obj)转换成字符串？？？
那是sendText方法只能传入字符串，所以我们需要将我们的对象转换一下。
同时，大家应该可以看出，在conn.on(“text”,()=>{})的时候判断了一个从客户端传入的type，这个操作是判断用户是否是第一次进入。
WebSocket客户端视图层
<divid=”app”>\n<c-dialog\nref=”loginDialog”\ntitle=’请输入你的昵称’\nconfirmBtn=”开始聊天”\n@confirm=”login”\n>\n<inputclass=”nickname”v-model=”nickname”type=”text”placeholder=”请输入你的昵称”>\n</c-dialog>\n\n<divclass=”web-im”>\n<divclass=”headerim-title”>聊天室</div>\n<divclass=”contentim-record”>\n<divclass=”li”:class=”{user:item.uid==uid}”v-for=”iteminmessageList”>\n<templatev-if=”item.type===1″>\n<pclass=”join-tips”>{{item.msg}}</p>\n</template>\n<templatev-else>\n<divclass=”img”>{{item.nickname}}</div>\n<pclass=”message-box”>{{item.msg}}</p>\n</template>\n</div>\n</div>\n<divclass=”footerim-input”>\n<inputtype=”text”v-model=”msg”placeholder=”请输入内容”>\n<button@click=”send”>发送</button>\n</div>\n</div>\n</div>\n
如果上方代码阅读体验太差，可以看下方图或者直接到文章最下方，点击了解更多阅读：
样式方面就不做解释了，都是非常简单的样式，有兴趣的可以点击最下方获取源码查看。
WebSocket客户端
exportdefault{\n…\ndata(){\nreturn{\nuid:”,\nnickname:”,\nsocket:”,\nmsg:”,\nmessageList:[]\n}\n},\nmounted(){\nletvm=this;\nletuser=localStorage.getItem(‘WEB_IM_USER’);\nuser=user&&JSON.parse(user)||{};\nvm.uid=user.uid;\nvm.nickname=user.nickname;\n\nif(!vm.uid){\nvm.$refs.loginDialog.show()\n}else{\nvm.conWebSocket();\n}\ndocument.onkeydown=function(event){\nvare=event||window.event;\nif(e&&e.keyCode==13){//回车键的键值为13\nvm.send()\n}\n}\n},\nmethods:{\nsend(){\nif(!this.msg){\nreturn\n}\nthis.sendMessage(2,this.msg)\n},\nsendMessage(type,msg){\nthis.socket.send(JSON.stringify({\nuid:this.uid,\ntype:type,\nnickname:this.nickname,\nmsg:msg\n}));\nthis.msg=”;\n},\nconWebSocket(){\nletvm=this;\nif(window.WebSocket){\nvm.socket=newWebSocket(‘ws://localhost:8001’);\nletsocket=vm.socket;\n\nsocket.onopen=function(e){\nconsole.log(“连接服务器成功”);\nif(!vm.uid){\n//生成新的用户id,并存入localStorage\nvm.uid=’web_im_’+moment().valueOf();\nlocalStorage.setItem(‘WEB_IM_USER’,JSON.stringify({\nuid:vm.uid,\nnickname:vm.nickname\n}))\nvm.sendMessage(1)\n}\n}\nsocket.onclose=function(e){\nconsole.log(“服务器关闭”);\n}\nsocket.onerror=function(){\nconsole.log(“连接出错”);\n}\n//接收服务器的消息\nsocket.onmessage=function(e){\nletmessage=JSON.parse(e.data);\nvm.messageList.push(message);\n}\n}\n},\nlogin(){\nthis.$refs.loginDialog.hide()\nthis.conWebSocket();\n}\n}\n}\n
如果上方代码阅读体验太差，可以看下方图或者直接到文章最下方，点击了解更多阅读：
页面渲染完成后，我们localStorage.getItem(‘WEB_IM_USER’)获取本地存储是否有用户信息
1、没有用户信息，弹框填写昵称，确认开始连接，并生成一个时间戳的用户id，存入localStorage
2、有用户信息，直接连接
3、socket.onmessage监听服务器发送过来的消息，转换成json，push到messageList数组中，然后渲染到页面
4、通过type判断是新加入用户，还是正常发送消息，显示到页面
5、通过uid，判断是否是本人发送的消息，如果是消息内容靠右显示，其他用户发送的消息都靠左显示，并设置不同背景色
这样我们就完成了一个简单的node+websocket群聊功能，你从中学习到了什么了？？？
最后来一睹风采
总结
Nodejs+WebSocket群聊功能和核心不知道大家有没有get到了？？？其实核心代码就是它：
functionboardcast(obj){\nserver.connections.forEach(function(conn){\nconn.sendText(JSON.stringify(obj));\n})\n}\n
向所有连接者发送消息，这样所有连接者都能接收到消息。
公告
为了感谢大家一直以来的支持，小编发起了抽奖活动，大家可以去参与，转发抽奖活动和关注小编即可参与，抽出5名小伙伴每人20元话费奖励。再次感谢大家的支持。
喜欢小编的点击关注，了解更多知识！
源码地址，可以点击下方“了解更多”获取！
关于源码分享网站群管理系统的内容到此结束，希望对大家有所帮助。