VUE连接MQTT即时通讯

MQTT安装
MQTT安装EMQ安装请参考上一篇：CentOS7.0安装EMQ代理服务
npm安装

npm install mqtt

前端代码实现
mqtt服务器连接参数配置：sysconstant.js

export const MQTT_SERVICE = 'ws://172.80.5.222:8083/mqtt'
export const MQTT_USERNAME = 'admin'
export const MQTT_PASSWORD = 'admin123'

实现代码：

<template><div><div>测试数据:{{ msg }}</div></div>
</template><script>
import mqtt from 'mqtt'
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '../util/sysconstant.js'
var client
const options = {connectTimeout: 40000,clientId: 'mqtitId-Home',username: MQTT_USERNAME,password: MQTT_PASSWORD,clean: true
}
client = mqtt.connect(MQTT_SERVICE, options)
export default {name: 'viewtest',data () {return {msg: ''}},created () {this.mqttMSG()},methods: {mqttMSG () {// mqtt连接client.on('connect', (e) => {console.log('连接成功:')client.subscribe('/World1234', { qos: 1 }, (error) => {if (!error) {console.log('订阅成功')} else {console.log('订阅失败')}})})// 接收消息处理client.on('message', (topic, message) => {console.log('收到来自', topic, '的消息', message.toString())this.msg = message.toString()})// 断开发起重连client.on('reconnect', (error) => {console.log('正在重连:', error)})// 链接异常处理client.on('error', (error) => {console.log('连接失败:', error)})}}
}
</script>

实现效果:
测试发送MQTT主题消息

前端消息展示：

至此vue+mqtt实现搭建完成

VUE连接MQTT即时通讯相关推荐

python怎么连接socket_python socket连接实现即时通讯
最近闲暇无事,好多人问即时通讯怎么做的,尤其是对于当下大火的python更是如此,大多数人都知道一个xmpp或者xampp框架,于是开了简书,大致说明一下不明白tcp/udp协议底层原理的,自行百度 ...
IM即时通讯H5端，MQTT
做IM即时通讯的成果: 成功实现了H5端和APP端之间的通信(H5和H5之间也已实现),将H5嵌入到微信小程序,并且开发了SDK使得小程序也能实时得到消息的数量和消息内容. 遇到的难点 (1)消息的状 ...
在VUE中利用MQTT协议实现即时通讯
前言建议先阅读: 在Node.js下运用MQTT协议实现即时通讯及离线推送以前尝试在vue中用上mqtt,了解到mqtt实质上是基于websocket进行数据通信,所以上文中在node下实现的服务 ...
RabbitMQ实现即时通讯-MQTT协议
有时候我们的项目中会用到即时通讯功能,比如电商系统中的客服聊天功能,还有在支付过程中,当用户支付成功后,第三方支付服务会回调我们的回调接口,此时我们需要通知前端支付成功.最近发现RabbitMQ可以很 ...
兼具高效与易用，融云 IM 即时通讯长连接协议设计思路
无论是 PC 端还是移动端,接入网络实现通信都需要建立双端的连接.关注[融云全球互联网通信云]了解更多客户端和服务端建立连接后不断开,然后进行通信(也就是发送报文)的方式就是长连接. 与之相反,短连 ...
仿微信 java IM即时通讯 | uni-app IM即时通讯 | vue IM即时通讯桌面端 | 源码出售
仿微信 uniapp IM 即时通讯源码 & 即时通讯知识小科普源码,不加密,方便二开! 私有云服务,高效稳定,数据安全,无第三方服务拓展性强,可拓展任意的消息体类型! 性能优秀,资源足 ...
即时通讯-Android推送方案（MQTT）
这篇文章是居于前面的几篇博客,如果还不知道ActiveMQ服务器的请看:即时通讯-ActiveMQ环境搭建 1.什么是MQTT协议 MQTT(Message Queuing Telemetry Tra ...
即时通讯的业务场景和需求与短连接，长连接，Socket介绍大杂烩
即时通讯的业务场景和需求即时通信(Instant Messaging,简称IM)是一个允许两人或多人使用网络实时的传递文字消息.文件.语音与视频交流. 即时通讯技术应用于需要实时收发消息的业务场景. ...
go 连接服务器并存放图片_Go 在马蜂窝即时通讯服务建设中的实践
即时通讯(IM)功能对于电商平台来说非常重要,特别是旅游电商. 从商品复杂性来看,一个旅游商品可能会包括用户在未来一段时间的衣.食.住.行等方方面面:从消费金额来看,往往单次消费额度较大:对目的地的陌 ...
企业即时通讯连接全集
即时通讯.企业即时通讯.局域网即时通讯.即时通.即时消息.即时通信 ... Active Messenger是一款可扩展的企业即时通讯平台(EIM). ... AM客户端可以添加网页插页,可以OA等系 ...

VUE连接MQTT即时通讯

VUE连接MQTT即时通讯相关推荐

最新文章

热门文章