在前端应用中，使用 MQTT（Message Queuing Telemetry Transport）协议与服务器进行通信，是一种高效、可靠的方式。而使用npm包ember-paho-mqtt可以方便地在 Ember.js 应用中使用 MQTT 协议。本文将介绍在 Ember.js 应用中使用 ember-paho-mqtt 的详细方法和示例代码。
1. 安装和引入 ember-paho-mqtt
安装 ember-paho-mqtt 使用以下命令：
ember install ember-paho-mqtt
安装完成后，在 Ember.js 应用中引入 ember-paho-mqtt：
-- -------------------- ---- -------
------ ---- ---- ------------
------ ----------- ---- --------------------------------
------ ------- -
----- -------
----------- ------------------- -
----- ------- - ---------------------------------
--------------------- --- -------------------------------- ----- -------------
------------------
--
--注意引入的 MQTTService，这是 ember-paho-mqtt 中封装好的使用 MQTT 的服务。
2. 使用 MQTTService
在使用 MQTTService 之前，需要先进行初始化，可通过应用的 config/environment.js 配置文件实现：
-- -------------------- ---- -------
-------------- - --------------------- -
--- --- - -
----- -
---------- --------------------
----- -----
---- ------
-- ----- -------- --- ------
-
-
--在进行初始化后，就可以在 Ember.js 应用的组件或服务中使用 MQTTService。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ------------------------
----- -----------------------
-------- -
--------- -
--------------------------
---------- ---------- -
--------------------------
--
---------- ---------- -
----------------------- ----------
--
------- -----
--------- -------
--------- -------
------------------ ---
---
--
----------- -
----------------------------------------- -
---- --
---------- ---------- -
---------------------------
--
---------- ---------- -
---------------------- ----------
--
---
--
--------- -
--------------------------------------- ------- -------- -
---- --
--------- ------
---------- ---------- -
--------------------------
--
---------- ---------- -
-------------------- ----------
--
---
--
--
---这里使用了 Ember.inject.service() 来注入 MQTTService，然后在组件的 actions 中使用 MQTTService 的 connect(), subscribe() 和 publish() 方法，实现了对 MQTT 的连接、订阅和发布。
3. 示例代码
以下是一个完整的例子，使用 Ember.js 应用连接 MQTT 服务器，并订阅 /test/topic 主题，并显示接收到的消息：
-- -------------------- ---- -------
-- --------------------------------
------ ----- ---- --------
------ ------- ------------------------
----- -----------------------
----------- -----
----- ---------- -
--------------------------
---------------------- --- -------------------------------- ----- -------------
-----------------------------
--------------------------------------- - ---------------------------------
--
----------------- ----------------- -
------------------- -----------------------
--
-------- -
--------- -
--------------------------
---------- ---------- -
--------------------------
--
---
--
----------- -
----- ------ - -----------------------
------------------------------- -
---------- ---------- -
---------------------------
--
---
--
--
---其中，使用 init() 方法创建 Paho.Client 对象，并在 this.get('mqtt').connect({}) 中初始化 MQTTService。可以在任何需要的地方调用 this.get('mqtt').connect() 订阅主题。onMessageArrived() 方法用于接收消息。
在模板中展示接收到的消息：
<!-- app/templates/mqtt-component.hbs -->
<h1>{{message}}</h1>
<button type="button" {{action 'connect'}}>Connect</button>
<button type="button" {{action 'subscribe'}}>Subscribe</button>当点击 Connect 按钮后，会连接到 MQTT 服务器；点击 Subscribe 按钮后，会订阅 /test/topic 主题。当接收到消息时，页面上会显示接收到的消息。
总结
本文介绍了在 Ember.js 应用中使用 ember-paho-mqtt 的详细方法和示例代码，包括安装和引入 ember-paho-mqtt，初始化 MQTTService，以及在组件或服务中使用 MQTTService 的 connect(), subscribe() 和 publish() 方法，实现了对 MQTT 的连接、订阅和发布。希望能够对读者使用 MQTT 协议进行前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca3d