Vue+Websocket简单实现聊天功能 Vue+Websocket简单实现聊天功能

本文实例为大家分享了Vue+Websocket简单实现聊天功能的具体代码，供大家参考，具体内容如下
效果图：

文章图片

聊天室
此篇文章是针对Websocket的简单了解和应用，利用Nodejs简单搭建一个服务器加以实现。
首先创建一个vue项目
然后再创建一个server文件夹，在终端上打开该文件夹，输入vue init（一直敲 "回车" 键），最后再建一个server.js文件，如下图

文章图片

代码如下：
server.js/
在server文件终端下 npm install --s ws

var userNum = 0; //统计在线人数var chatList = []; //记录聊天记录var WebSocketServer = require('ws').Server; wss = new WebSocketServer({ port: 8181 }); //8181 与前端相对应//调用 broadcast 广播，实现数据互通和实时更新wss.broadcast = function (msg) {wss.clients.forEach(function each(client) {client.send(msg); }); }; wss.on('connection', function (ws) {userNum++; //建立连接成功在线人数 +1wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //建立连接成功广播一次当前在线人数console.log('Connected clients:', userNum); //接收前端发送过来的数据ws.on('message', function (e) {var resData = https://www.it610.com/article/JSON.parse(e)console.log('接收到来自clent的消息：' + resData.msg)chatList.push({ userId: resData.userId, content: resData.msg }); //每次发送信息，都会把信息存起来，然后通过广播传递出去，这样此每次进来的用户就能看到之前的数据wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg })); //每次发送都相当于广播一次消息 }); ws.on('close', function (e) {userNum--; //建立连接关闭在线人数 -1wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //建立连接关闭广播一次当前在线人数console.log('Connected clients:', userNum); console.log('长连接已关闭')})})console.log('服务器创建成功')

然后npm run start启动服务器

文章图片

HelloWorld.vue(前端页面)

.chat-box {margin: 0 auto; background: #fafafa; position: absolute; height: 100%; width: 100%; max-width: 700px; header {position: fixed; width: 100%; height: 3rem; background: #409eff; max-width: 700px; display: flex; justify-content: center; align-items: center; font-weight: bold; color: white; font-size: 1rem; }.msg-box {position: absolute; height: calc(100% - 6.5rem); width: 100%; margin-top: 3rem; overflow-y: scroll; .msg {width: 95%; min-height: 2.5rem; margin: 1rem 0.5rem; position: relative; display: flex; justify-content: flex-start !important; .user-head {min-width: 2.5rem; width: 20%; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #f1f1f1; display: flex; justify-content: center; align-items: center; .head {width: 1.2rem; height: 1.2rem; }// position: absolute; }.user-msg {width: 80%; // position: absolute; word-break: break-all; position: relative; z-index: 5; span {display: inline-block; padding: 0.5rem 0.7rem; border-radius: 0.5rem; margin-top: 0.2rem; font-size: 0.88rem; }.left {background: white; animation: toLeft 0.5s ease both 1; }.right {background: #53a8ff; color: white; animation: toright 0.5s ease both 1; }@keyframes toLeft {0% {opacity: 0; transform: translateX(-10px); }100% {opacity: 1; transform: translateX(0px); }}@keyframes toright {0% {opacity: 0; transform: translateX(10px); }100% {opacity: 1; transform: translateX(0px); }}}}}.input-box {padding: 0 0.5rem; position: absolute; bottom: 0; width: 100%; height: 3.5rem; background: #fafafa; box-shadow: 0 0 5px #ccc; display: flex; justify-content: space-between; align-items: center; input {height: 2.3rem; display: inline-block; width: 100%; padding: 0.5rem; border: none; border-radius: 0.2rem; font-size: 0.88rem; }.btn {height: 2.3rem; min-width: 4rem; background: #e0e0e0; padding: 0.5rem; font-size: 0.88rem; color: white; text-align: center; border-radius: 0.2rem; margin-left: 0.5rem; transition: 0.5s; }.btn-active {background: #409eff; }}}

192.168.0.115是我本地的IP地址(默认是 localhost )，你可以改成你自己的

文章图片

然后npm run dev，就可以实现局域网聊天了，有无线的话可以用手机连着无线访问你的IP地址访问，没的话可以试下多开几个窗口，也是能看到效果的！！
进入聊天室时和发送信息时服务器的打印日志
【Vue+Websocket简单实现聊天功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。