Vue+Websocket简单实现聊天功能

 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++;//建立连接成功在线人数 +1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //建立连接成功广播一次当前在线人数 console.log('Connected clients:', userNum); //接收前端发送过来的数据 ws.on('message', function (e) { var resData = 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--;//建立连接关闭在线人数 -1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList }));//建立连接关闭广播一次当前在线人数 console.log('Connected clients:', userNum); console.log('长连接已关闭') }) }) console.log('服务器创建成功')

  <div class="chat-box"> <header>聊天室人数：{{count}}</header><div class="msg-box"> <div class="msg"> <div class="user-head"> <div class="head"></div></div><div class="user-msg"> <span>{{i.content}}</span></div></div></div><div class="input-box"> <div class="btn">发送</div></div></div> .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: fle<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码网@</strong>x; 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; } } }