微信小程序 WebSocket

專注于為中小企業(yè)提供成都網(wǎng)站制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)陽江免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

實(shí)例效果：

今天主要說一下微信的WebSocket接口以及在小程序中的使用。

WebSocket是什么（簡述）

微信的WebSocket接口和HTML5的WebSocket基本一樣，是HTTP協(xié)議升級來的，做為一個新的Socket在B/S上使用，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。

因?yàn)檫@里是做小程序，所以就不對WebSocket的底層和協(xié)議做過多的說明了，只是稍微介紹一下。想了解詳細(xì)的WebSocket可以參考如下：WebSocket 協(xié)議

WebSocket與Ajax 的選擇

在WebSocket出來之前，實(shí)現(xiàn)即時通訊通常使用Ajax來實(shí)現(xiàn)，而Ajax是通過輪詢的方式進(jìn)行實(shí)時數(shù)據(jù)的獲取，輪詢就是在指定的時間間隔內(nèi)，進(jìn)行HTTP 請求來獲取數(shù)據(jù)，而這種方式會產(chǎn)生一些弊端，一方面產(chǎn)生過多的HTTP請求，占用帶寬，增大服務(wù)器的相應(yīng)，浪費(fèi)資源，另一方面，因?yàn)椴皇敲恳淮握埱蠖紩袛?shù)據(jù)變化（就像聊天室），所以就會造成請求的利用率低。

而WebSocket正好能夠解決上面的弊端，WebSocket是客戶端與服務(wù)器之前專門建立一條通道，請求也只請求一次，而且可以從同道中實(shí)時的獲取服務(wù)器的數(shù)據(jù)，所以當(dāng)應(yīng)用到實(shí)時的應(yīng)用上時，WebSocket是一個很不錯的選擇。

WebSocket協(xié)議名

WebSocket的鏈接不是以http或https開頭的，而是以ws和wss開頭的，這里需要注意一下。

實(shí)例：實(shí)時顯示交易信息

這里類似于實(shí)時查看股票信息，這里用到了圖表插件wxchart：wxchart插件地址：插件下載

基本說的差不多了，正式開始。

添加stock頁面：

將wxchart.js放入到pages/stock/中。

修改stock.wxml：

stock.js代碼：

// pages/stock/stock.js
//加載插件
var wxCharts = require('wxcharts.js');

Page({
 data: {},

 onLoad: function (options) {

  //建立連接
  wx.connectSocket({
   url: "ws://localhost:12345",
  })

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

  //接收數(shù)據(jù)
  wx.onSocketMessage(function(data) {
   var objData = JSON.parse(data.data);
   console.log(data);
    new wxCharts({
     canvasId: 'lineCanvas',//指定canvas的id
     animation: false,
     type: 'line',//類型是線形圖
     categories: ['2012', '2013', '2014', '2015', '2016', '2017'],

     series: [{
      name: '交易量',
      data: objData,//websocket接收到的數(shù)據(jù)
      format: function (val) {
       if (typeof val == "string") {
        val = parseFloat(val);
       }
       return val.toFixed(2) + '萬元';
      }
     },
     ],
     yAxis: {
      title: '交易金額 (萬元)',
      format: function (val) {
       return val.toFixed(2);
      },
      min: 0
     },
     width: 320,
     height: 200
    });   
  })

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：微信小程序WebSocket詳解及應(yīng)用-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://chinadenli.net/article10/eoedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、服務(wù)器托管、外貿(mào)建站、網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)