小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。这是关于小程序websocket之旅。websocket是html5定义的一种新协议，原理就是在客户端(浏览器)和服务器之间建立一条专用通道连接，二者可以实时通信，类似于我们日常里的打电话一样。

微信小程序

一个小栗子

以实现一个股票走势图的功能为例，我们都知道股票这个东西的实时性和准确性是很重要的，一般可以使用ajax轮询（setinterval函数）的方式来解决，可以每半秒轮询一次数据接口，再渲染页面视图。但是这个方式是有一些缺点的，比如，浏览器要时刻不断的向服务器发送数据请求并且接受数据，这样很消耗带宽，还很容易把服务器给搞卡死了。
对于websocket技术来说，客户端就与服务器之间建立了一个专用通道，他们之间的数据通信就不需要轮询可以一直进行数据交互，服务器不再是被动的返回数据，而是有了新数据之后就会主动的推送给客户端。websocket很适合对实时性要求的场景，实时性不高还是用ajax就可以实现了。

快速生成标准文件

以charts为例，只需要在app.json文件下添加路劲，保存之后就会自动生成文件夹。

<!-- app.json文件 -->

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/charts/charts"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

前期准备

1、小栗子试图插件

图表类的插件一般就是echarts和highcharts,而在小程序里，我们可以使用wxcharts,wxcharts的实现方式是canvas,小程序本身也是支持的。把js文件放到charts文件下，下载链接

2、数据接口支持

这里的数据支持使用的是Nodejs，还要了解一下websocket,它其实就是web版的socket技术。因为浏览器支持的javascript语言并不支持socket，所以在html5技术标准中新添加了这项特性。用通俗的话语解释就是：socket其实就是在浏览器和服务端各开辟一个专门的端口，双方都监听这个端口，然后互相发送和接收数据。

Nodejs有个插件封装了socket，叫nodejs-websocket。使用npm安装一下:
npm install nodejs-websocket

1
2
3

➜  ~ npm i nodejs-websocket -g
/usr/local/lib
└── nodejs-websocket@1.7.1

server.js

var ws = require('nodejs-websocket');

// 创建server

var server = ws.createServer(function(conn){
    conn.on("text",function(str){ // 监听文本输入
        if (str == "stock") {
            setInterval(function(){
                var arr=[];
                for (let i = 0; i < 6; i++) {
                    var count = (Math.ceil((Math.random()*100))/100).toFixed(2);
                    arr.push(count)
                }
                var obj = {data:arr}
                conn.send(JSON.stringify(obj))
            },2000);
        }
    })
}).listen(8000)

websocket建立专用通道后，服务端只要监听到客户端发来的文本内容是”stock”,就每隔2s修改一次数据，修改后的数据，客户端（浏览器）马上就会监听到，利用这种方式来模拟股票数据的变化。

注意

利用webstorm的run或使用命令行运行脚本后，websocket的协议是ws协议和wss协议。
ws就相当于http，wss就相当于https，所以正确的写法应该是：ws://localhost:8000

微信客户端

使用websocket很容易，主要就是你这几个步骤：

建立连接
发送数据
接收数据
结束

charts.js

// pages/charts/charts.js
var wxCharts = require('wxcharts.js');
Page({
  data: {},
  onLoad: function (options) {
    // var data1 = [0.15, 0.2, 0.45, 0.37, 0.4, 0.8];
    // var data2 = [0.30, 0.37, 0.65, 0.78, 0.69, 0.94];

    //建立连接
    wx.connectSocket({
      url: 'ws://localhost:8000',//这里连接的就是服务端的socket

    });
    //连接成功监听
    wx.onSocketOpen(function (res) {
      //发送信息
      wx.sendSocketMessage({
        data: "stock"
      });
      console.log('WebSocket连接已打开！')
    });
    //连接失败监听
    wx.onSocketError(function (res) {
      console.log('WebSocket连接打开失败，请检查！')
    });
    //接收数据
    wx.onSocketMessage(function (res) {
      //收到的信息
      console.log('收到服务器内容：' + res.data);
      var obj = JSON.parse(res.data);
      console.log(obj);
      //绘制图表，利用canvas绘图技术。
      new wxCharts({
        canvasId: 'lineCanvas',//指定canvas的id
        type: 'line',//类型是线形图
        categories: ['2012', '2013', '2014', '2015', '2016', '2017'],

        series: [{
          name: '成交量1',
          data: obj.data,//websocket接收到的数据
          format: function (val) {
            if (typeof val == "string") {
              val = parseFloat(val);
            }
            return val.toFixed(2) + '万';
          }
        },
        {
          name: '成交量2',
          data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
          format: function (val) {
            return val.toFixed(2) + '万';
          }
        }],
        yAxis: {
          title: '成交金额 (万元)',
          format: function (val) {
            return val.toFixed(2);
          },
          min: 0
        },
        width: 320,
        height: 200
      });
    });


  }

})

charts.wxml:

1
2
3

<!--pages/charts/charts.wxml-->
<canvas style="width: 100%; height: 200px;border:1px solid #ccc;" canvas-id="lineCanvas">
</canvas>

websocket请

看下控制台，只有一次请求而已，没有像轮询那样一坨一坨的发请求了。
下面通过控制台，看下websocket请求的特征：

websocket请