JavaScript?WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向聊天

更新時(shí)間：2024年04月02日 11:40:45 作者：sghsjksjhsh

這篇文章主要為大家詳細(xì)介紹了如何基于JavaScript?WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向聊天,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下

一、搭建WebSocket服務(wù)器

我軟件后端使用的nodejs，所以我們這次也用nodejs來(lái)做后端，方便之后的接入

1、搭建服務(wù)器

我們先引入ws庫(kù)和http庫(kù)，把WebSocket服務(wù)搭建起來(lái)

const WebSocket = require('ws');
const http = require('http');
const url = require('url');
const server = http.createServer((req, res) => {
    res.writeHead(200);
    res.end('WebSocket server is running.');
});

2、初始化WebSocket服務(wù)器

我們需要將WebSocket服務(wù)綁定到我們的http服務(wù)器上

const wss = new WebSocket.Server({ server });

3、客戶(hù)映射

使用Map的數(shù)據(jù)結(jié)構(gòu)來(lái)存儲(chǔ)以連接的用戶(hù)及其對(duì)應(yīng)的客戶(hù)端

const connectedUsers = new Map();

4、事件處理

連接事件

因?yàn)槲覀兊牧奶焓菃螌?duì)單的，而WebSocket是廣播（一對(duì)多）傳輸?shù)?，所以我們可以使用UserA和UserB的用戶(hù)名來(lái)做成連接，只有UserA和UserB進(jìn)入此聊天室。

  wss.on('connection', (ws, req) => {
      const query = url.parse(req.url, true).query;
      const userIdA = query.userA;
      const userIdB = query.userB;
      connectedUsers.set(userIdA, ws);
      connectedUsers.set(userIdB, ws);
      // 這里添加其他邏輯，比如我這里是將UserA和UserB從URL里面分離，并且將ID和Web socket客戶(hù)端關(guān)聯(lián)起來(lái)，這里也可以做一下用戶(hù)認(rèn)證之類(lèi)的操作
  });

關(guān)閉事件

關(guān)閉事件是指的有用戶(hù)斷開(kāi)連接時(shí)，就從映射中移除用戶(hù)相應(yīng)的ID

  ws.on('close', () => {
      console.log(`Connection closed for users ${userIdA} and ${userIdB}.`);
      connectedUsers.delete(userIdA);
      connectedUsers.delete(userIdB);
  });

錯(cuò)誤事件

這里就是記錄了在連接期間發(fā)生的任何錯(cuò)誤

  ws.on('error', (message) => {
      console.error(`Error occurred for users ${userIdA} and ${userIdB}:`, err);
  });

消息接收

這個(gè)事件就是在連接過(guò)程中用戶(hù)在廣播中發(fā)送的消息，我們將他解析成JSON內(nèi)容（因?yàn)槲疫@里做的單對(duì)單，所以數(shù)據(jù)中包含了sender、receiverID、content，可以使用這種方式來(lái)查找接受者，并且將消息廣播給接受者）

  ws.on('message', (message) => {
      const dataMessage = message.toString()
      const data = JSON.parse(dataMessage)[0]
      const senderId = data.sender;
      const receiverId = data.receiverID;
      const content = data.content;
      // 廣播消息給接收方
      const receiverWs = connectedUsers.get(receiverId);
      if (receiverWs) {
          receiverWs.send(JSON.stringify({ sender: senderId, content, receiver:receiverId }));
      } else {
          console.warn(`Receiver ${receiverId} is not connected.`);
      }
  });

5、WebSocket！啟動(dòng)！

最后，我們只要制定監(jiān)聽(tīng)端口，啟動(dòng)WebSocket服務(wù)器即可

server.listen(3000, () => { console.log('WebSocket server listening on port 3000.'); });

二、前端uniapp應(yīng)用

我這里使用uniapp制作了一個(gè)基礎(chǔ)的分屏，左邊模擬a用戶(hù)，右邊模擬b用戶(hù)

