WebSockets-イベントとアクション

クライアント間の通信のために、クライアントからサーバーへの接続を初期化する必要があります。接続を初期化するには、リモートサーバーまたはローカルサーバーでURLを使用してJavaScriptオブジェクトを作成する必要があります。

var socket = new WebSocket(“ ws://echo.websocket.org ”);

上記のURLは、テストと実験に使用できるパブリックアドレスです。 websocket.orgサーバーは常に稼働しており、メッセージを受信してクライアントに送り返します。

これは、アプリケーションが正しく機能することを保証するための最も重要なステップです。

Webソケット-イベント

4つのメインWebソケットAPI *イベント*があります-

Open
メッセージ
閉じる
エラー

各イベントは、それぞれ onopen、onmessage 、 onclose 、 onerror 関数などの関数を実装することで処理されます。 addEventListenerメソッドの助けを借りて実装することもできます。

イベントと機能の簡単な概要は次のとおりです-

Open

クライアントとサーバーの間で接続が確立されると、Web Socketインスタンスからopenイベントが発生します。これは、クライアントとサーバー間の最初のハンドシェイクとして呼び出されます。接続が確立されると発生するイベントは、 onopen と呼ばれます。

メッセージ

通常、メッセージイベントは、サーバーがデータを送信するときに発生します。サーバーからクライアントに送信されるメッセージには、プレーンテキストメッセージ、バイナリデータ、または画像を含めることができます。データが送信されるたびに、 onmessage 関数が起動されます。

閉じる

Closeイベントは、サーバーとクライアント間の通信の終了を示します。接続を閉じるには、 onclose イベントを使用します。 onclose イベントを使用して通信の終了をマークした後、サーバーとクライアントの間でメッセージをさらに転送することはできません。接続が不十分なために、イベントを閉じることもできます。

エラー

通信中に発生する何らかの誤りのエラーマーク。 onerror イベントの助けを借りてマークされます。 Onerror の後には常に接続の終了が続きます。各イベントの詳細な説明については、以降の章で説明します。

Webソケット-アクション

イベントは通常、何かが発生したときにトリガーされます。一方、ユーザーが何かをしたいときにアクションが取られます。アクションは、ユーザーによる関数を使用した明示的な呼び出しによって行われます。

Web Socketプロトコルは、2つの主要なアクションをサポートしています-

send（）
閉じる（）

送信（）

通常、このアクションは、テキストファイル、バイナリデータ、または画像を含むメッセージの送信を含むサーバーとの通信に適しています。

send（）アクションの助けを借りて送信されるチャットメッセージは次のとおりです-

//get text view and button for submitting the message
var textsend = document.getElementById(“text-view”);
var submitMsg = document.getElementById(“tsend-button”);

//Handling the click event
submitMsg.onclick = function ( ) {
  //Send the data
   socket.send( textsend.value);
}

注-メッセージの送信は、接続が開いている場合にのみ可能です。

閉じる（）

この方法は、さよならハンドシェイクの略です。接続を完全に終了し、接続が再確立されるまでデータを転送できません。

var textsend = document.getElementById(“text-view”);
var buttonStop = document.getElementById(“stop-button”);

//Handling the click event
buttonStop.onclick = function ( ) {
  //Close the connection if open
   if (socket.readyState === WebSocket.OPEN){
      socket.close( );
   }
}

次のコードスニペットの助けを借りて意図的に接続を閉じることも可能です-

socket.close(1000,”Deliberate Connection”);

Websockets-events-actions

目次