欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用stompjs實現(xiàn)mqtt消息推送通知

 更新時間:2017年06月22日 09:20:35   作者:獵美  
這篇文章主要為大家詳細介紹了vue中使用stompjs實現(xiàn)mqtt消息推送通知,具有一定的參考價值,感興趣的小伙伴們可以參考一下

最近在研究vue+webAPI進行前后端分離,在一些如前端定時循環(huán)請求后臺接口判斷狀態(tài)等應(yīng)用場景用使用mqtt進行主動的消息推送能夠很大程度的減小服務(wù)端接口的壓力,提高系統(tǒng)的效率,而且可以利用mqtt消息通知建立一個獨立于業(yè)務(wù)服務(wù)系統(tǒng)的消息通知服務(wù),這個服務(wù)還可以與開發(fā)的語言無關(guān),客戶端既可以是安卓也可以是ios,也可以是java或者c#,python等。閑話不多扯,這里只是實現(xiàn)了在vue中使用mqtt的js客戶端,后臺用.net WEB API用的是c#的mqtt客戶端

第一步:安裝依賴

npm install stompjs

運行npm run dev可能會報錯,提示安裝net,執(zhí)行命令

npm install --save net

第二部:組件中應(yīng)用stompjs

組件中的js部分

<script>
import Stomp from 'stompjs'
---在sysconstant.js配置文件中配置mqtt的服務(wù)端地址,賬號等信息
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '../../config/sysconstant.js'
export default {
 name: 'entry',
 data () {
  return {
   client: Stomp.client(MQTT_SERVICE)
  }
 },
 created () {
  this.connect()
 },
 methods: {
  onConnected: function (frame) {
   console.log('Connected: ' + frame)
   var topic = '/topic/AllCustomer' 
---訂閱頻道
   this.client.subscribe(topic, this.responseCallback, this.onFailed) 
  },
  onFailed: function (frame) {
   console.log('Failed: ' + frame)
  },
  responseCallback: function (frame) {
   console.log('responseCallback msg=>' + frame.body)
   ---接收消息
  },
  connect: function () {
   ---初始化mqtt客戶端,并連接mqtt服務(wù)
   var clientid = util.uuid()
   var headers = {
    'login': MQTT_USERNAME,
    'passcode': MQTT_PASSWORD,
    'client-id': clientid
    // additional header
   }
   this.client.connect(headers, this.onConnected, this.onFailed)
  }
 }
}
</script>

配置文件sysconstant.js

/**
 * 配置文件,記錄系統(tǒng)中固定的參數(shù)
 */
export const MQTT_SERVICE = 'ws://127.0.0.1:61623/stomp' // mqtt服務(wù)地址
export const MQTT_USERNAME = 'admin' // mqtt連接用戶名
export const MQTT_PASSWORD = 'password' // mqtt連接密碼

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue3+echarts5踩坑以及resize方法報錯的解決

    Vue3+echarts5踩坑以及resize方法報錯的解決

    這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • VUE v-bind 數(shù)據(jù)綁定的示例詳解

    VUE v-bind 數(shù)據(jù)綁定的示例詳解

    這篇文章主要介紹了VUE v-bind 數(shù)據(jù)綁定,簡單點來說就是對 HTML 中的元素,我們可以使用 v-bind 來進行綁定和動態(tài)的數(shù)據(jù)輸出,本文結(jié)合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • Vue使用Cropper實現(xiàn)圖片裁剪功能

    Vue使用Cropper實現(xiàn)圖片裁剪功能

    圖片裁剪功能無論是用戶頭像的裁剪,還是圖片內(nèi)容的精確調(diào)整,都成為了提升用戶體驗的關(guān)鍵一環(huán),本文將詳細介紹如何在Vue.js項目中集成并使用Cropper.js實現(xiàn)一個強大的圖片裁剪組件,需要的可以參考下
    2024-11-11
  • vue多頁面項目開發(fā)實戰(zhàn)指南

    vue多頁面項目開發(fā)實戰(zhàn)指南

    一般我們的vue項目都是單頁面的,其實因為vue在工程化開發(fā)的時候依賴了webpack,webpack幫我們將所有的資源整合到一起而形成一個單頁面,下面這篇文章主要給大家介紹了關(guān)于vue多頁面項目開發(fā)的相關(guān)資料,需要的朋友可以參考下
    2022-01-01
  • 一步步教你利用webpack如何搭一個vue腳手架(超詳細講解和注釋)

    一步步教你利用webpack如何搭一個vue腳手架(超詳細講解和注釋)

    這篇文章主要給大家介紹了軟玉利用webpack如何搭一個vue腳手架的相關(guān)資料,文中有超詳細講解和注釋,對大家學習或者使用webpack具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。
    2018-01-01
  • Vue+Element UI實現(xiàn)下拉菜單的封裝

    Vue+Element UI實現(xiàn)下拉菜單的封裝

    這篇文章主要為大家詳細介紹了Vue+Element UI實現(xiàn)下拉菜單的封裝代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue中實現(xiàn)拖拽排序功能的詳細教程

    vue中實現(xiàn)拖拽排序功能的詳細教程

    在業(yè)務(wù)中列表拖拽排序是比較常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)拖拽排序功能的詳細教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • vue-cli+webpack記事本項目創(chuàng)建

    vue-cli+webpack記事本項目創(chuàng)建

    這篇文章主要為大家詳細介紹了vue-cli+webpack創(chuàng)建記事本項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • Vue v-text指令簡單使用方法示例

    Vue v-text指令簡單使用方法示例

    這篇文章主要介紹了Vue v-text指令簡單使用方法,結(jié)合實例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下
    2019-09-09
  • vue中異步函數(shù)async和await的用法說明

    vue中異步函數(shù)async和await的用法說明

    這篇文章主要介紹了vue中異步函數(shù)async和await的用法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評論