【微信小程序控制硬件⑤ 进阶篇】理清接下来必须走的架构思想，学习下 JavaScript 的观察者模式，如何在微信小程序多页面同时接收到设备推送事件！【附带demo】

【微信小程序控制硬件第1篇 】 全网首发，借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器，轻松控制智能硬件！
【微信小程序控制硬件第2篇 】 开始微信小程序之旅，导入小程序Mqtt客户端源码，实现简单的验证和通讯于服务器！
【微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目，自定义通讯协议，为面试职位和比赛项目加分！
【微信小程序控制硬件第4篇 】 深度剖析微信公众号配网 Airkiss 原理与过程，esp8266如何自定义回调参数给微信，实现绑定设备第一步！
【微信小程序控制硬件第5篇 】理清接下来必须走的架构思想，学习下 JavaScript 的观察者模式，在微信小程序多页面同时接收到设备推送事件！
【微信小程序控制硬件第6篇 】服务器如何集成七牛云存储SDK，把用户自定义设备图片存储在第三方服务器！
【微信小程序控制硬件第7篇 】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为自己心里全栈工程师梦想浇水！！
【微信小程序控制硬件第8篇 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！
【微信小程序控制硬件第9篇 】巧借阿里云物联网平台的免费连接，从微信小程序颜色采集控制 esp8266 输出七彩灯效果，中秋节来个直播如何？！
【微信公众号控制硬件 第10篇 】如何在微信公众号网页实现连接mqtt服务器教程！！
【微信小程序控制硬件 第11篇 】全网首发，微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度开关。
【微信小程序控制硬件 第12篇 】微信小程序蓝牙控制硬件应如何开发？为您全面解析微信小程序蓝牙API的使用。
【微信小程序控制硬件 第13篇 】安信可B站直播学习总结，微信小程序MQTT远程控制ESP8266 NodeMCU，谈谈微信生态那些事。

---

一、前言；

---

   本来这个《微信小程序控制硬件》系列的教程已经完结了，但是最近又在技术网站逛帖子，看到了一个很好的 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()方法返回的对象。

• 看下方：
• 注意我们的取消监听函数放在页面被摧毁回调调用即可。

---

---

五、打印；

---

• 代码下载：https://download.csdn.net/download/xh870189248/10943784

---