微信小程序 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的链接不是以http或https开头的，而是以ws和wss开头的，这里需要注意一下。

实例：实时显示交易信息

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

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

添加stock页面：

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

  //接收数据
  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本地请求的，这里大家要注意一下。

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

# 微信小程序  # WebSocket  # WebSocket详解及实例  # php使用websocket示例详解  # Javascript WebSocket使用实例介绍（简明入门教程）  # Nginx反向代理websocket配置实例  # Python通过websocket与js客户端通信示例分析  # 使用Java和WebSocket实现网页聊天室实例代码  # Java后端Tomcat实现WebSocket实例教程  # Android中使用WebSocket实现群聊和消息推送功能(不使用WebView)  # 让ie6也支持websocket采用flash封装实现  # Spring和Websocket相结合实现消息的推送  # 完美解决spring websocket自动断开连接再创建引发的问题  # JavaScript之WebSocket技术详解  # 浅析nodejs实现Websocket的数据接收与发送  # 使用swoole扩展php websocket示例  # php中使用websocket详解  # php+html5基于websocket实现聊天室的方法  # 详解WebSocket+spring示例demo（已使用sockJs库）  # C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析  # HTML5 WebSocket技术使用详解  # 回调  # 万元  # 必填  # 是一个  # 我是  # 就会  # 就像  # 的说  # 并在  # 我用  # 要注意  # 希望能  # 想了  # 很不错  # 不支持  # 谢谢大家  # 介绍一下  # 来实现  # 类似于  # 很方便 

相关文章： 如何在云主机快速搭建网站站点？  C++中引用和指针有什么区别？（代码说明）  建站10G流量真的够用吗？如何应对访问高峰？  网站制作免费,什么网站能看正片电影？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  内网网站制作软件,内网的网站如何发布到外网？  如何用免费手机建站系统零基础打造专业网站？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  建站主机是否属于云主机类型？  定制建站是什么？如何实现个性化需求？  香港服务器WordPress建站指南：SEO优化与高效部署策略  英语简历制作免费网站推荐,如何将简历翻译成英文？  Android滚轮选择时间控件使用详解  网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？  b2c电商网站制作流程,b2c水平综合的电商平台？  宝塔新建站点报错如何解决？  seo网站制作优化,网站SEO优化步骤有哪些？  东莞专业制作网站的公司,东莞大学生网的网址是什么？  ,在苏州找工作，上哪个网站比较好？  php json中文编码为null的解决办法  寿县云建站：智能SEO优化与多行业模板快速上线指南  建站三合一如何选？哪家性价比更高？  专业网站制作企业网站,如何制作一个企业网站，建设网站的基本步骤有哪些？  太平洋网站制作公司,网络用语太平洋是什么意思？  如何高效配置香港服务器实现快速建站？  建站之星北京办公室：智能建站系统与小程序生成方案解析  如何通过VPS建站无需域名直接访问？  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  佛山企业网站制作公司有哪些,沟通100网上服务官网？  Python多线程使用规范_线程安全解析【教程】  如何在七牛云存储上搭建网站并设置自定义域名？  广平建站公司哪家专业可靠？如何选择？  如何选择高效可靠的多用户建站源码资源？  c# 在ASP.NET Core中管理和取消后台任务  如何在云主机上快速搭建多站点网站？  兔展官网 在线制作,怎样制作微信请帖？  建站上传速度慢？如何优化加速网站加载效率？  成都网站制作公司哪家好,四川省职工服务网是做什么用？  如何快速搭建虚拟主机网站？新手必看指南  ,sp开头的版面叫什么？  建站之星代理如何优化在线客服效率？  定制建站平台哪家好？企业官网搭建与快速建站方案推荐  如何在局域网内绑定自建网站域名？  javascript中的try catch异常捕获机制用法分析  C++如何使用std::optional？（处理可选值）  如何用低价快速搭建高质量网站？  如何快速登录WAP自助建站平台？  如何通过VPS搭建网站快速盈利？  建站主机无法访问？如何排查域名与服务器问题  建站之星如何防范黑客攻击与数据泄露？