websoctet初探

SaltAir發表於2018-03-16
今天是想分享一下關於websocket在nodejs裡面的相關實踐。

websocket相關的知識大家在搜尋引擎上一搜就可以看到非常多,包括成長過程,規範化,替代方案等等都有非常多的介紹,這些我就不介紹了,我會說一下我這次為什麼會用到websocket和一個簡單的demo。 我這次的業務場景是在頁面上展示幾臺不同的機器的實時執行資料,資料由機器上的感測器上傳到資料庫中,一般週期為5秒上傳一個新的資料,我的前端頁面也是這樣的一個週期用圖表的形式去展示這部分資料(這一部分跟感測器上傳資料的事件有些許延遲是沒有問題的),圖表展示用的是highcharts,我個人還是挺喜歡這個圖表庫的哈哈。然後順手在公司原有的highcharts封裝的基礎上又做了一個實時展示的封裝,之後再拿出來分享一下~ nodejs端我用的是ws的依賴,看了下github大概8000star,最近的維護時間是3天前,看起來還是挺靠譜的,用起來也比較順手,nodejs我用的express服務端渲染的方式來做。

nodejs程式碼
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
//……中間省略若干……
wss.on('connection', function connection(ws, req) {
   ws.on('message', function incoming(message) {
      //console.log('received: %s', message);
        //這裡我用了隨機數來模擬服務端的真實資料,事實上需要呼叫不同的介面來提供資料
        setInterval(function(){
            var a = parseInt(Math.random() * 20)
               ws.send(a);
        },1500)
   });
});
複製程式碼
前端程式碼
var ws1 = new WebSocket("ws://localhost:8080");

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

ws1.onmessage = function(evt) {
   //實驗用的input
   $('input').val(evt.data)
};
複製程式碼

然後在前端頁面上就按照制定間隔的不停變化inp裡面的資料。 這就可以了……????真的嗎。。。 當然不是啦,會用這個只能做出來業務啊喂,裡面深層次的東西還是要好好學習的啊喂?雖然沒有深究,最近也比較忙……還是整理了一些

推薦大家看一下這篇文章: WebSocket 是什麼原理?為什麼可以實現持久連線? - Ovear的回答 - 知乎 這裡面講的非常通俗易懂,也很容易明白,另外,順便安利一下其他替代方案

1、輪詢

這種方式是按照一定的時間間隔去傳送網路請求,場景再現就是

輪詢.png
這樣的網路開銷非常大,一是不停發請求,在網路情況不好的時候可能就比較慘不忍睹,二是需要伺服器有很快的處理速度和資源,有更好的方式為什麼還要用這種呢?

2、長輪詢

長輪詢是第二代的輪詢………………?大概是進化過的輪詢吧,這種方式是個阻塞I/O,長輪詢的原理是我發起了一個請求,如果確實有結果返回給我了那我就結束本次輪詢,接著發起一次新的輪詢;如果這次沒有結果,那麼我就掛起,一直等待伺服器給我一個結果為止,看起來很痴情啊喂。

長輪詢.png

3、websocket

這兩種都存在各種各樣的問題,這個時候就是websocket出場的時候啦啊哈哈哈

websocket
當我們用websocket建立connection之後,伺服器就可以源源不斷的將各種各樣的響應發到客戶端,建立了‘雙工通訊’,而且現在各大瀏覽器支援的也非常好(不要跟我提IE,前端應該放棄IE。。。。?)所以大家在遇到這樣需要伺服器頻繁向客戶都按發資料的時候可以考慮這種實現方式~