Vue+Websocket簡單實現聊天功能
阿新 • • 發佈：2021-09-01
本文例項為大家分享了+Websocket簡單實現聊天功能的具體程式碼，供大家參考，具體內容如下
效果圖：
聊天室
此篇文章是針對Websocket的簡單瞭解和應用，利用Node簡單搭建一個伺服器加以實現。
首先建立一個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++;//建立連線成功線上人數 +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',chat: chatList }));//建立連線關閉廣播一次當前線上人數
console.log('Connected clients:',userNum);
console.log('長連線已關閉')
})
})
console.log('伺服器建立成功')然後npm run start啟動伺服器
HelloWorld.vue(前端頁面)
<template>
<div class="chat-box">
<header>聊天室人數：{{count}}</header>
<div class="msg-box" ref="msg-box">
<div
v-for="(i,index) in list"
:key="index"
class="msg"
:style="i.userId == userId?'flex-direction:row-reverse':''"
>
<div class="user-head">
<div
class="head"
:style="` background: hsl(${getUserHead(i.userId,'bck')},88%,62%); clip-path:polygon(${getUserHead(i.userId,'http://www.cppcns.com
192.168.0.115是我本地的IP地址(預設是 localhost )，你可以改成你自己的
然後npm run dev，就可以實現區域網聊天了，有無線的話可以用手機連著無線訪問你的IP地址訪問，🙃沒的話可以試下多開幾個視窗，也是能看到效果的！！
進入聊天室時和傳送資訊時伺服器的列印日誌
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。