深入理解onmessage事件

前端實時通信中，WebSocket作為一種全雙工通信協議，既支持客戶端發送信息到服務端，又支持服務端推送信息到客戶端，為實現實時通信提供了便利。其中，onmessage事件是WebSocket對象中的一個事件，用來監聽服務端發送到客戶端的消息。本文將從多個角度探究onmessage事件的相關特性。

一、onmessage事件的基礎用法

在WebSocket對象中，onmessage事件是用於接收伺服器傳送到客戶端的信息的回調函數，通過設置WebSocket對象的onmessage屬性，當有伺服器端消息到來時自動觸發。

let ws = new WebSocket('ws://localhost:8080');

ws.onmessage = function(event) {
    // 接收到來自伺服器的消息，執行相應代碼
    console.log(event.data);
};

當客戶端接收到伺服器端發送過來的文本格式數據時，event對象的data屬性即為伺服器端發送的數據信息；當接收到二進位格式的數據時，則可通過WebSocket對象的buffer屬性獲取數據流。

二、多種數據類型的接收處理

可以通過WebSocket的send方法向伺服器端發送多種類型的數據，因此在onmessage事件的回調函數中也需要判斷接收到的數據類型。

文本格式數據：

ws.onmessage = function(event) {
    if (typeof event.data === 'string') {
        console.log(event.data);
    }
};

二進位格式數據：

ws.onmessage = function(event) {
    if (event.data instanceof ArrayBuffer) {
        var buffer = event.data;
        // 對buffer進行相應處理
    }
};

Blob格式數據：

ws.onmessage = function(event) {
    if (event.data instanceof Blob) {
        var blob = event.data;
        // 對blob進行相應處理
    }
};

接收到的Blob數據還可以使用FileReader對象進行讀取，得到文本或二進位數據。

三、處理大量數據

當一次性要發送大量數據時，服務端往往會分批次發送，因此客戶端需要處理多條消息的情況。

ws.onmessage = function(event) {
    if (typeof event.data === 'string') {
        // 對文本格式數據進行處理
    } else if (event.data instanceof ArrayBuffer) {
        var buffer = event.data;
        // 對二進位格式數據進行處理
    } else if (event.data instanceof Blob) {
        var blob = event.data;
        // 對Blob格式數據進行處理
    }
};

通過判斷接收到的數據類型，將不同的數據分別處理。

四、結合Promise實現消息隊列

當客戶端接收到大量消息時，處理每一條消息可能會消耗比較長的時間，為了讓處理結果更加的有條理和可控，可以使用Promise實現消息隊列。

let messageQueue = Promise.resolve();

ws.onmessage = function(event) {
    let message = event.data;
    messageQueue = messageQueue.then(() => {
        // 對接收到的消息進行處理
        console.log(message);
    });
};

每次接收到消息後將其加入到Promise隊列中，通過then方法不斷執行隊列中的Promise對象，實現消息的有序處理。

五、結合RxJS實現數據流處理

使用RxJS也能實現WebSocket數據流的處理。通過observable的subscribe方法接收消息，使用map、filter等RxJS操作符處理接收到的數據流。

import { webSocket } from 'rxjs/webSocket';

const ws = webSocket('ws://localhost:8080');

ws.subscribe({
    next: (message) => {
        console.log(message);
    },
    error: (err) => {
        console.error(err);
    },
    complete: () => {
        console.log('WebSocket連接已關閉！');
    }
});

這裡使用RxJS中的webSocket方法創建WebSocket對象，使用subscribe方法接收數據流。在subscribe中可以使用observer中的next、error、complete等方法對接收到的數據流進行處理。

總結

本文從基礎用法、多種數據類型處理、大量數據處理、Promise和RxJS結合實現數據流處理等方面詳細講解了onmessage事件的相關知識。通過使用onmessage事件，我們可以輕鬆地實現WebSocket客戶端接收來自伺服器端的消息，並進行處理。