微信小程序 WebSocket

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的浮梁網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

實(shí)例效果：

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

WebSocket是什么（簡(jiǎn)述）

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

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

WebSocket與Ajax 的選擇

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

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

WebSocket協(xié)議名

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

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

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

基本說(shuō)的差不多了，正式開(kāi)始。

添加stock頁(yè)面：

將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) + '萬(wàn)元';
      }
     },
     ],
     yAxis: {
      title: '交易金額 (萬(wàn)元)',
      format: function (val) {
       return val.toFixed(2);
      },
      min: 0
     },
     width: 320,
     height: 200
    });   
  })

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

這里WebSocket的地址是ws://localhost，端口是12345，連接成功后，向服務(wù)器發(fā)送stock，然后服務(wù)器向小程序提供數(shù)據(jù)信息。

WebSocket的服務(wù)器端我是用PHP寫(xiě)的，這里貼一下，大家可以參考一下：

<?php
include 'WebSocket.php';

class WebSocket2 extends WebSocket{
  public function run(){
     while(true){
     $socketArr = $this->sockets;
     $write = NULL;
     $except = NULL;
     socket_select($socketArr, $write, $except, NULL);
     foreach ($socketArr as $socket){
      if ($socket == $this->master){
       $client = socket_accept($this->master);
       if ($client < 0){
        $this->log("socket_accept() failed");
        continue;
       }else{
        $this->connect($client);
       }
      }
      else{
       $this->log("----------New Frame Start-------");
       $bytes = @socket_recv($socket,$buffer,2048,0);
       if ($bytes == 0){
        $this->disconnect($socket);
       }else{
        $user = $this->getUserBySocket($socket);
        if (!$user->handshake){
         $this->doHandShake($user, $buffer);
        }else{
          $buffer = $this->unwrap($user->socket, $buffer);

          //請(qǐng)求為stock時(shí)，向通道內(nèi)推送數(shù)據(jù)
          if ($buffer == 'stock') {
            $arr = array();

            //模擬數(shù)據(jù)
            for ($i=0; $i < 6; $i++) { 
              $arr[] = rand(1, 100) / 100;
            }

            $this->send($user->socket, json_encode($arr));
          }
        }
       }
      }
     }
    }
  }
}

$s = new WebSocket2('localhost', 12345);
$s -> run();

用PHP寫(xiě)WebSocket稍微有些麻煩，懂Node.js的可用Node.js寫(xiě)一下，Node.js寫(xiě)后端的WebSocket很方便。

上面用到的WebSocket.php代碼：代碼下載

微信WebSocketAPI參數(shù)說(shuō)明wx.connectSocket(OBJECT)

wx.onSocketOpen(CALLBACK)

監(jiān)聽(tīng)WebSocket連接打開(kāi)事件。

wx.onSocketError(CALLBACK)

監(jiān)聽(tīng)WebSocket錯(cuò)誤。

wx.sendSocketMessage(OBJECT)

通過(guò) WebSocket 連接發(fā)送數(shù)據(jù)，需要先 wx.connectSocket，并在 wx.onSocketOpen 回調(diào)之后才能發(fā)送。

監(jiān)聽(tīng)WebSocket接受到服務(wù)器的消息事件。

關(guān)閉WebSocket連接。

wx.onSocketClose(CALLBACK)

監(jiān)聽(tīng)WebSocket關(guān)閉。

關(guān)于localhost

這里說(shuō)明一下localhost，上述代碼中我用到了localhost的本地請(qǐng)求，這里只是占位使用，在程序編寫(xiě)中是不支持localhost本地請(qǐng)求的，這里大家要注意一下。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

網(wǎng)站標(biāo)題：微信小程序WebSocket詳解及應(yīng)用
轉(zhuǎn)載來(lái)于：http://sd-ha.com/article44/gcjche.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作、Google、商城網(wǎng)站、微信公眾號(hào)

廣告

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