前言 上篇我們講了如何使用vue + websocket + nodejs搭建一個聊天室， 下面我們在該聊天室基礎上增加了一對一單聊功能。支持一對一單聊，一對多群聊。

先看效果：

大概思路：
主要通過參數brige區分是群聊還是單聊：
brige為空是群聊；
brige包含了當前登錄人的uid還有聊天對應人的uid，是單聊。

核心代碼：

// 單聊 if (obj.brige && obj.brige.length) {obj.brige.forEach(item => {conns[item].sendText(JSON.stringify(obj))})return;} // 群聊(目前是默認寫死的一個群) server.connections.forEach(function (conn) { // 注意：這里是server,不是wsconn.sendText(JSON.stringify(obj)) // 注意：這里得轉成字符串發送過去，不然會報錯。})

流程圖如下：

上代碼：

服務端：

const ws = require('nodejs-websocket') const moment = require('moment') let users = [] let conns = {}function broadcast(obj) {// 單聊if (obj.brige && obj.brige.length) {obj.brige.forEach(item => {conns[item].sendText(JSON.stringify(obj))})return;}server.connections.forEach(function (conn) {conn.sendText(JSON.stringify(obj))}) } const server = ws.createServer(function (conn) {conn.on('text', function (data) {const obj = JSON.parse(data)switch (obj.type) {case 1:{// 將所有uid對應的連接都保存到一個對象里conns[obj.uid] = conn;// 不存在uid對應的用戶（不是本人），才會添加，避免重復const isSelf = users.some(m => m.uid === obj.uid)console.log(isSelf, data.uid, users, '所有用戶')if (!isSelf) {users.push({nickname: obj.nickname,uid: obj.uid})}broadcast({type: 1,nickname: obj.nickname,uid: obj.uid,msg: `${obj.nickname}進入了聊天室`,date: moment().format('YYYY-MM-DD HH:mm:ss'),users,brige: obj.brige})}break;case 2:// 聊天時候不需要users，type為1已經處理了broadcast({type: 2,nickname: obj.nickname,uid: obj.uid,msg: obj.msg,users,date: moment().format('YYYY-MM-DD HH:mm:ss'),brige: obj.brige})break;}})conn.on('close', function (e) {console.log(e, '服務端連接關閉')})conn.on('error', function (e) {console.log(e, '服務端異常')})}).listen(8888) console.log('服務端已開啟')

客戶端：

視圖層：（由之前的class為right改為現在web-im。多加了左側菜單欄，其他地方跟上篇一致）

<div class="web-im"><div class="left"><div class="user" @click="triggerGroup()">群一</div><div class="user" v-for="(itm, idex) in users" :key="idex" v-show="itm.uid !== uid" @click="triggerUser(itm)"><span>{{itm.nickname}}</span></div></div><div class="right"><div class="body im-record" id="im-record"><p>{{title}}</p><div class="ul"><!-- user為靠右展示樣式，如果uid一致說明是本人 --><div class="li" :class="{user: item.uid == uid}" v-for="(item, index) in currentMessage" :key="index"><template v-if="item.type===1"><p class="join-tips">{{item.msg}}</p></template><template v-else><p class="message-date"><span class="m-nickname">{{item.nickname}}</span> {{item.date}}</p><p class="message-box">{{item.msg}}</p></template></div></div></div><div class="im-footer"><el-input placeholder="請輸入你想說的內容..." v-model="msg" class="im-footer_inp"/><el-button class="im-footer_btn" type="primary" @click="send">發送</el-button></div></div></div>

邏輯層：（之前是聊天框數組是messageList，現在改成currentMessage）
(注：…表示代碼跟之前一致，這里不再多寫)

computed: {// 篩選當前brige一致的放到一個聊天數組里，區分單聊和群聊currentMessage () {const vm = thislet data = this.messageList.filter(item => {return item.brige.sort().join('') === vm.brige.sort().join('')})return data}},...// 發送信息給客戶端sendMessage (type, msg) {const data = {uid: this.uid,type,nickname: this.nickname,msg,users: this.users,brige: this.brige}this.ws.send(JSON.stringify(data))this.msg = ''},// 切換到單聊triggerUser (itm) {this.brige = [this.uid, itm.uid]this.title = `和${itm.nickname}聊天`},// 切換到群聊triggerGroup () {this.brige = []this.title = '群聊'},

樣式層：

.web-im {display: flex; }.left {width: 200px;border: 1px solid #ccc;.user {width: 100%;height: 36px;padding-left: 10px;border-bottom: 1px solid #ccc;line-height: 36px;.msgtip {display: inline-block;width: 20px;height: 20px;background: #46b0ff;margin-left: 5px;text-align: center;color: #fff;line-height: 20px;border-radius: 50%;}}}.right {position: relative;flex: 1;height: 600px;margin: 0 auto;.im-title {height: 30px;padding-left: 20px;border-bottom: 1px solid #ccc;line-height: 30px;font-size: 16px;}.im-footer {position: absolute;bottom: 0;left: 0;display: flex;width: 100%;.im-footer_inp {width: 80%;}.im-footer_btn {width: 20%;}}.im-record {width: 100%;height: 540px;overflow-y: auto;.join-tips {position: relative!important;display: block;width: 100%;left: 0!important;transform: none!important;color: #cccccc;font-size: 15px;text-align: center;}.li {position: relative;margin-bottom: 15px;text-align: left;color: #46b0ff;&:after {content: '';display: block;clear: both;}.message-date {font-size: 16px;color: #b9b8b8;}.m-nickname {color: #46b0ff;}&.user {text-align: right;}}.message-box {line-height: 30px;font-size: 20px;}}}

參考鏈接：Nodejs + WebSocket + Vue 一對一、一對多聊天室 – 第三章

總結

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

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