微信小程序入门六: WebSocket应用


实例内容

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


WebSocket是什么(简述)

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

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

WebSocket 协议


WebSocketAjax 的选择

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

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


WebSocket协议名

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


实例:实时显示交易信息

这里类似于实时查看股票信息,这里用到了图表插件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的idanimation: 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)

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

wx.onSocketOpen(CALLBACK)

监听WebSocket连接打开事件。

wx.onSocketError(CALLBACK)

监听WebSocket错误。

wx.sendSocketMessage(OBJECT)

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

参数类型必填说明
dataString/ArrayBuffer需要发送的内容
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

wx.onSocketMessage(CALLBACK)

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

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

wx.closeSocket()

关闭WebSocket连接。

wx.onSocketClose(CALLBACK)

监听WebSocket关闭。


关于localhost

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


博客名称:王乐平博客

博客地址:http://blog.lepingde.com

CSDN博客地址:http://blog.csdn.net/lecepin


这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401685.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

U盘 制作 win 7 64bit 旗舰版 安装盘

使用 软碟通 试用版的即可 打开 iso文件 -》写入磁盘映像 -》选择要做的U盘 -》done这个过程非常简单 百度里有很多 网站都是这个方法要制作 U盘 还有个工具 叫做 Windows7-USB-DVD-tool 这个可以制作 win7 win 2012 server的安装盘 我已经用过了 安装上就可以用 转载于…

一步一步实战HTML音乐播放器

在这里我用HTML5从头开始一步一步来制作一个简约的音乐播放器&#xff0c;大家可以参考一下&#xff0c;接下来正式开始。 音乐播放器效果 播放器分析 这里将播放器分两块来做&#xff1a; 视图层&#xff08;html css&#xff09;逻辑层 ( js ) 视图层分析 视图中包含&am…

实战React音乐播放器

上篇文章《一步一步实战HTML音乐播放器》中&#xff0c;我用HTMLJS CSS的方式一步步实现了一个音乐播放器&#xff0c;因为最近接触了一下React&#xff0c;感觉挺不错的&#xff0c;在这里我用React的方式实现一个同样的音乐播放器。 播放器功能 自动显示 专辑图片、歌手名、…

ASP.NET MVC5+EF6+EasyUI 后台管理系统(40)-精准在线人数统计实现-【过滤器+Cache】...

系列目录 上次的探讨没有任何结果&#xff0c;我浏览了大量的文章和个别系统的参考&#xff01;决定用Cache来做&#xff0c;这可能有点难以接受但是配合mvc过滤器来做效果非常好&#xff01; 由于之前的过滤器我们用过了OnActionExecuting这个方法来判断权限 现在在方法被执行…

理解关键的渲染路径

本文转载自&#xff1a;《Understanding the Critical Rendering Path》,原文地址&#xff1a;https: //bitsofco.de/understanding-the-critical-rendering-path/ 当浏览器从服务器接收到一个HTML页面的请求时&#xff0c;到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系…

Openfire3.9.3源代码导入eclipse中开发配置指南(转载)

看到这篇文章的的网友应该已经安装了jdk,eclipse&#xff0c;我就不在安装这些开发工具上赘述了&#xff0c;附载一下openfire的下载地址&#xff1a;http://www.igniterealtime.org/downloads/index.jsp。1、下载源码openfire_src_3_9_3.zip&#xff0c;目前最新的版本是3.9.3…

Gulp在前端的常用操作实例

以前在做代码优化的时候&#xff0c;一般都用一些网上的在线工具来完成&#xff0c;写LESS的时候&#xff0c;一般用Koala来编译&#xff0c;感觉用起来也挺不错的。但是现在构建工具的出现&#xff0c;让以前做的那些繁琐操作变的更方便一些了&#xff0c;我在这里也用构建工具…

电池栏上弹窗

//可以不被电池栏挡住 (UILabel *)alertLabel { UILabel *label [[UILabel alloc] initWithFrame:CGRectMake(0, 20.f, 320.f, 0.f)]; label.backgroundColor [UIColor colorWithRed:240.f/255.f green:224.f/255.f blue:149.f/255.f alpha:1.0]; label.textAlignment NSTe…

深入了解CSS字体度量,行高和vertical-align

本文英文出处:http: //iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 著作权归作者所有。 转载自https: //www.w3cplus.com/css/css-font-metrics-line-height-and-vertical-align.html line-height和vertical-align在CSS中是两个简单的属性。如此简单&…

