客服系統即時通訊IM開發（一）基于WebSocket實作實時獲取訊息【唯一客服】網站在線客服系統

我在實作在客服系統的時候，前端是基于WebSocket來實時收取服務端訊息的，詳細的解釋下

即時通訊一種常用的方法是使用 WebSocket，WebSocket 是一種通信協議，它允許瀏覽器和服務器進行全雙工通信，也就是說，雙方都可以同時發送和接收訊息，

在前端使用 JavaScript 實作即時通訊的方法也有很多，可以使用 WebSocket 物件來與服務器通信，

你可以在瀏覽器中打開 WebSocket 連接，然后使用 send() 方法向服務器發送訊息，使用 onmessage 事件處理程式來接收服務器發送的訊息，

const ws = new WebSocket('ws://example.com/ws');

ws.onopen = function () {
  console.log('WebSocket 連接已打開');
  ws.send('發送訊息');
};

ws.onmessage = function (event) {
  console.log(`收到服務器的訊息：${event.data}`);
};

ws.onclose = function () {
  console.log('WebSocket 連接已關閉');
};

我們還需要實作斷線重連機制

在前端使用 JavaScript 實作斷線重連的方法有很多，

下面是一種常見的實作方式：

// 設定重連時間間隔（單位：毫秒）
const RECONNECT_INTERVAL = 1000;

// 設定最大重連次數
const MAX_RECONNECT_TIMES = 3;

let reconnectTimes = 0;
let ws;

// 嘗試連接 WebSocket
function connect() {
  ws = new WebSocket('ws://example.com/ws');

  ws.onopen = function () {
    console.log('WebSocket 連接已打開');
    reconnectTimes = 0;
  };

  ws.onclose = function () {
    console.log('WebSocket 連接已關閉');
    // 嘗試重連
    reconnect();
  };
}

// 嘗試重連
function reconnect() {
  if (reconnectTimes >= MAX_RECONNECT_TIMES) {
    console.log('重連失敗');
    return;
  }

  reconnectTimes++;
  console.log(`正在嘗試重連（第 ${reconnectTimes} 次）`);

  setTimeout(function () {
    connect();
  }, RECONNECT_INTERVAL);
}

connect();

我們還需要獲取到后端的資料并進行決議

在前端使用 JavaScript 接收訊息并決議的方法有很多，

例如，你可以使用 WebSocket 的 onmessage 事件處理程式來接收服務器發送的訊息，然后根據訊息的格式來決議，

下面是一個簡單的例子，假設服務器發送的訊息格式為 { "type": "message", "data": "Hello, World!" }：

ws.onmessage = function (event) {
  console.log(`收到服務器的訊息：${event.data}`);

  // 決議訊息
  const message = JSON.parse(event.data);
  if (message.type === 'message') {
    console.log(`收到訊息：${message.data}`);
  }
};

下面是結合了我的實際客服專案，完整的demo代碼

    // 設定重連時間間隔（單位：毫秒）
    const RECONNECT_INTERVAL = 1000;

    // 設定最大重連次數
    const MAX_RECONNECT_TIMES = 3;

    let reconnectTimes = 0;
    let ws;

    // 嘗試連接 WebSocket
    function connect() {
        ws = new WebSocket('wss://gofly.v1kf.com/ws_visitor?visitor_id=5|a780d122-daa3-4315-a413-f93b29b026d0&to_id=taoshihan');

        ws.onopen = function () {
            console.log('WebSocket 連接已打開');
            reconnectTimes = 0;
        };

        ws.onclose = function () {
            console.log('WebSocket 連接已關閉');
            // 嘗試重連
            reconnect();
        };
        ws.onmessage = function (event) {
            console.log(`收到服務器的訊息：${event.data}`);

            // // 決議訊息
            // const message = JSON.parse(event.data);
            // if (message.type === 'message') {
            //     console.log(`收到訊息：${message.data}`);
            // }
        };
    }

    // 嘗試重連
    function reconnect() {
        if (reconnectTimes >= MAX_RECONNECT_TIMES) {
            console.log('重連失敗');
            return;
        }

        reconnectTimes++;
        console.log(`正在嘗試重連（第 ${reconnectTimes} 次）`);

        setTimeout(function () {
            connect();
        }, RECONNECT_INTERVAL);
    }

    connect();

唯一在線客服系統

https://gofly.v1kf.com

十年開發經驗程式員，離職全心創業中，歷時三年開發出的產品《唯一客服系統》

標籤：其他

上一篇：客服系統即時通訊IM開發（一）基于WebSocket實作實時獲取訊息【唯一客服】網站在線客服系統

下一篇：day04-Vue01