客服系統即時通訊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

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