电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

vue中利用mqtt服務(wù)端實現(xiàn)即時通訊的步驟記錄

瀏覽:87日期:2022-09-28 13:52:47
MQTT協(xié)議

MQTT(Message Queuing Telemetry Transport,消息隊列遙測傳輸)是IBM開發(fā)的一個即時通訊協(xié)議,有可能成為物聯(lián)網(wǎng)的重要組成部分。該協(xié)議支持所有平臺,幾乎可以把所有聯(lián)網(wǎng)物品和外部連接起來,被用來當做傳感器和制動器(比如通過Twitter讓房屋聯(lián)網(wǎng))的通信協(xié)議。

MQTT是輕量級基于代理的發(fā)布/訂閱的消息傳輸協(xié)議,它可以通過很少的代碼和帶寬和遠程設(shè)備連接。例如通過衛(wèi)星和代理連接,通過撥號和醫(yī)療保健提供者連接,以及在一些自動化或小型設(shè)備上,而且由于小巧,省電,協(xié)議開銷小和能高效的向一和多個接收者傳遞信息,故同樣適用于稱動應(yīng)用設(shè)備上。

vue利用mqtt服務(wù)端實現(xiàn)即時通訊

在大部分項目中,前后端交互只是前端請求后端的接口,拿到數(shù)據(jù)后再處理,前段時間我手上的一個項目需要用到mqtt,使用后覺得真神奇,只需要訂閱就能實時獲取到數(shù)據(jù),廢話不多說,妹妹給你們上步驟!

1.在vue項目中安裝mqtt.js

npm install mqtt --save

2.在項目的main.js或者在需要用到的vue頁面上引用

import mqtt from ’mqtt’

3.在vue頁面的data中定義一個client對象,方便后面使用

client: {}

ok,接下來就是重點了,首先我們得連接mqtt,連接mqtt的方法有個回調(diào)函數(shù),我接下來就把訂閱的方法寫在連接成功后的回調(diào)里,這樣能保證不出錯,上代碼!

4.連接mqtt并訂閱

//連接服務(wù)器 connect() { let options = {username: 'xxx',password: 'xxxx',cleanSession : false,keepAlive:60,clientId: ’mqttjs_’ + Math.random().toString(16).substr(2, 8),connectTimeout: 4000 } this.client = mqtt.connect(’ws://192.168.xxx.xx:8083/mqtt’,options); this.client.on('connect', (e)=>{console.log('成功連接服務(wù)器:',e);//訂閱三個名叫’top/#’, ’three/#’和’#’的主題this.client.subscribe([’top/#’, ’three/#’, ’#’], { qos: 1 }, (err)=> { if (!err) { console.log('訂閱成功'); //向主題叫“pubtop”發(fā)布一則內(nèi)容為’hello,this is a nice day!’的消息 this.publish('pubtop', ’hello,this is a nice day!’) } else { console.log(’消息訂閱失敗!’) }}); }); //重新連接 this.reconnect() //是否已經(jīng)斷開連接 this.mqttError() //監(jiān)聽獲取信息 this.getMessage() }

5.發(fā)布消息方法

//發(fā)布消息@topic主題 @message發(fā)布內(nèi)容 publish(topic,message) { if (!this.client.connected) {console.log(’客戶端未連接’)return } this.client.publish(topic,message,{qos: 1},(err) => {if(!err) { console.log(’主題為’+topic+ '發(fā)布成功')} }) }

6.監(jiān)聽并接收上面訂閱的三個主題的信息

//監(jiān)聽接收消息 getMessage() { this.client.on('message', (topic, message) => {if(message) { console.log(’收到來著’,topic,’的信息’,message.toString()) const res = JSON.parse(message.toString()) //console.log(res, ’res’) switch(topic) { case ’top/#’ : this.msg = res break; case ’three/#’ : this.msg = res break; case ’three/#’ : this.msg = res break; default: return this.msg = res } this.msg = message} }); },

7.監(jiān)聽服務(wù)器是否連接失敗

//監(jiān)聽服務(wù)器是否連接失敗 mqttError() { this.client.on(’error’,(error) => {console.log(’連接失敗:’,error)this.client.end() }) },

8.取消訂閱

//取消訂閱 unsubscribe() { this.client.unsubscribe(this.mtopic, (error)=> {console.log(’主題為’+ this.mtopic+’取消訂閱成功’,error) }) },

9.斷開連接

//斷開連接 unconnect() { this.client.end() this.client = null console.log(’服務(wù)器已斷開連接!’) },

10.監(jiān)聽服務(wù)器重新連接

//監(jiān)聽服務(wù)器重新連接 reconnect() { this.client.on(’reconnect’, (error) => { console.log(’正在重連:’, error) }); },總結(jié)

到此這篇關(guān)于vue中利用mqtt服務(wù)端實現(xiàn)即時通訊的文章就介紹到這了,更多相關(guān)vue用mqtt即時通訊內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 管理会计网-PCMA初级管理会计,中级管理会计考试网站 | 仿真茅草_人造茅草瓦价格_仿真茅草厂家_仿真茅草供应-深圳市科佰工贸有限公司 | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 | 生态板-实木生态板-生态板厂家-源木原作生态板品牌-深圳市方舟木业有限公司 | 广东西屋电气有限公司-广东西屋电气有限公司 | 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 齿轮减速马达一体式_蜗轮蜗杆减速机配电机-德国BOSERL齿轮减速电动机生产厂家 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 皮带机-带式输送机价格-固定式胶带机生产厂家-河南坤威机械 | 法钢特种钢材(上海)有限公司 - 耐磨钢板、高强度钢板销售加工 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 低合金板|安阳低合金板|河南低合金板|高强度板|桥梁板_安阳润兴 北京租车牌|京牌指标租赁|小客车指标出租 | 高压油管,液压接头,液压附件-烟台市正诚液压附件 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | arch电源_SINPRO_开关电源_模块电源_医疗电源-东佑源 | 2025世界机器人大会_IC China_半导体展_集成电路博览会_智能制造展览网 | 广东青藤环境科技有限公司-水质检测 | 祝融环境-地源热泵多恒系统高新技术企业,舒适生活环境缔造者! | 聚合氯化铝厂家-聚合氯化铝铁价格-河南洁康环保科技 | 小学教案模板_中学教师优秀教案_高中教学设计模板_教育巴巴 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 山东集装箱活动房|济南集装箱活动房-济南利森集装箱有限公司 | 中红外QCL激光器-其他连续-半导体连续激光器-筱晓光子 | 【北京写字楼出租_写字楼租赁_办公室出租网/出售】-远行地产官网 | 不锈钢钢格栅板_热浸锌钢格板_镀锌钢格栅板_钢格栅盖板-格美瑞 | 机床导轨_导轨板_滚轮导轨-上海旻佑精密机械有限公司 | 润滑油加盟_润滑油厂家_润滑油品牌-深圳市沃丹润滑科技有限公司 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 天坛家具官网| 伺服电机_直流伺服_交流伺服_DD马达_拓达官方网站 | 二手注塑机回收_旧注塑机回收_二手注塑机买卖 - 大鑫二手注塑机 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 | 游戏版号转让_游戏资质出售_游戏公司转让-【八九买卖网】 | 茶叶百科网-茶叶知识与茶文化探讨分享平台 | 钢结构厂房造价_钢结构厂房预算_轻钢结构厂房_山东三维钢结构公司 |