WebSockets-接続を開く

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

接続が確立されると発生するイベントは、 onopen と呼ばれます。 Web Socket接続の作成は本当に簡単です。必要なのは、* WebSocketコンストラクター*を呼び出して、サーバーのURLを渡すだけです。

次のコードは、Web Socket接続を作成するために使用されます-

//Create a new WebSocket.
var socket = new WebSocket('ws://echo.websocket.org');

接続が確立されると、Web Socketインスタンスでopenイベントが発生します。

*onopen* は、クライアントとサーバー間の最初のハンドシェイクを指します。これは最初の取引につながり、Webアプリケーションはデータを送信する準備ができています。

次のコードスニペットは、Web Socketプロトコルの接続を開くことを説明しています-

socket.onopen = function(event) {
   console.log(“Connection established”);
  //Display user friendly messages for the successful establishment of connection
   var.label = document.getElementById(“status”);
   label.innerHTML = ”Connection established”;
}

Webソケット接続の確立を待っているユーザーに適切なフィードバックを提供することをお勧めします。ただし、Web Socket接続は比較的高速であることに常に注意してください。

確立されたWebソケット接続のデモは、次のURLに記載されています-https://www.websocket.org/echol

接続の確立とユーザーへの応答のスナップショットを以下に示します-

スナップショット

オープン状態を確立すると、接続が終了するまで全二重通信とメッセージの転送が可能になります。

例

クライアントHTML5ファイルを作成します。

<!DOCTYPE html>
<html>
   <meta charset = "utf-8"/>
   <title>WebSocket Test</title>

   <script language = "javascript" type = "text/javascript">
      var wsUri = "ws://echo.websocket.org/";
      var output;

      function init() {
         output = document.getElementById("output");
         testWebSocket();
      }

      function testWebSocket() {
         websocket = new WebSocket(wsUri);

         websocket.onopen = function(evt) {
            onOpen(evt)
         };
      }

      function onOpen(evt) {
         writeToScreen("CONNECTED");
      }

      window.addEventListener("load", init, false);

   </script>

   <h2>WebSocket Test</h2>
   <div id = "output"></div>

</html>

出力は次のようになります-

接続済み

上記のHTML5およびJavaScriptファイルは、Web Socketの2つのイベントの実装を示しています。

JavaScriptオブジェクトの作成と接続の初期化に役立つ onLoad 。
onOpen はサーバーとの接続を確立し、ステータスも送信します。

Websockets-opening-connections

WebSockets-接続を開く

例