【微信小程序控制硬件⑤ 进阶篇】理清接下来必须走的架构思想,学习下 JavaScript 的观察者模式,如何在微信小程序多页面同时接收到设备推送事件!【附带demo】
【微信小程序控制硬件①】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件!
【微信小程序控制硬件②】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证和通讯于服务器!
【微信小程序控制硬件③】 从软件到硬件搭建一个微信小程序控制esp8266的项目,自定义通讯协议,为面试职位和比赛项目加分!
【微信小程序控制硬件④】 深度剖析微信公众号配网 Airkiss 原理与过程,esp8266如何自定义回调参数给微信,实现绑定设备第一步!
【微信小程序控制硬件⑤ 进阶篇 】理清接下来必须走的架构思想,学习下 JavaScript 的观察者模式,在微信小程序多页面同时接收到设备推送事件!
【微信小程序控制硬件⑥ 进阶篇 】服务器如何集成七牛云存储SDK,把用户自定义设备图片存储在第三方服务器!
文章目录
一、前言;
本来这个《微信小程序控制硬件》系列的教程已经完结了,但是最近又在技术网站逛帖子,看到了一个很好的
JavaScript封装库:https://github.com/hustcc/onfire.js ,类似安卓开发的著名的开源库事件总线库
EventBus,具有跨页面,异步执行收发数据。
很多时候,我们只是应用层开发者,只需要理清原理,根据自己的业务需求去拼东西,去拼代码,一旦拼接成功,就可以得心应手做自己的事情。但这应该是最快最好的方法了,下面我会一步一步地为什么在《微信小程序控制硬件》这里会引出这么多一个技术点,以及原理是什么?对我们的编程有什么好处?
虽然本人的
JavaScript领域没有到那种封装的领域,但是会利用第三方库,以及基础扎实,那就可以做很多事情了。believe me!
其实这个知识点,我相信不管是中小公司设计的时候,都会涉及到的。因为公司的同事曾经问过我这个问题,现在也终有机会普及下了。
二、仅保持一个长连接如何分发数据处理;
注意,我这里说的是如何保持一个长连接并且如何分发数据处理,看这篇文章前,必须知道什么是长连接和短连接,短连接压根不需要保持,一旦请求成功的断开了,无需考虑如何保持!
我们都知道,在平时用的一些智能家居app的时候,比如开源代码的机智云,其底层是封装好了与服务器的通讯协议,仅仅暴露提供设备的下发和状态同步的函数方法。说到这,相信你会说,一般人的思路都是这样吧?先从智能设备主动推送到手机的设备状态信息,然后分发到各个那些控制界面或者设备列表! 从机智云的安卓源码分析大概知道,开放设备状态监听类,以及取消监听类!
我整理下,我们的大概理解就是这样:
- ①、设备和服务器通讯我就不说了,主要是手机端如何接受后处理这些信息,分发到不同界面去?
- ②、我们可以把服务器理解为广播电台的播音员,把手机端的某一项服务抽象简单化理解为广播电台,而我们的app界面理解为收音机,这些收音机的开关接收电台信息和调频接收哪个电台是我们自己定的。
- ③、上面理解之后,一旦广播播音员和广播电台在一起就开始发出设备信息广播了,不管收音机状态,反正“设备的状态发生改变,我就要向外界发广播”。那么如果我们的收音机打开了之后(即打开界面),肯定会收到信息的。关闭了(即关闭界面)也就收不到了!
总的来说,这样的在现实的例子太多了。我们把这种思想称为观察者模式。观察者是收音机,发布者是设备发消息到服务器到手机,由手机向每个观察者(界面)发出消息,就会实时现实设备状态,加载给用户看。
噢!上面仅仅说了消息分发的过程,没有说如何保持长连接这种保持长连接的事情,说真的,不好做!我也称为 保活率 !可能是在安卓待久了,我们看到的支付宝、微信在你即使后台清理关闭了,一旦你支付成功,他立刻有推送在窗口,有时候你在玩王者农药,微信朋友一个视频通话,就打断了你。哈哈!即使你关闭后台也没用!最保守的就是 手动禁止此应用通知!
上面也扯了这么多,如何保活?据我熟悉,在安卓开发中可以采用多线程,多服务,或者
binder跨进程保活!当然,这是很流氓的!我们这篇博文还是围绕着微信小程序来说,对于我们这种宿主程序不是自己开发的,也就不用考虑保活了。一旦用户退出了小程序,啥都不知道了!
三、做一个“广播站”;
终于等到我们的代码了,首先我们要全局的
app.js里面连接我们的
mqtt服务器,处理分发消息。
- 首先引进我们的主角
onfire.js
, 这个库使用起来非常简单!我们这里模拟已经连接服务器成功,并且设备每三秒主动推送信息过来。 - 对象拿到之后,直接一个
fire()
方法就可以了,非常简单!!第一个参数是头部,类似mqtt协议
的主题,后面的那些都是payload
,我们的处理数据!
四、做一个“收音机”;
上面提到,收音机就是我们的每个单独控制界面,有开始监听和不监听的触发。
方法名 | 含义 | 备注 |
---|---|---|
on() | 开始订阅 | 第一个参数为主题,第二个是带参的匿名函数。 |
un() | 取消订阅,释放内存 | 参数为主题名字或者on()方法返回的对象。 |
- 看下方:
- 注意我们的取消监听函数放在页面被摧毁回调调用即可。
五、打印;
- 【微信小程序控制硬件⑥ 进阶篇】服务器如何集成七牛云存储SDK,把用户自定义设备图片存储在第三方服务器!
- 微信小程序学习用demo:瀑布流及登录后页面刷新
- 【微信小程序】学习笔记 demo 第一个页面 数据展示
- 微信小程序 如何在页面直接传递信息 / 通信方法 / 附带项目案例
- 微信小程序学习:navigateTo url 如何带多个参数&从子页面退回父页面时的数据传递
- 架构学习--利用订阅事件完成更新缓存(观察者模式)
- 微信小程序学习笔记 (小程序页面学习 十 WXML-事件 基本食用方法)
- Fuhome如何用手机微信远程控制继电器,手机控制单片机设备,硬件不限,其实都一样的
- Discuz!NT 聚合功能页面程序架构(重构到Facade与Observer模式)
- JavaScript Event学习第三章 早期的事件处理程序
- 你知道的,javascript语言的执行环境是"单线程模式",这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行,因此很多时候需要进行“异步模式”,请列举js异步编程的方法。
- asp.net 一个页面中有两个按钮,回车时判断相应哪个事件的方法!!(用javascript 控制)
- JavaScript学习记录——《学用 JavaScript 设计模式》学习笔记(3)观察者模式
- 微信开发接收事件推送
- Discuz!NT 聚合功能页面程序架构(重构到Facade与Observer模式)
- js_前台页面如何设置radio、checkbox、select三者的值以及绑定事件,方便后台接收数据
- JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
- 微信【接收事件推送】
- 微信小程序学习用demo推荐:家具电商:(适用1221版本)
- 微信小程序学习用demo推荐:列表项左滑删除效果