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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
message event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報