前端如何接收 websocket 發送過來的實時數據

　　WebSocket protocol 是HTML5一種新的協議，它實現了瀏覽器與服務器全雙工通信(full-duple)。剛開始的握手需要借助HTTP請求完成，在 WebSocket API，瀏覽器和服務器只需要做一個握手的動作，然后瀏覽器和服務器之間就形成了一條快速通道，兩者之間就直接可以數據互相傳送。

　　那么前端如何通過 JS 發出 http 請求，又應該如何處理請求結果呢？在 initSocket() 函數中我們新建了三個 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); }