vue使用stompjs实现mqtt消息推送通知

2024-11-27 02:48:35

最近在研究vue+webAPI进行前后端分离，在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力，提高系统的效率，而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务，这个服务还可以与开发的语言无关，客户端既可以是安卓也可以是ios，也可以是java或者c#,python等。闲话不多扯，这里只是实现了在vue中使用mqtt的js客户端，后台用.net WEB API用的是c#的mqtt客户端

第一步：安装依赖

npm install stompjs

运行npm run dev可能会报错，提示安装net，执行命令

npm install --save net

第二部：组件中应用stompjs

组件中的js部分

<script>
import Stomp from 'stompjs'
---在sysconstant.js配置文件中配置mqtt的服务端地址，账号等信息
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服务
   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

/**
 * 配置文件，记录系统中固定的参数
 */
export const MQTT_SERVICE = 'ws://127.0.0.1:61623/stomp' // mqtt服务地址
export const MQTT_USERNAME = 'admin' // mqtt连接用户名
export const MQTT_PASSWORD = 'password' // mqtt连接密码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript数据推送Comet技术详解

JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术本课时介绍Comet:基于 HTTP 长连接的服务
使用 Javascript 实现浏览器推送提醒功能的示例

本篇文章内容简单,速读只需两三分钟,通过这两三分钟的时间你就可以给自己的网站实现推送提醒的功能 Notification 类简单明了,这个类就是负责推送消息的,只要用户当前没有关闭页面,及时是在使用其他程序,浏览器也能够将消息推送给用户请求权限我们在手机上都收到过消息推送,在接收推送之前我们会先将消息推送权限开放给应用.在浏览器中也一样,在使用浏览器推送之前,需要先获取权限 Notification.requestPermission().then(permission => { cons
ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知的示例代码

一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据. 2.Push.js是什么?[需要浏览器支持H5Notifications] Notifications翻译过来即是通知.那么Push.js的通知又是什么样的,见下图:大多数在屏幕的右下角出
Node.js实现数据推送

场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接超时
Node.js学习教程之HTTP/2服务器推送【译】

前言最近Node.js v8.4+版本发布带来了体验版的HTTP/2,你可以自己通过设置参数--expose-http2启动. 这篇文章,我将介绍HTTP/2最重要的一方面服务器推送并且创建一个小的Node.js程序案例来使用它.下面话不多说了,来一起看看详细的介绍吧. 关于HTTP/2 HTTP/2 的目的是通过支持完整的请求与响应复用来减少延迟,通过有效压缩 HTTP 标头字段将协议开销降至最低,同时增加对请求优先级和服务器推送的支持. 更多关于HTTP/2内容,请查看文章HTTP/2.
vue使用stompjs实现mqtt消息推送通知

最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端第一步:安装依赖 np
SpringBoot2.0集成MQTT消息推送功能实现

这几天在弄后端管理系统向指定的Android客户端推送消息的功能模块,查阅了网上很多博客介绍的许多方式,最终选择基于MQTT协议来实现,MQTT是一个轻量级的消息发布/订阅协议,它是实现基于手机客户端的消息推送服务器的理想解决方案. 实现MQTT协议的中间件有很多,我用的是Apollo服务器,如何搭建MQTT服务器,请查阅其他资料.这里,主要介绍SpringBoot2.0集成MQTT实现消息推送的功能.好,正式开始: 本文采用Gateway绑定的方式,网上也有介绍但不全面,还有其他采用Paho
Kotlin Service实现消息推送通知过程

目录建立Service 绑定服务小结四大组件,就剩下最后一个Service ,他比较重要,相当于后台服务,基本上大部分的app,都会有一两个这样的服务Service . Service用处非常的多,可以根据后台的特性来决定Service的用法. Service 的使用也非常的简单,简单的建立和绑定,就能完成Service的动作. 建立Service 这里我们创建一个Service,用它来发送消息服务,这里从服务的建立和用Binder 来绑定服务,这样可以建立起Service 和Activi
Django Channels 实现点对点实时聊天和消息推送功能

简介在很多实际的项目开发中,我们需要实现很多实时功能:而在这篇文章中,我们就利用django channels简单地实现了点对点聊天和消息推送功能. 手边有一个项目需要用到后台消息推送和用户之间一对一在线聊天的功能.例如用户A评论了用户B的帖子,这时候用户B就应该收到一条通知,显示自己的帖子被评论了.这个功能可以由最基本的刷新页面后访问数据库来完成,但是这样会增加对后台服务器的压力,同时如果是手机客户端的话,也会造成流量的损失.于是,我们考虑使用websocket建立一个连接来完成这个功能. 但
搭建websocket消息推送服务,必须要考虑的几个问题

近年,不论是正在快速增长的直播,远程教育以及IM聊天场景,还是在常规企业级系统中用到的系统提醒,对websocket的需求越来越大,对websocket的要求也越来越高.从早期对websocket的应用仅限于少部分功能和IM等特殊场景,逐步发展为追求支持高并发,百万.千万级每秒通讯的高可用websocket服务. 面对各种新场景对websocket功能和性能越来越高的需求,不同的团队有不同的选择,有的直接使用由专业团队开发的成熟稳定的第三方websocket服务,有些则选择自建websocket
Springboot+Netty+Websocket实现消息推送实例

前言 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输. Netty框架的优势 1. API使用简单,开发门槛低: 2. 功能强大,预置了多种编解码功能,支持多种主流协议: 3. 定制能力强,可以通过ChannelHandler对通信框架进行灵活地扩展: 4. 性能高,通过与其他业界主流的NIO框架对比,Netty的综
java实现web实时消息推送的七种方案

目录引言什么是消息推送(push) 短轮询长轮询 iframe流 SSE (我的方式) MQTT Websocket 自定义推送 Github地址引言做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里我帮他整理了一下几种方案,并简单做了实现. 案例下载什么是消息推送(push) 推送的场景比较多,比如有人关注我的公众号,这时我就会收到一条推送消息,以此来吸引我点击打开应用. 消息推送(push)通常是
前端与RabbitMQ实时消息推送未读消息小红点实现示例

目录引言 RabbitMQ 搭建 1.开启 mqtt 协议服务端消息发送 1.mqtt 客户端依赖包 2.消息发送者前端消息订阅测试总结引言前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot + rabbitmq 做智能家居> 中说过可以用 rabbitmq 的 MQTT 协议做智能家居的指令推送,里边还提到过能用 MQTT 协议做 we
详解在Spring Boot框架下使用WebSocket实现消息推送

spring Boot的学习持续进行中.前面两篇博客我们介绍了如何使用Spring Boot容器搭建Web项目以及怎样为我们的Project添加HTTPS的支持,在这两篇文章的基础上,我们今天来看看如何在Spring Boot中使用WebSocket. 什么是WebSocket WebSocket为浏览器和服务器之间提供了双工异步通信功能,也就是说我们可以利用浏览器给服务器发送消息,服务器也可以给浏览器发送消息,目前主流浏览器的主流版本对WebSocket的支持都算是比较好的,但是在实际开发中使
iOS Remote Notification远程消息推送处理

远程消息推送处理场景有三种:分别是app还没有运行.app在前台运行以及app在后台运行,下面介绍相关流程及三种场景下处理步骤 1.流程 (1)注册通知首先是在注册远程消息推送,需要注意的是iOS8及以后的系统中注册方法有所改变(同时证书设置以及push权限也需要开启).这一步的目的是,允许app接收远程消息推送. (2)绑定deviceToken deviceToken相当于设备的一个标识,服务器根据这个标识来进行消息推送. ①当用户同意app接收远程消息推送后,手机会向APNs发起一个请求

vue使用stompjs实现mqtt消息推送通知

相关推荐

随机推荐