フロントエンドはwebsocketから送信されたリアルタイムデータをどのように受信しますか?

WebSocket protocolは、ブラウザとサーバのフルデュプレクス通信(full-duple)を実現するHTML 5の新しいプロトコルです.最初の握手はHTTPリクエストで完了する必要があり、WebSocket APIではブラウザとサーバが握手の動作をするだけで、ブラウザとサーバの間に高速チャネルが形成され、両者の間に直接データが転送されます.
では、フロントエンドはどのようにJSを通じてhttpリクエストを発行し、リクエスト結果をどのように処理すればいいのでしょうか.InitSocket()関数では、3つのWebsocketオブジェクトを新規作成し、これらのWebsocketオブジェクトの組み込み関数を呼び出すことで、データの要求と受信を実現します.

initSocket();
function initSocket(){
  webSocket = new WebSocket('ws://'+window.location.host+'/header_soc');
  imageSocket = new WebSocket('ws://'+window.location.host+'/capture_soc');
  flashSocket = new WebSocket('ws://'+window.location.host+'/live_soc');
  //webSocket   
  webSocket.onerror = function (event) {
      onError(event);
  };
  webSocket.onopen = function (event) {
      onOpen(event);
  };
  webSocket.onmessage = function (event) {
      onMessage(event);
  };
  //imageSocket   
  imageSocket.onerror = function (event) {
      onError(event);
  };
  imageSocket.onopen = function (event) {
      onOpenImg(event);
  };
  imageSocket.onmessage = function (event) {
      onMessageImg(event);
  };
  //flashSocket   
  flashSocket.onerror = function (event) {
      onError(event);
  };
  flashSocket.onopen = function (event) {
      onOpenFlash(event);
  };
  flashSocket.onmessage = function (event) {
      onMessageFlash(event);
  };
}

それから相応の関数を定義して、httpの要求が発生して、データを受信した後に印刷してデータのフォーマットを見て、そして処理を行います

function onError(event){

}
function onOpen(event){
    webSocket.send();//                 
}
function onMessage(event){
    console.log(event);
}