微信小程序 WebSocket详解及应用


Posted in Javascript onJanuary 21, 2017

微信小程序 WebSocket

实例效果:

微信小程序 WebSocket详解及应用

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

WebSocket是什么(简述)

微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做为一个新的Socket在B/S上使用,它实现了浏览器与服务器全双工通信。

因为这里是做小程序,所以就不对WebSocket的底层和协议做过多的说明了,只是稍微介绍一下。想了解详细的WebSocket可以参考如下:WebSocket 协议

WebSocket与Ajax 的选择

WebSocket出来之前,实现即时通讯通常使用Ajax来实现,而Ajax是通过轮询的方式进行实时数据的获取,轮询就是在指定的时间间隔内,进行HTTP 请求来获取数据,而这种方式会产生一些弊端,一方面产生过多的HTTP请求,占用带宽,增大服务器的相应,浪费资源,另一方面,因为不是每一次请求都会有数据变化(就像聊天室),所以就会造成请求的利用率低。

WebSocket正好能够解决上面的弊端,WebSocket是客户端与服务器之前专门建立一条通道,请求也只请求一次,而且可以从同道中实时的获取服务器的数据,所以当应用到实时的应用上时,WebSocket是一个很不错的选择。

WebSocket协议名

WebSocket的链接不是以httphttps开头的,而是以wswss开头的,这里需要注意一下。

实例:实时显示交易信息

这里类似于实时查看股票信息,这里用到了图表插件wxchart:wxchart插件地址:插件下载

基本说的差不多了,正式开始。

添加stock页面:

微信小程序 WebSocket详解及应用

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

修改stock.wxml

微信小程序 WebSocket详解及应用

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',
   })
  })

  //接收数据
  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接收到的数据
      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连接失败!');
  })
 },
})

这里WebSocket的地址是ws://localhost,端口是12345,连接成功后,向服务器发送stock,然后服务器向小程序提供数据信息。

WebSocket的服务器端我是用PHP写的,这里贴一下,大家可以参考一下:

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

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

            //模拟数据
            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写WebSocket稍微有些麻烦,懂Node.js的可用Node.js写一下,Node.js写后端的WebSocket很方便。

上面用到的WebSocket.php代码:代码下载

微信WebSocketAPI参数说明wx.connectSocket(OBJECT)

参数 类型 必填 说明
url String 开发者服务器接口地址,必须是 wss 协议,且域名必须是后台配置的合法域名
data Object 请求的数据
header Object HTTP Header , header 中不能设置 Referer
method String 默认是GET,有效值为: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

wx.onSocketOpen(CALLBACK)

监听WebSocket连接打开事件。

wx.onSocketError(CALLBACK)

监听WebSocket错误。

wx.sendSocketMessage(OBJECT)

通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。

参数 类型 必填 说明
data String/ArrayBuffer 需要发送的内容
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

监听WebSocket接受到服务器的消息事件。

参数 类型 说明
data String/ArrayBuffer 服务器返回的消息

关闭WebSocket连接。

wx.onSocketClose(CALLBACK)

监听WebSocket关闭。

关于localhost

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 #Javascript
遍历json获得数据的几种方法小结
Jan 21 #Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 #Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 #Javascript
微信小程序 devtool隐藏的秘密
Jan 21 #Javascript
JS设置CSS样式的方式汇总
Jan 21 #Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 #Javascript
You might like
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python标准库OS模块详解
2020/03/10 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
求职自荐信格式
2013/12/04 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
会计工作心得体会
2014/01/13 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
小小的船教学反思
2014/02/21 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
公司活动方案范文
2014/03/06 职场文书
班组拓展活动方案
2014/08/14 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
病人慰问信范文
2015/02/15 职场文书
对学校的意见和建议
2015/06/04 职场文书
灵魂歌王观后感
2015/06/17 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript