在前端中 WebSocket 是H5新增的對象

主要作用有：實時通訊 ?長連接 ?雙向傳輸 ?后端主動推送數據

websocket實例的主要事件

前端：

直接new 一個實例

const ws = new WebSocket("ws://localhost:9100");

大部分瀏覽器已經支持 WebSocket 對象? 協議格式為ws(不是 file http)

主要事件：

open	建立鏈接
close	斷開鏈接
error	發生錯誤
message	發送消息給后端

后端：

使用node 來簡單搞一個 本地服務、后端要依賴第三方包使用websocket 這里以ws為例

npm i ws@8.10.0

引入ws 創建服務 配置端口和前端一致

const ws = require('ws')

const wss= new ws.Server({port:9100})

主要事件：

open	建立鏈接
close	斷開鏈接
error	發生錯誤
connection message	有客戶端連接上? 接收到客戶端發送來的消息 一般 message事件在 connection里面

案例流程梳理

首先登錄 選擇 頭像 起昵稱（不能和聊天室內已經有的的重復）

進入聊天室 發送歡迎信息 ?顯示在線人數+1

發消息時 后端會自動轉發給其他連接上的客戶端

退出的時候 釋放?昵稱的命名空間?

登錄頁面展示：?

?樣式部分省略...

使用雙向綁定獲取 用戶輸入的昵稱和 選擇的頭像? 頭像v-for渲染數據? 點擊時currentIndex修改為當前的索引 根據索引 增加高亮邊框和 選擇此數據傳給下一步

<input type="text" placeholder="請輸入發言昵稱" v-model="nickname" id="input" /><ul class="avatar"><li v-for="(aa,index) in avatar_list":key="index":class="{curr : currentIndex===index}"@click="bianse(index)"><img :src="aa" alt=""></li>

驗證輸入用戶的長度要在1-9位

想服務器發起請求 存放昵稱（禁止其他人使用）

收集數據保存到??localStorage 中 進行下一步

methods:{defind(){if (this.nickname.length < 1) {return alert("請輸入昵稱");}if (this.nickname.length > 9) {return alert("輸入昵稱過長");}this.$http.get(`/login/${this.nickname}`).then(res => {if(res.data.status === 1){localStorage.setItem("nickname", this.nickname);localStorage.setItem("avatar", this.avatar_list[this.currentIndex]);this.$router.push('/about')}else{return alert("昵稱已被占用");}})},bianse(index){this.currentIndex = index}}

聊天室頁面

?預留組件中需要的數據? 進入組件和掛載元素 生命周期中進行對應的操作

進入到頁面 簡易判斷 前一步保存到?localStorage 的數據是否存在 如果不存在自動返回登錄頁面重新設置? 防止用戶跳過登錄直接進入到 聊天室 沒有昵稱導致的一系列錯誤? ?這一步也可以使用 導航守衛來實現