自主做一个类似于微博的项目(计划篇)

项目名称&#xff1a;archou微博项目架构&#xff1a;B/S架构项目开发语言&#xff1a;java、jquery、html、hql开发框架&#xff1a;spring mvc、hibernate开发平台&#xff1a;windows开发工具&#xff1a;STS(spring tool suite)、Dreamever、mysql项目管理工具&#xff1a;…

HTML5 Canvas制作雷达图实战

雷达图又叫蜘蛛网图&#xff0c;是一种对各项数据查看很明显的表现图&#xff0c;在很多游戏中&#xff0c;对游戏中的每个角色的分析图一般也用这种图。 下面&#xff0c;用HTML5的Cavas来实现雷达图。 效果 一、创建Canvas var mW 400; var mH 400; var mCtx null;var c…

AlphaBlend

AlphaBlend实现透明效果&#xff0c;只是仅仅能针对某块区域进行alpha操作&#xff0c;透明度可设。 TransparentBlt能够针对某种颜色进行透明&#xff0c;只是透明度不可设。 AlphaBlend&#xff1a; BLENDFUNCTION bn; bn.AlphaFormat 0; bn.BlendFlags 0; bn.BlendOp AC_…

ECMAScript 6网页样式修正器

最近在看ES6这一方面的图书&#xff0c;在搜索的过程中发现了《ECMAScript 6 入门-阮一峰》&#xff0c;感觉还不错。因为我个从比较喜欢看纸质的书&#xff0c;就想把这本书给打印下来。 但是网页版的《ECMAScript 6 入门-阮一峰》设置的样式只适合在网页上查看&#xff0c;并…

CAS去掉HTTPS认证

如何去掉HTTPS认证&#xff1f; 说明&#xff1a;默认情况下HTTP也是可以访问CAS SERVER的&#xff0c;但认证&#xff0c;登陆&#xff0c;退出等操作均没有任何的效果。所以必须作出下面的修改 1、进入WEB-INF\spring-configuration目录 打开warnCookieGenerator.xml文件 …

PWA(Progressive Web App)入门系列:(一)PWA简介

前言 PWA做为一门Google推出的WEB端的新技术&#xff0c;好处不言而喻&#xff0c;但目前对于相关方面的知识不是很丰富&#xff0c;这里我推出一下这方面的入门教程系列&#xff0c;提供PWA方面学习。 什么是PWA PWA全称Progressive Web App&#xff0c;直译是渐进式WEB应用…

Linux磁盘管理1

实验01磁盘分区实验目标为虚拟机添加一块80GB、SCSI接口的硬盘划分2个20GB的主分区剩余作为扩展分区新建2个逻辑分区分别为2GB、10GB将第1个逻辑分区的类型改为SWAPID 82将第2个逻辑分区的类型改为VFATID b确认分区无误后保存退出使用partprobe识别新的分区表 【最好是重启一…

Vue DevTools可使用修正方法

因为工作要求&#xff0c;目前主要在用Vue.js技术栈做开发&#xff0c;调试是必不可少的&#xff0c;这里会用的Vue DevTools的调试工具&#xff0c;问题就出在这里&#xff0c;当用Vue DevTools做调试时&#xff0c;很多时候都不能用&#xff0c;提示没有监测到Vue&#xff0c…

svn 单独导出某一个目录文件

应需求&#xff0c;需要把svn版本库的某一个目录导出来&#xff0c;迁成另外一个库&#xff0c;查了下svn相关命令&#xff0c;可以使用svndumpfilter.示例&#xff1a;svndumpfilter include /trunk/system < full_system_0_158_201407270000.dmp > /tmp/system.dmp注意…

ZRender实现粒子网格动画实战

注&#xff1a;本博文代码基于ZRender 3.4.3版本开发&#xff0c;对应版本库地址&#xff1a;ZRender 库。 效果 实现分析 通过上面显示的效果图&#xff0c;可以看出&#xff0c;这种效果就是在Canvas中生成多个可移动的点&#xff0c;然后根据点之间的距离来确定是否连线&am…

python模块学习(1)

模块让你能够有逻辑地组织你的Python代码段。把相关的代码分配到一个 模块里能让你的代码更好用&#xff0c;更易懂。模块也是Python对象&#xff0c;具有随机的名字属性用来绑定或引用。简单地说&#xff0c;模块就是一个保存了Python代码的文件。模块能定义函数&#xff0c;类…