WebSocket.onmessage - メッセージを受信した時に発火するイベント
onmessageは、WebSocketのイベントです。ソケット通信でサーバー側からのメッセージを受信した時にopenイベントが発生し、ここに設定したコールバック関数が呼び出されます。
概要
- 名前
- onmessage
- 所属
- WebSocket
- イベント
- message
- IDL
attribute EventHandler onmessage; typedef EventHandlerNonNull? EventHandler; callback EventHandlerNonNull = any (Event event);
- 仕様書
- https://html.spec.whatwg.org/multipage/web-sockets.html#handler-websocket-onmessage
チュートリアル
onmessageでイベントを設定する例です。
var ws = new WebSocket( "wss://socket.syncer.jp/connect" ) ;
ws.onmessage = function ( event ) {
console.log( event ) ;
}
Event.addEventListener()でも、同様にイベントを設定できます。
ws.addEventListener( "message", function ( event ) {
console.log( event ) ;
} ) ;
デモ
WebSocketでのデモです。接続してから「送信」をクリックすると、メッセージの送信を実行します。デモのサーバーはエコーサーバーとなっていて、受信したのと同じデータをクライアント側に送り返します。そのため、クライアント側では送信と同時に同内容のメッセージを受診して、messageイベントが発生します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
input { width: 40% ; font-size: 16px ; }
</style>
</head>
<body>
<p>
<button id="hoge">接続</button>
<button id="fuga">切断</button>
</p>
<p>
<input id="data" value="SYNCER">
<button id="send">送信</button>
</p>
<hr>
<div id="result"></div>
<script>
var ws = null ;
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var element3 = document.getElementById( "send" ) ;
// 接続
element1.onclick = function () {
if ( ws && ws.readyState === 1 ) return false ;
ws = new WebSocket( "wss://socket.syncer.jp/connect" ) ;
ws.onopen = function() {
ws.onmessage = function( event ) {
console.log( event ) ;
logUpdate( event.data ) ;
}
ws.onclose = function() {
logUpdate( "通信を切断しました。" ) ;
}
}
}
// 切断
element2.onclick = function () {
if ( ws && ws.readyState === 1 ) ws.close() ;
}
// 送信
element3.onclick = function () {
ws.send( document.getElementById( "data" ).value ) ;
}
var logUpdate = function ( text, noDate ) {
var resultElement = document.getElementById( "result" ) ;
resultElement.textContent = text + ( noDate ? "" : "(" + new Date().toLocaleString() + ")" ) + "\n" + resultElement.textContent ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● 11+ | ● 5.1+ | ● | ● 10+ | ● 15+ | ● | ● 4.4+ |
関連記事
- WebSocket
- WebSocketは、Webサーバーとクライアント間でのソケット通信をするための機能を備えたインターフェイスです。
- WebSocket.send()
- send()は、WebSocketのメソッドです。ソケット通信で、クライアントからサーバーにデータを送信します。文字列だけではなく、バイナリデータ、Blobデータなど送信できます。
- WebSocket.onopen
- onopenは、WebSocketのイベントです。ソケット通信で接続が確立した時にopenイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- openイベント
- openイベントは、何らかを開いた時に発生するイベントです。