JSにおけるwebsocket双方向通信

webSocket
WebSocketはネットワーク通信プロトコルです
WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである
WebSocketはhttpプロトコルと同様にTCPベースであるため,いずれも信頼できるプロトコルであり,Web開発者が呼び出したWebSocketのsend関数はbrowserの実装において最終的にTCPのシステムインタフェースを介して伝送される.WebSocketはHttpプロトコルと同様にアプリケーション層に属するプロトコルである

    var ws = new WebSocket("wss://echo.websocket.org");

    ws.onopen = function(evt) { 
      console.log("Connection open ..."); 
      ws.send("Hello WebSockets!");
    };

    ws.onmessage = function(evt) {
      console.log( "Received Message: " + evt.data);
      ws.close();
    };

    ws.onclose = function(evt) {
      console.log("Connection closed.");
    };      

webSocket.readyState
readyStateプロパティは、インスタンスオブジェクトの現在の状態を4つ返します.

    CONNECTING：  0，      。
    OPEN：  1，      ，     。
    CLOSING：  2，        。
    CLOSED：  3，        ，        。

次に例を示します.

    switch (ws.readyState) {
      case WebSocket.CONNECTING:
        // do something
        break;
      case WebSocket.OPEN:
        // do something
        break;
      case WebSocket.CLOSING:
        // do something
        break;
      case WebSocket.CLOSED:
        // do something
        break;
      default:
        // this never happens
        break;
    }

webSocket.onopen
インスタンスオブジェクトのonopenプロパティ.接続に成功したコールバック関数を指定します.
ws.onopen = function () { ws.send('Hello Server!'); } 複数のコールバック関数を指定する場合は、addEventListenerメソッドを使用します.
ws.addEventListener('open', function (event) { ws.send('Hello Server!'); });
webSocket.onclose
インスタンスオブジェクトのoncloseプロパティ.接続が閉じたコールバック関数を指定します.

    ws.onclose = function(event) {
      var code = event.code;
      var reason = event.reason;
      var wasClean = event.wasClean;
      // handle close event
    };

    ws.addEventListener("close", function(event) {
      var code = event.code;
      var reason = event.reason;
      var wasClean = event.wasClean;
      // handle close event
    });

webSocket.onmessage
インスタンス・オブジェクトのonmessageプロパティ.サーバ・データを受信したコールバック関数を指定します.

    ws.onmessage = function(event) {
      var data = event.data;
      //     
    };

    ws.addEventListener("message", function(event) {
      var data = event.data;
      //     
    });

サーバデータは、テキストまたはバイナリデータ(blobオブジェクトまたはArraybufferオブジェクト)である可能性があります.

    ws.onmessage = function(event){
      if(typeof event.data === String) {
        console.log("Received data string");
      }

      if(event.data instanceof ArrayBuffer){
        var buffer = event.data;
        console.log("Received arraybuffer");
      }
    }

受信したデータ型を動的に判断するほか、binaryTypeプロパティを使用して、受信したバイナリデータ型を明示的に指定することもできます.

    //      blob   
    ws.binaryType = "blob";
    ws.onmessage = function(e) {
      console.log(e.data.size);
    };

    //      ArrayBuffer   
    ws.binaryType = "arraybuffer";
    ws.onmessage = function(e) {
      console.log(e.data.byteLength);
    };

webSocket.send()
インスタンスオブジェクトのsend()メソッドは、サーバにデータを送信するために使用されます.
テキストを送信する例.

    ws.send('your message');

Blobオブジェクトの送信例.

    var file = document
      .querySelector('input[type="file"]')
      .files[0];
    ws.send(file);

ArrayBufferオブジェクトの例を送信します.

    // Sending canvas ImageData as ArrayBuffer
    var img = canvas_context.getImageData(0, 0, 400, 320);
    var binary = new Uint8Array(img.data.length);
    for (var i = 0; i < img.data.length; i++) {
      binary[i] = img.data[i];
    }
    ws.send(binary.buffer);

webSocket.bufferedAmount
インスタンスオブジェクトのbufferedAmountプロパティは、バイナリデータが送信されていないバイト数を示します.送信が終了したかどうかを判断するために使用できます.

    var data = new ArrayBuffer(10000000);
    socket.send(data);

    if (socket.bufferedAmount === 0) {
      //     
    } else {
      //       
    }

webSocket.onerror
インスタンスオブジェクトのonerrorプロパティ.エラーを報告するときのコールバック関数を指定します.

    socket.onerror = function(event) {
      // handle error event
    };

    socket.addEventListener("error", function(event) {
      // handle error event
    });