左邊使用messageA來(lái)存儲(chǔ)消息，右邊使用messageB來(lái)存儲(chǔ)消息（其實(shí)也可以把他們兩個(gè)合成一個(gè)，但是這里是分屏演示，如果合成一個(gè)那么即時(shí)通訊的功能就不太顯著了）

<template>
    <view class="content">
        <view class="a">
            <view class="text">
                <div v-for="(item, index) in messagesA" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="請(qǐng)輸入文本" @input="inputa" :value="inputaV" />
            <button @click="sumA">發(fā)送</button>
        </view>
        <view class="b">
            <view class="text">
                <div v-for="(item, index) in messagesB" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="請(qǐng)輸入文本" @input="inputb" :value="inputbV" />
            <button @click="sumB">發(fā)送</button>		
        </view>
    </view>
</template>

data() {
    return {
        inputaV: '',//a用戶(hù)輸入
        inputbV: '',//b用戶(hù)輸入
        messagesA:[],//a用戶(hù)的消息列表
        messagesB: [],//b用戶(hù)的消息列表
        url: 'ws://127.0.0.1:3000',//使用ws連接連接到webSocket服務(wù)器
        socket: null,//socket實(shí)例
        userA: 'a',//a用戶(hù)的id
        userB: 'b',//b用戶(hù)的id
    }
},

//初始化，在進(jìn)入軟件后便處理url連接，將a用戶(hù)和b用戶(hù)的id放入到url連接中（此方法在初始化頁(yè)面的時(shí)候就要進(jìn)行調(diào)用）
//并且在兩個(gè)用戶(hù)連接到服務(wù)器中綁定消息的回調(diào)函數(shù)，使得有任意一個(gè)用戶(hù)發(fā)送消息之后都會(huì)接受到消息
enter() {
    let url = `${this.url}?userA=${this.userA}&userB=${this.userB}`;
    this.connect(url);
    uni.onSocketMessage(this.onSocketMessage（）); // 綁定消息接收回調(diào)
},
//連接方法，此方法是在用戶(hù)在進(jìn)入頁(yè)面中就調(diào)用的，讓兩個(gè)用戶(hù)連接到websocket服務(wù)器中
connect(url) {
    this.socket = uni.connectSocket({
        url,
        success() {
            console.log('WebSocket連接成功');
            uni.onSocketOpen(() => {
                console.log('WebSocket連接已打開(kāi)！');
            });
        },
        fail(err) {
            console.error('WebSocket連接失敗', err);
        }
    });
},
//用戶(hù)a發(fā)送消息的事件
sumA() {
    if (this.socket) {
        //將消息中帶上發(fā)出人，接收人，確保信息無(wú)誤
        this.messagesA.push({
            sender: this.userA,
            content: this.inputaV,
            receiverID: this.userB
	})
        let data = JSON.stringify(this.messagesA)
        uni.sendSocketMessage({
            data
        });
        this.inputaV = ''
    } else {
	console.log('連接失敗');
    }
},
//用戶(hù)b發(fā)送消息的事件
sumB() {
    if (this.socket) {
        this.messagesA.push({
            sender: this.userB,
            content: this.inputbV,
            receiverID: this.userA
        })
	let data = JSON.stringify(this.messagesA)
	uni.sendSocketMessage({
            data
        });
	this.inputbV = ''
    } else {
        console.log('連接失敗');
    }
},
//獲取消息事件，在任意用戶(hù)發(fā)送消息之后，前端可以監(jiān)聽(tīng)到消息的接受，我們只需要將數(shù)據(jù)進(jìn)行處理即可
//因?yàn)橛脩?hù)的顯示是用的messageA/messageB，所以我們可以通過(guò)不同的接收人來(lái)對(duì)不同的數(shù)據(jù)進(jìn)行處理
onSocketMessage(res) {
    let data = JSON.parse(res.data)
    let sender = data.sender
    let content = data.content
    let receiver = data.receiver
    if(receiver == this.userA){
        this.messagesA.push({
            sender,
            content,
            receiverID
	})
    }else if(receiver == this.userB){
	this.messagesB.push({
            sender,
            content,
            receiverID
        })
    }
},