前端mqtt的具体利用(包罗mqtt服务器部署，前端vue3利用mqtt连接、订阅主题 ...

一、简述

​ MQTT（消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的通讯协议，该协议构建于TCP/IP协议上。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接长途装备提供及时可靠的消息服务。MQTT 协议的应用场景包括物联网、移动应用、车联网、智能家居、即时聊天等。
二、特性

• 利用发布/订阅消息模式。
  
• 对负载内容屏蔽的消息传输。
  
• 利用TCP/IP提供网络连接。
  
• 有三种消息发布服务质量：
  
  
  
  • “至多一次”，消息发布完全依赖底层TCP/IP网络。会发生消息丢失或重复。这一级别可用于如下情况，环境传感器数据，丢失一次读记载无所谓，由于不久后还会有第二次发送。这一种方式主要平凡APP的推送，倘若你的智能装备在消息推送时未联网，推送过去充公到，再次联网也就收不到了。
    
  • “至少一次”，确保消息到达，但消息重复可能会发生。
    
  • “只有一次”，确保消息到达一次。在一些要求比较严酷的计费体系中，可以利用此级别。在计费体系中，消息重复或丢失会导致不正确的效果。这种最高质量的消息发布服务还可以用于即时通讯类的APP的推送，确保用户收到且只会收到一次。
    
  
  
• 小型传输，开销很小（固定长度的头部是2字节），协议交换最小化，以低落网络流量。
  
• 利用Last Will和Testament特性通知有关各方客户端异常停止的机制。
  Last Will：即遗言机制，用于通知同一主题下的其他装备发送遗言的装备已经断开了连接。
  Testament：遗嘱机制，功能类似于Last Will。
  

三、MQTT协议中的订阅、主题、会话

1.订阅（Subscription）
订阅包罗主题筛选器（Topic Filter）和最大服务质量（QoS）。订阅会与一个会话（Session）关联。一个会话可以包罗多个订阅。每一个会话中的每个订阅都有一个差别的主题筛选器。
2.会话（Session）
每个客户端与服务器建立连接后就是一个会话，客户端和服务器之间有状态交互。会话存在于一个网络之间，也可能在客户端和服务器之间超过多个一连的网络连接。
3.主题名（Topic Name）
连接到一个应用程序消息的标签，该标签与服务器的订阅相匹配。服务器会将消息发送给订阅所匹配标签的每个客户端。
4.主题筛选器（Topic Filter）
一个对主题名通配符筛选器，在订阅表达式中利用，体现订阅所匹配到的多个主题。
5.负载（Payload）
消息订阅者所具体吸收的内容。
四、MQTT协议中的方法

• Connect。等待与服务器建立连接。
  
• Disconnect。等待MQTT客户端完成所做的工作，并与服务器断开TCP/IP会话。
  
• Subscribe。等待完成订阅。
  
• UnSubscribe。等待服务器取消客户端的一个或多个topics订阅。
  
• Publish。MQTT客户端发送消息请求，发送完成后返回应用程序线程。
  

五、前端利用mqtt

1. mqtt服务器的部署

利用 EMQX CLOUD 进行mqtt服务的部署
EMQX Cloud: 全托管的 MQTT 消息云服务
部署教程：https://www.bilibili.com/video/BV1Bx4y1K7hN/
利用Serverless版本每月有免费额度

2. 安装js的mqtt包

1. npm i mqtt

复制代码

3. 前端代码

完整代码已上传至github
https://github.com/void00013/8.mqtt_vue3_test/tree/main
请自行下载依赖后运行

1. // Home.vue
2. <template>
3.   <div class="home-container">
4.     <el-card shadow="always" style="margin-bottom:30px;">
5.       <div class="emq-title">
6.         Configuration
7.       </div>
8.       <el-form ref="configForm" hide-required-asterisk size="small" label-position="top" :model="connection">
9.         <el-row :gutter="20">
10.           <el-col :span="8">
11.             <el-form-item prop="host" label="Host">
12.               <el-row :gutter="10">
13.                 <el-col :span="7">
14.                   <el-select v-model="connection.protocol" @change="handleProtocolChange">
15.                     <el-option label="ws://" value="ws"></el-option>
16.                     <el-option label="wss://" value="wss"></el-option>
17.                   </el-select>
18.                 </el-col>
19.                 <el-col :span="17">
20.                   <el-input v-model="connection.host"></el-input>
21.                 </el-col>
22.               </el-row>
23.             </el-form-item>
24.           </el-col>
25.           <el-col :span="8">
26.             <el-form-item prop="port" label="Port">
27.               <el-input v-model.number="connection.port" type="number" placeholder="8083/8084"></el-input>
28.             </el-form-item>
29.           </el-col>
30.           <el-col :span="8">
31.             <el-form-item prop="endpoint" label="Mountpoint">
32.               <el-input v-model="connection.endpoint" placeholder="/mqtt"></el-input>
33.             </el-form-item>
34.           </el-col>
35.           <el-col :span="8">
36.             <el-form-item prop="clientId" label="Client ID">
37.               <el-input v-model="connection.clientId"> </el-input>
38.             </el-form-item>
39.           </el-col>
40.           <el-col :span="8">
41.             <el-form-item prop="username" label="Username">
42.               <el-input v-model="connection.username"></el-input>
43.             </el-form-item>
44.           </el-col>
45.           <el-col :span="8">
46.             <el-form-item prop="password" label="Password">
47.               <el-input v-model="connection.password"></el-input>
48.             </el-form-item>
49.           </el-col>
51.           <el-col :span="24">
52.             <el-button type="success" size="small" class="conn-btn" style="margin-right: 20px;" :disabled="client.connected" @click="createConnection" :loading="connecting">
53.               {{ client.connected ? 'Connected' : 'Connect' }}
54.             </el-button>
56.             <el-button v-if="client.connected" type="danger" size="small" class="conn-btn" @click="destroyConnection">
57.               Disconnect
58.             </el-button>
59.           </el-col>
60.         </el-row>
61.       </el-form>
62.     </el-card>
63.     <el-card shadow="always" style="margin-bottom:30px;">
64.       <div class="emq-title">
65.         Subscribe
66.       </div>
67.       <el-form ref="subscription" hide-required-asterisk size="small" label-position="top" :model="subscription">
68.         <el-row :gutter="20">
69.           <el-col :span="8">
70.             <el-form-item prop="topic" label="Topic">
71.               <el-input v-model="subscription.topic"></el-input>
72.             </el-form-item>
73.           </el-col>
74.           <el-col :span="8">
75.             <el-form-item prop="qos" label="QoS">
76.               <el-select v-model="subscription.qos">
77.                 <el-option v-for="qos in qosList" :key="qos" :label="qos" :value="qos"></el-option>
78.               </el-select>
79.             </el-form-item>
80.           </el-col>
81.           <el-col :span="8">
82.             <el-button :disabled="!client.connected" type="success" size="small" class="subscribe-btn" @click="doSubscribe">
83.               {{ subscribeSuccess ? 'Subscribed' : 'Subscribe' }}
84.             </el-button>
85.             <el-button :disabled="!client.connected" type="success" size="small" class="subscribe-btn" style="margin-left:20px" @click="doUnSubscribe" v-if="subscribeSuccess">
86.               Unsubscribe
87.             </el-button>
88.           </el-col>
89.         </el-row>
90.       </el-form>
91.     </el-card>
92.     <el-card shadow="always" style="margin-bottom:30px;">
93.       <div class="emq-title">
94.         Publish
95.       </div>
96.       <el-form ref="publish" hide-required-asterisk size="small" label-position="top" :model="publish">
97.         <el-row :gutter="20">
98.           <el-col :span="8">
99.             <el-form-item prop="topic" label="Topic">
100.               <el-input v-model="publish.topic"></el-input>
101.             </el-form-item>
102.           </el-col>
103.           <el-col :span="8">
104.             <el-form-item prop="payload" label="Payload">
105.               <el-input v-model="publish.payload"></el-input>
106.             </el-form-item>
107.           </el-col>
108.           <el-col :span="8">
109.             <el-form-item prop="qos" label="QoS">
110.               <el-select v-model="publish.qos">
111.                 <el-option v-for="qos in qosList" :key="qos" :label="qos" :value="qos"></el-option>
112.               </el-select>
113.             </el-form-item>
114.           </el-col>
115.         </el-row>
116.       </el-form>
117.       <el-col :span="24">
118.         <el-button :disabled="!client.connected" type="success" size="small" class="publish-btn" @click="doPublish">
119.           Publish
120.         </el-button>
121.       </el-col>
122.     </el-card>
123.     <el-card shadow="always" style="margin-bottom:30px;">
124.       <div class="emq-title">
125.         Receive
126.       </div>
127.       <el-col :span="24">
128.         <el-input type="textarea" :rows="3" style="margin-bottom: 15px" v-model="receiveNews" readOnly></el-input>
129.       </el-col>
130.     </el-card>
131.   </div>
132. </template>
134. <script>
135. import mqtt from 'mqtt'
137. export default {
138.   name: 'Home',
140.   data() {
141.     return {
142.       connection: {
143.         protocol: 'wss',
144.         host: '你的mqtt服务器地址',
145.         // server less服务器只有两种协议：mqtts: 8883; wss: 8084
146.         port: 8084,
147.         endpoint: '/mqtt',
148.         clean: true,
149.         connectTimeout: 30 * 1000, // ms
150.         reconnectPeriod: 4000, // ms
151.         clientId: 'emqx_vue_' + Math.random().toString(16).substring(2, 8),
152.         // auth
153.         username: 'void',
154.         password: '123',
155.       },
156.       subscription: {
157.         topic: 'topic/mqttx',
158.         qos: 0,
159.       },
160.       publish: {
161.         topic: 'topic/browser',
162.         qos: 0,
163.         payload: '{ "msg": "Hello, I am browser." }',
164.       },
165.       receiveNews: '',
166.       qosList: [0, 1, 2],
167.       client: {
168.         connected: false,
169.       },
170.       subscribeSuccess: false,
171.       connecting: false,
172.       retryTimes: 0,
173.     }
174.   },
175.   methods: {
176.     initData() {
177.       this.client = {
178.         connected: false,
179.       }
180.       this.retryTimes = 0
181.       this.connecting = false
182.       this.subscribeSuccess = false
183.     },
184.     handleOnReConnect() {
185.       this.retryTimes += 1
186.       if (this.retryTimes > 5) {
187.         try {
188.           this.client.end()
189.           this.initData()
190.           this.$message.error('Connection maxReconnectTimes limit, stop retry')
191.         } catch (error) {
192.           this.$message.error(error.toString())
193.         }
194.       }
195.     },
196.     createConnection() {
197.       try {
198.         this.connecting = true
199.         const { protocol, host, port, endpoint, ...options } = this.connection
200.         const connectUrl = `${protocol}://${host}:${port}${endpoint}`
201.         this.client = mqtt.connect(connectUrl, options)
202.         if (this.client.on) {
203.           this.client.on('connect', () => {
204.             this.connecting = false
205.             console.log('Connection succeeded!')
206.           })
207.           this.client.on('reconnect', this.handleOnReConnect)
208.           this.client.on('error', (error) => {
209.             console.log('Connection failed', error)
210.           })
211.           this.client.on('message', (topic, message) => {
212.             this.receiveNews = this.receiveNews.concat(message)
213.             console.log(`Received message ${message} from topic ${topic}`)
214.           })
215.         }
216.       } catch (error) {
217.         this.connecting = false
218.         console.log('mqtt.connect error', error)
219.       }
220.     },
221.     // subscribe topic
222.     doSubscribe() {
223.       const { topic, qos } = this.subscription
224.       this.client.subscribe(topic, { qos }, (error, res) => {
225.         if (error) {
226.           console.log('Subscribe to topics error', error)
227.           return
228.         }
229.         this.subscribeSuccess = true
230.         console.log('Subscribe to topics res', res)
231.       })
232.     },
233.     // unsubscribe topic
234.     doUnSubscribe() {
235.       const { topic } = this.subscription
236.       this.client.unsubscribe(topic, (error) => {
237.         if (error) {
238.           console.log('Unsubscribe error', error)
239.         }
240.       })
241.     },
242.     // publish message
243.     doPublish() {
244.       const { topic, qos, payload } = this.publish
245.       this.client.publish(topic, payload, { qos }, (error) => {
246.         if (error) {
247.           console.log('Publish error', error)
248.         }
249.       })
250.     },
251.     // disconnect
252.     destroyConnection() {
253.       if (this.client.connected) {
254.         try {
255.           this.client.end(false, () => {
256.             this.initData()
257.             console.log('Successfully disconnected!')
258.           })
259.         } catch (error) {
260.           console.log('Disconnect failed', error.toString())
261.         }
262.       }
263.     },
264.     handleProtocolChange(value) {
265.       this.connection.port = value === 'wss' ? '8084' : '8083'
266.     },
267.   },
268. }
269. </script>
271. <style lang="scss">
272. @import url('../assets/style/home.scss');
274. .home-container {
275.   max-width: 1100px;
276.   margin: 0 auto;
278.   .conn-btn {
279.     color: #fff;
280.     background-color: #00b173;
281.     font-size: 14px;
282.   }
284.   .publish-btn {
285.     margin-bottom: 20px;
286.     float: right;
287.   }
289.   .el-button--success {
290.     background-color: #34c388 !important;
291.     border-color: #34c388 !important;
292.     font-size: 14px !important;
293.   }
295.   .el-button--danger {
296.     background-color: #f5222d !important;
297.     border-color: #f5222d !important;
298.   }
300.   .el-form-item {
301.     &.is-error {
302.       .el-input__inner,
303.       .el-textarea__inner {
304.         box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
305.       }
306.     }
307.     &.is-success {
308.       .el-input__inner,
309.       .el-textarea__inner {
310.         border-color: #34c388 !important;
311.       }
312.     }
313.   }
314. }
315. </style>

复制代码

1. // home.scss
2. body {
3.   background-color: #f0f2f5;
4.   padding: 0;
5.   margin: 0;
6.   color: rgba(0, 0, 0, 0.65);
7.   font-size: 14px;
8.   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
9.     Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
10. }
12. .emq-title {
13.   font-size: 16px;
14.   color: #333333;
15.   font-weight: bolder;
16.   margin-bottom: 15px;
18.   &.h3 {
19.     font-size: 14px;
20.   }
22.   &[size='small'] {
23.     font-size: 14px;
24.   }
26.   .sub-title {
27.     font-weight: normal;
28.     display: block;
29.     font-size: 12px;
30.     color: #8f9297;
31.     margin-top: 12px;
32.   }
34.   &.required-title {
35.     &:before {
36.       content: '*';
37.       color: #f5222d;
38.       margin-right: 4px;
39.     }
40.   }
41. }
43. .el-select {
44.   width: 100%;
45. }
47. .subscribe-btn {
48.   margin-top: 42px !important;
49. }
51. .publish-btn {
52.   margin-bottom: 30px;
53. }

复制代码

4. EMQX官方示例

官方提供了vue、react、java、python等各种语言的代码案例，如有必要请自行查察
https://github.com/emqx/MQTT-Client-Examples/tree/master

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。