【JS応用｜豆知識】リアルタイム通信の鍵！WebSocket.prototype.onmessageを使いこなそう

導入：なぜWebSocketのonmessageが重要なのか

現代のWebアプリケーションでは、チャット機能や株価のリアルタイム更新、通知システムなど、サーバーからクライアントへ能動的にデータを送る技術が不可欠です。HTTP通信では「クライアントからの要求」がないとデータを受け取れませんが、WebSocketを使えば双方向の通信が可能になります。その通信経路において、サーバーから届いたデータを受け取り、処理するための窓口となるのが WebSocket.prototype.onmessage です。このプロパティを適切に制御することは、安定したリアルタイム機能を実装する上で最も重要なスキルの一つです。

基礎知識：onmessageとは何か

WebSocket APIは、サーバーとの接続を確立した後、イベント駆動型で動作します。onmessage は、WebSocketオブジェクトがサーバーからメッセージを受信した瞬間に呼び出される「イベントハンドラ」です。

イベントオブジェクト: onmessageには引数として「MessageEvent」が渡されます。
dataプロパティ: 受信した実際のデータは、MessageEventの「data」プロパティに格納されています。これは文字列であることもあれば、バイナリデータ（BlobやArrayBuffer）であることもあります。

実装・解決策：onmessageの設定方法

onmessageを実装するには、WebSocketインスタンスに対して関数を代入します。ポイントは、受信したデータがJSON形式の場合、必ず JSON.parse() を実行してオブジェクトに変換することです。また、受信エラーや接続断に備えて、例外処理を組み込むのがフロントエンド開発の鉄則です。

サンプルプログラム

以下のコードは、サーバーに接続し、受信したデータをコンソールに表示する実用的なテンプレートです。

// WebSocketサーバーのURLを指定
const socket = new WebSocket('wss://example.com/socket');

// メッセージ受信時の処理を定義
socket.onmessage = function(event) {
    try {
        // 受信したデータをJSONとしてパースする
        const receivedData = JSON.parse(event.data);
        
        // データの種類に応じて処理を分岐
        if (receivedData.type === 'chat') {
            console.log('新着メッセージ:', receivedData.message);
        } else {
            console.log('システム通知:', receivedData);
        }
    } catch (error) {
        // JSON形式でない場合やパース失敗時のエラーハンドリング
        console.error('データの解析に失敗しました:', error);
    }
};

// 接続開始時の処理
socket.onopen = () => console.log('接続成功！');

応用・注意点：現場で陥りやすい罠

現場の開発でよくある失敗は、「onmessageの二重定義」や「処理の重い同期処理」です。

二重定義の回避: 同じインスタンスに対して複数のonmessageを代入すると、後の設定で上書きされます。複数の処理を登録したい場合は、addEventListener(‘message’, callback) を使用するのがベストプラクティスです。
ブロッキングの回避: onmessage内で複雑すぎる計算を行うと、メインスレッドがブロックされ、UIがフリーズします。重い計算が必要な場合は、Web Workers にデータを投げて処理を分離することをお勧めします。
接続状態の確認: ネットワーク不安定な環境では、送信前に socket.readyState を確認し、接続が確立しているかチェックするロジックを必ず挟むようにしてください。