微信小程序 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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
JS实现换肤功能的方法实例详解
Jan 30 Javascript
vue组件入门知识全梳理
Sep 21 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 字符串 小常识
2009/06/05 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
微信支付的开发流程详解
2016/09/13 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
python读取Android permission文件
2013/11/01 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
python得到电脑的开机时间方法
2018/10/15 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
使用npy转image图像并保存的实例
2020/07/01 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
安全教育心得体会
2013/12/29 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
结婚保证书范文
2014/04/29 职场文书
法定代表人身份证明书
2014/09/10 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
DE1103使用报告
2022/04/05 无线电