微信小程序WebSocket协议说明及使用示例分享

WebSocket 协议

WebSocket与Ajax 的选择

在WebSocket出来之前，实现即时通讯通常使用Ajax来实现，而Ajax是通过轮询的方式进行实时数据的获取，轮询就是在指定的时间间隔内，进行HTTP 请求来获取数据，而这种方式会产生一些弊端，一方面产生过多的HTTP请求，占用带宽，增大服务器的相应，浪费资源，另一方面，因为不是每一次请求都会有数据变化（就像聊天室），所以就会造成请求的利用率低。
而WebSocket正好能够解决上面的弊端，WebSocket是客户端与服务器之前专门建立一条通道，请求也只请求一次，而且可以从同道中实时的获取服务器的数据，所以当应用到实时的应用上时，WebSocket是一个很不错的选择。

WebSocket协议名

WebSocket的链接不是以http或https开头的，而是以ws和wss开头的，这里需要注意一下。
实例：实时显示交易信息

这里类似于实时查看股票信息，这里用到了图表插件wxchart。

wxchart插件地址：

基本说的差不多了，正式开始。
添加stock页面：

stock.js代码：

// pages/stock/stock.js
//加载插件
var wxCharts = require(&＃39;wxcharts.js&＃39;);

Page({
  data: {},

  onLoad: function (options) {

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

    //连接成功
    wx.onSocketOpen(function() {
      wx.sendSocketMessage({
        data: &＃39;stock&＃39;,
      })
    })

    //接收数据
    wx.onSocketMessage(function(data) {
      var objData = JSON.parse(data.data);
      console.log(data);
        new wxCharts({
          canvasId: &＃39;lineCanvas&＃39;,//指定canvas的id
          animation: false,
          type: &＃39;line&＃39;,//类型是线形图
          categories: [&＃39;2012&＃39;, &＃39;2013&＃39;, &＃39;2014&＃39;, &＃39;2015&＃39;, &＃39;2016&＃39;, &＃39;2017&＃39;],

          series: [{
            name: &＃39;交易量&＃39;,
            data: objData,//websocket接收到的数据
            format: function (val) {
              if (typeof val == "string") {
                val = parseFloat(val);
              }
              return val.toFixed(2) + &＃39;万元&＃39;;
            }
          },
          ],
          yAxis: {
            title: &＃39;交易金额 (万元)&＃39;,
            format: function (val) {
              return val.toFixed(2);
            },
            min: 0
          },
          width: 320,
          height: 200
        });      
    })

    //连接失败
    wx.onSocketError(function() {
      console.log(&＃39;websocket连接失败！&＃39;);
    })
  },
})

这里WebSocket的地址是ws://localhost，端口是12345，连接成功后，向服务器发送stock，然后服务器向小程序提供数据信息。
WebSocket的服务器端我是用PHP写的，这里贴一下，大家可以参考一下：

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);

                    //请求为stock时，向通道内推送数据
                    if ($buffer == &＃39;stock&＃39;) {
                        $arr = array();

                        //模拟数据
                        for ($i=0; $i <6; $i++) { 
                            $arr[] = rand(1, 100) / 100;
                        }

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

$s = new WebSocket2(&＃39;localhost&＃39;, 12345);
$s -> run();

用PHP写WebSocket稍微有些麻烦，懂Node.js的可用Node.js写一下，Node.js写后端的WebSocket很方便。

实例效果：

这里说明一下localhost，上述代码中我用到了localhost的本地请求，这里只是占位使用，在程序编写中是不支持localhost本地请求的，这里大家要注意一下。

以上就是微信小程序WebSocket协议说明及使用示例分享的详细内容，更多请关注 第一PHP社区 其它相关文章！