vue項目使用websocket實現數據實時推送

寫了一個關於工程的項目，關於工地數據的實時監控 

1.后端要先寫好數據，將數據傳遞給前端

2.在前端頁面：

$(function(){ 
　var websocket = null;
   //判斷當前瀏覽器是否支持WebSocket
   if ('WebSocket' in window) {
       websocket = new WebSocket("ws://localhost:9999/guanXiangCamera/websocket"); // 后台給的地址
　　// 這里會傳遞一些數據，
   }else {
       alert('當前瀏覽器 Not support websocket')
   }
   //連接發生錯誤的回調方法
   websocket.onerror = function () {
       setMessageInnerHTML("WebSocket連接發生錯誤");
   };
   //連接成功建立的回調方法
   websocket.onopen = function () {
       //setMessageInnerHTML("WebSocket連接成功");
   }
   //接收到消息的回調方法
   websocket.onmessage = function (event) {
       setMessageInnerHTML(event.data);
   }
   //連接關閉的回調方法
   websocket.onclose = function () {
       //setMessageInnerHTML("WebSocket連接關閉");
   }
   //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
   window.onbeforeunload = function () {
       //closeWebSocket();
   }
   //將消息顯示在網頁上
   function setMessageInnerHTML(innerHTML) {
       document.getElementById('message').innerHTML += innerHTML + '<br/>';
   }
   //關閉WebSocket連接
   function closeWebSocket() {
       websocket.close();
   }
   //發送消息
   function send() {
       var message = "測試一下，看能不能發！"
       websocket.send(message);
   }
}

注意：有寫要求是一進去就要請求websocket返回數據的，或者是查看時再請求接口返回數據的。其實如果頁面只有一個請求還好，你離開頁面或者關閉時websocket接口並沒有斷開，這樣是使頁面加載數據變慢，造成不好的體驗

//關閉WebSocket連接
   function closeWebSocket() { //離開時一定要關閉
       websocket.close();
   }

這樣寫就可以拿到數據，當然要看后台多少時間給你推送數據，這樣頁面上的數據就可以實時更新了。

大概的內容就是這些，如有不足歡迎補充！