data(){return {nickname:'', // 用戶的昵稱message:'', // 用戶發送的消息record:[], // 消息記錄數組ws:null, // ws 實例 預留變量user_list:[] // 實時在線人數列表}},created() {this.nickname = localStorage.getItem("nickname")if (!this.nickname) {return this.$router.push('/');}},

mounted?生命周期中 創建 WebSocket實例

添加 ws相關事件 這里只需要

open 連接上ws服務器端了 發送歡迎消息

message 接收到服務器返回來的數據 渲染到頁面 聊天信息部分 并判斷是新進入的用戶發送的消息 還是老用戶發送的消息 如果是新用戶 就添加到左側在線列表 老用戶此步驟忽略

業務流程：連接上后端發送歡迎消息 =》后端接收消息 返回給每個客戶端? =》 客戶端接收到服務端發來的消息 渲染到 消息列表 并且根據條件 渲染左側在線列表

mounted() {this.ws = new WebSocket("ws://localhost:9100");this.ws.addEventListener("open", () => {this.ws.send(JSON.stringify({user: this.nickname,avatar:localStorage.getItem('avatar'),dateTime: this.nowTimeFormatChinese(new Date()),message:'歡迎 ' +this.nickname + ' 來到聊天室',}));});this.ws.addEventListener("message", (e) => {const data = JSON.parse(e.data)this.record.push(data);const flag = this.user_list.filter(x => x.user === data.user)if(flag.length === 0){this.user_list.push(data);}});},

點擊發送按鈕? 組織好數據 ws.send 發送給服務端?

發送消息 返回渲染之后 滾動跳滾到最新消息處

? ? ? ? ? this.$refs.lists.scrollTop += 100

? ? ? ? ? // window.scrollTo(0, document.body.scrollHeight);

?還有格式化時間的方法

methods:{send(){if (!this.message.trim().length) {return alert("請輸入內容");}this.ws.send(JSON.stringify({user: this.nickname,avatar:localStorage.getItem('avatar'),dateTime: this.nowTimeFormatChinese(new Date()),message: this.message,}));this.message = "";setTimeout(()=>{this.$refs.lists.scrollTop += 100// window.scrollTo(0, document.body.scrollHeight);},100)},padZero(n){return n > 9 ? n : "0" + n;},nowTimeFormatChinese(riqi){let hour = this.padZero(riqi.getHours()),min = this.padZero(riqi.getMinutes()),sec = this.padZero(riqi.getSeconds())return hour + "時" + min + "分" + sec + "杪";}},

離開頁面(銷毀組件)時 清楚自己的昵稱 ---左側的在線列表 和 服務器端的命名空間

deactivated(){const index = this.user_list.findIndex(x => x.user === this.nickname)this.user_list.splice(index, 1)this.$http.get(`/loginout/${this.nickname}`)},

?聊天室頁面完整模板(樣式省略)：

渲染消息列表時 判斷是不是自己所發的消息 返回來的user === 自己的nickname

是的話添加? meSay 樣式? 右側顯示 作為區分

<template><div class="about"><ul id="list" ref="lists"><li v-for="(n,index) in record" :key="index" :class="{meSay : n.user === nickname}"> <div><div class="cow"><img :src="n.avatar" alt="" class="avatar"><p class="ppp"><span>{{n.user}}</span><br><span>{{n.dateTime}}</span></p></div><div class="nei">{{n.message}}</div> </div></li></ul><div class="bottom"><div class="people"><h3>當前在線人數：{{this.user_list.length}}</h3><div class="user_list" v-for="n in user_list" :key="n.user"><img :src="n.avatar" alt="">{{n.user}}</div></div><textarea id="message" v-model="message" @keyup.enter="send"></textarea><button id="send" @click="send">發送</button></div></div> </template>

后端完整代碼

ws部分比較簡單? 監聽鏈接 和 接收消息的事件? 出發了就遍歷所有鏈接的客戶端 把數據原封不動的發送出去

const ws = require('ws')const wss= new ws.Server({port:9100})wss.on('connection',(client)=>{ // clent 這個客戶端鏈接了client.on('message',(msg)=>{ // 并且發來了數據const radio = msg.toString() // 數據轉換格式防止亂碼wss.clients.forEach(e =>{ // 遍歷再原封不動發送給每個鏈接的客戶端e.send(radio)})}) })

管理昵稱命名空間的端口

引入express 快速搭建本地服務器

npm i express@4

使用中間件 解決跨域問題

創建?activeUser 數組儲存 已在線的用戶昵稱、登錄時發送請求攜帶 nickname req.params 獲取路徑中的形參 判斷在?activeUser 中是否存在 如果存在添加失敗 不存在 添加進去 這樣保證昵稱不重復、 注銷時發送請求 攜帶nickname 在activeUser 查找到 并且 刪除它

// 導入 express 模塊 const express = require('express') // 創建 express 的服務器實例 const app = express()// 這樣也可以解決跨域問題 app.use(function(req,res,next){// 第二個 * 代表通配符 也可以指定具體的網站 http://www.wsg3096.comconst contentType = 'application/json; charset=utf-8'res.setHeader('Content-Type',contentType)res.setHeader('Access-Control-Allow-Origin','*')// 后面的也可以用通配符res.setHeader('Access-Control-Allow-Methods','OPTIONS,GET,PUT,POST,DELETE')// 設置其他的請求頭res.setHeader('Access-Control-Allow-Headers','Content-Type','X-Custom-Header')next() })const activeUser = []// 登錄的 API 接口 app.get('/api/login/:nickname', (req, res) => {const nickname = req.params.nicknameconst find = activeUser.find(x => x=== nickname)if(find){return res.send({status:0,msg:'用戶昵稱已經被占用'})}else{activeUser.push(nickname)return res.send({activeUser,status:1,msg:'成功進入聊天室隊列'})} })// 注銷的接口 app.get('/api/loginout/:nickname', (req, res) => {const nickname = req.params.nicknameconst index = activeUser.findIndex(x => x=== nickname)activeUser.splice(index,1)return res.send({activeUser,status:200,msg: `成功釋放${nickname}的命名空間`}) })// 調用 app.listen 方法，指定端口號并啟動web服務器 app.listen(7777, function () {console.log('Express server running at http://127.0.0.1:7777') })

總結

以上是生活随笔為你收集整理的Vue+WebSocket-实现多人聊天室的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。