前言 上篇我們講了如何使用vue + websocket + nodejs搭建一個(gè)聊天室， 下面我們?cè)谠摿奶焓一A(chǔ)上增加了一對(duì)一單聊功能。支持一對(duì)一單聊，一對(duì)多群聊。

先看效果：

大概思路：
主要通過(guò)參數(shù)brige區(qū)分是群聊還是單聊：
brige為空是群聊；
brige包含了當(dāng)前登錄人的uid還有聊天對(duì)應(yīng)人的uid，是單聊。

核心代碼：

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

流程圖如下：

上代碼：

服務(wù)端：

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對(duì)應(yīng)的連接都保存到一個(gè)對(duì)象里conns[obj.uid] = conn;// 不存在uid對(duì)應(yīng)的用戶（不是本人），才會(huì)添加，避免重復(fù)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}進(jìn)入了聊天室`,date: moment().format('YYYY-MM-DD HH:mm:ss'),users,brige: obj.brige})}break;case 2:// 聊天時(shí)候不需要users，type為1已經(jīng)處理了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, '服務(wù)端連接關(guān)閉')})conn.on('error', function (e) {console.log(e, '服務(wù)端異常')})}).listen(8888) console.log('服務(wù)端已開啟')

客戶端：

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

<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一致說(shuō)明是本人 --><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="請(qǐng)輸入你想說(shuō)的內(nèi)容..." v-model="msg" class="im-footer_inp"/><el-button class="im-footer_btn" type="primary" @click="send">發(fā)送</el-button></div></div></div>

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

computed: {// 篩選當(dāng)前brige一致的放到一個(gè)聊天數(shù)組里，區(qū)分單聊和群聊currentMessage () {const vm = thislet data = this.messageList.filter(item => {return item.brige.sort().join('') === vm.brige.sort().join('')})return data}},...// 發(fā)送信息給客戶端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 一對(duì)一、一對(duì)多聊天室 – 第三章

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。