微信小程序 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技术使用详解  # 回调  # 万元  # 必填  # 是一个  # 我是  # 就会  # 就像  # 的说  # 并在  # 我用  # 要注意  # 希望能  # 想了  # 很不错  # 不支持  # 谢谢大家  # 介绍一下  # 来实现  # 类似于  # 很方便 

相关文章： 如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？  如何用VPS主机快速搭建个人网站？  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  重庆市网站制作公司,重庆招聘网站哪个好？  网页设计网站制作软件,microsoft office哪个可以创建网页？  北京的网站制作公司有哪些,哪个视频网站最好？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  建站VPS配置与SEO优化指南：关键词排名提升策略  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  宁波免费建站如何选择可靠模板与平台？  南宁网站建设制作定制,南宁网站建设可以定制吗？  定制建站策划方案_专业建站与网站建设方案一站式指南  建站之星导航如何优化提升用户体验？  佛山网站制作系统,佛山企业变更地址网上办理步骤？  宝塔新建站点为何无法访问？如何排查？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  模具网站制作流程,如何找模具客户？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  内网网站制作软件,内网的网站如何发布到外网？  SQL查询语句优化的实用方法总结  营销式网站制作方案,销售哪个网站招聘效果最好？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  建站ABC备案流程中有哪些关键注意事项？  网站制作模板下载什么软件,ppt模板免费下载网站？  如何在Tomcat中配置并部署网站项目？  建站之星后台密码遗忘或太弱？如何重置与强化？  济南企业网站制作公司,济南社保单位网上缴费步骤？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  台州网站建设制作公司,浙江手机无犯罪记录证明怎么开？  建站之星客服服务时间及联系方式如何？  建站之星代理如何优化在线客服效率？  如何彻底删除建站之星生成的Banner？  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  建站之星后台管理系统如何操作？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  山东云建站价格为何差异显著？  如何选择高效稳定的ISP建站解决方案？  网站企业制作流程,用什么语言做企业网站比较好？  建站之星备案是否影响网站上线时间？  网站网页制作专业公司,怎样制作自己的网页？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  建站之星24小时客服电话如何获取？  高端网站建设与定制开发一站式解决方案 中企动力  建站中国必看指南：CMS建站系统+手机网站搭建核心技巧解析  建站之星与建站宝盒如何选择最佳方案？  建站VPS推荐：2025年高性能服务器配置指南  手机网站制作与建设方案,手机网站如何建设？  制作电商网页,电商供应链怎么做？