WebSocket: message イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

メモ: この機能はウェブワーカー内で利用可能です。

message イベントは、 WebSocket を通してデータを受け取ったときに発生します。

構文

イベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("message", (event) => {});

onmessage = (event) => {};

イベント型

MessageEvent です。 Event から継承しています。

Event MessageEvent

イベントプロパティ

以下に示したプロパティに加え、親インターフェイスである Event から継承したプロパティも利用できます。

data 読取専用

メッセージ送信者から送信されたデータです。このプロパティの型は、WebSocket メッセージの種類と WebSocket.binaryType の値によって変わります。

  • メッセージの種類が "text" の場合、このフィールドは文字列です。
  • メッセージの種類が "binary" 型の場合、このプロパティの型はこのソケットの binaryType から推測することができます。
    • ArrayBuffer: binaryType が "arraybuffer" の場合
    • Blob: binaryType が "blob" の場合、これは関連付けられたメディア型がありません（Blob.type は "" です）.
origin 読取専用

文字列で、メッセージ送信者のオリジンを表します。

MessageEvent インターフェイスのその他のプロパティは存在しますが、 WebSocket API には関係ないため、既定値のままにしています。

例

js
// WebSocket 接続を作成
const socket = new WebSocket("ws://localhost:8080");

// メッセージを待ち受け
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});

仕様書

Specification
WebSockets
# dom-websocket-onmessage

ブラウザーの互換性

関連情報