微信小程序中websocket獲取實時數據

引言:

WebSocket 是H5提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據傳輸。

在 WebSocket API 中,瀏覽器和服務器只需要做一個握手的動作,然後,瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在,很多網站爲了實現推送技術,所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務器發出HTTP請求,然後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點,即瀏覽器需要不斷的向服務器發出請求,然而HTTP請求可能包含較長的頭部,其中真正有效的數據可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。

H5定義的 WebSocket 協議,能更好的節省服務器資源和帶寬,並且能夠更實時地進行通訊。

說明:爲了更好的還原原文所表達的意思,我沒有用自己的大白話去修改壓縮內容,我怕理解有誤可能會帶偏了讀者,所有多數內容來自菜鳥教程

一、關於websocket:

瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求,連接建立以後,客戶端和服務器端就可以通過 TCP 連接直接交換數據。

當你獲取 Web Socket 連接後,你可以通過 send() 方法來向服務器發送數據,並通過 onmessage 事件來接收服務器返回的數據。以下 API 用於創建 WebSocket 對象:

var Socket = new WebSocket(url, [protocol] );

相關文章參考額:

二、微信小程序中的websocket:

           //建立websocket連接
          wx.connectSocket({
            //下面的url純屬假的,真實的需要自己去加
            url: `ws://125.88.204.226:950/fawebsocket/156813789/${arr}`,
          })

          //連接成功
          wx.onSocketOpen(function() {
            wx.sendSocketMessage({
              data: 'stock',
            })
          })

          //接收數據
          wx.onSocketMessage(function(data) {
            if (data.data === "連接成功" || data.data == "stock") {
              console.log(data.data);
              return false
            } else {
              var objData = JSON.parse(data.data);
              // console.log(data);
              // console.log(data.data);
              console.log(typeof(objData));
            }

          })

          //連接失敗
          wx.onSocketError(function() {
            console.log('websocket連接失敗!');
          })

          //斷開連接
          wx.onSocketClose(function(res) {
            console.log('WebSocket 已關閉!')
          })

實時數據刷新如下(每秒刷新一次):

三、學術參考:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章