vue使用WebSocket模擬實現聊天功能
阿新 • • 發佈：2021-08-13
效果展示 兩個瀏覽器相互模擬
1.建立模擬node服務
在根目錄下建立 server. 檔案模擬後端伺服器
**在server終端目錄下載 **
npm install --s ws
2.編寫server.js檔案
程式碼如下
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啟動伺服器
3.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,'polygon')}% 0,100% 100%,0% 100%); transform: rotate(${getUserHead(i.userId,'rotate')}deg)`"
></div>
</div>
<div class="user-msg">
<span
:style="i.userId == userId?'float: right':''"
:class="i.userId == userId?'right':'left'"
>{{i.content}}</span>
</div>
</div>
</div>
<div class="input-box">
<input type="text" ref="sendMsg" v-model="conten
- 然後npm run dev，就可以實現區域網聊天了，有無線的話可以用手機連著無線訪問你的IP地址訪問，沒的話可以試下多開幾個視窗，也是能看到效果的！！
- 進入聊天室時和傳送資訊時伺服器的列印日誌
到此這篇關於vue使用WebSocket模擬實現聊天功能的文章就介紹到這了,更多相關vue使用WebSocket實現聊天內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！