1.html头部引入mqtt.js

<script src="https://unpkg.com/mqtt/dist/mqtt.js"></script>

2.连接已打开的mqttServer,若无mqtt服务端,点击下载https://www.emqx.io/zh/downloads

<script>// 连接选项const options = {clean: true, // true: 清除会话, false: 保留会话connectTimeout: 4000, // 超时时间// 认证信息clientId: 'test',    //客户端IDusername: 'admin', //连接用户名password: 'public',//连接密码,默认为public,新版本登录后台界面会让你修改密码// 心跳时间keepalive: 60,}// 连接字符串, 通过协议指定使用的连接方式const connectUrl = 'ws://127.0.0.1:8083/mqtt' //连接服务端地址,注意查看ws协议对应的端口号const client = mqtt.connect(connectUrl, options)client.on('connect', () => {console.log('连接成功')// 订阅多个主题client.subscribe(['tourist_enter', 'message_arrived'], //主题{ qos: 1 },  (err) => {console.log(err || '订阅成功')},);// 发布消息client.publish('tourist_enter', 'Hello EMQ X', (err) => {console.log(err || '发布成功')})})//失败重连client.on('reconnect', (error) => {console.log('正在重连:', error)})//连接失败client.on('error', (error) => {console.log('连接失败:', error)})//接收消息client.on('message', (topic, message) => {console.log('收到消息:', topic, message.toString())})
</script>

想要查看或者修改不同协议对应的端口号需要到配置文件(~安装目录/etc/emqx.conf)中查看,部分协议如下:

//tcp协议 (连接地址为 tcp://127.0.0.1:1883)
listeners.tcp.default {
bind = “0.0.0.0:1883”
max_connections = 1024000
}

//ssl(连接地址为 ssl://127.0.0.1:8883)
listeners.ssl.default {
bind = “0.0.0.0:8883”
max_connections = 512000
ssl_options {
keyfile = “etc/certs/key.pem”
certfile = “etc/certs/cert.pem”
cacertfile = “etc/certs/cacert.pem”
}
}

//ws协议 (连接地址为 ws://127.0.0.1:8083/mqtt)
listeners.ws.default {
bind = “0.0.0.0:8083”
max_connections = 1024000
websocket.mqtt_path = “/mqtt”
}

//wss协议 (连接地址为 wss://127.0.0.1:8084/mqtt)
listeners.wss.default {
bind = “0.0.0.0:8084”
max_connections = 512000
websocket.mqtt_path = “/mqtt”
ssl_options {
keyfile = “etc/certs/key.pem”
certfile = “etc/certs/cert.pem”
cacertfile = “etc/certs/cacert.pem”
}
}

js连接mqtt进行通信相关推荐

  1. HTML5网页APP连接MQTT,使用js连接mqtt

    使用js连接mqtt 使用js连接mqtt 描述:使用javascript连接mqtt 代码: ehz-app {{ message }} var app = new Vue({ el: '#app' ...

  2. JS 连接MQTT的方法(mqtt.js的使用方法)

    本文章是介绍 mqtt.js 的使用方法 一.说明 本文章使用的版本是 4.1.x ,没用最新版的原因是 4.2.x 以上版本会报错,具体报错可以看我的另一篇文章,点击查看. 使用的 4.1.x 版本 ...

  3. 前端websocket连接mqtt服务器(Paho-mqtt,mqttws31.js)以及断开重连

    项目需求,java端连接C#,想在前台处理订阅消息,用了websocket和mqtt,查了一上午,因为本机没有node.js,关于paho-mqtt.js的例子连接不了,比如301错误码.什么二进制数 ...

  4. 【阿里云】物联网平台配置ESP8266真实设备AT串口连接,支持MQTT协议通信

    文章目录 1 阿里云物联网平台 2 MQTT.fx虚拟设备连接 2.1 配置设备连接(建立连接) 2.2 配置订阅和发布(数据通信) 3 ESP8266真实设备连接 3.1 配置设备连接(建立连接) ...

  5. websocket连接mqtt实现发布及订阅主题

    2019独角兽企业重金招聘Python工程师标准>>> 环境:linux(ubuntu.Centos7),websocket,mosquitto-1.4.10,libwebsocke ...

  6. MQTT-Eclipse paho mqtt源码分析-连接MQTT Broker

    Eclipse paho mqtt源码分析 MQTT paho mqtt 源码分析 org.eclipse.paho.client.mqttv3.MqttClient MQTT MQTT(消息队列遥测 ...

  7. WebRTC实时通信系列教程8 打通P2P连接和信令通信

    [转载请注明出处: http://blog.csdn.net/leytton/article/details/76836265]  PS:如果本文对您有帮助,请点个赞让我知道哦~ <WebRTC ...

  8. java连接MQTT服务器(Springboot整合MQTT)

    一.业务场景 硬件采集的数据传入EMQX平台(采用MQTT协议),java通过代码连接MQTT服务器,进行采集数据接收.解析.业务处理.存储入库.数据展示. MQTT 是基于 发布(Publish)/ ...

  9. 云服务器部署mqtt协议通信,云服务器部署mqtt协议通信

    云服务器部署mqtt协议通信 内容精选 换一换 虚拟IP(Virtual IP Address,简称VIP)是一个未分配给真实弹性云服务器网卡的IP地址.弹性云服务器除了拥有私有IP地址外,还可以拥有 ...

最新文章

  1. unordered_map 碰撞处理 重哈希
  2. xmake 新增对 Qt 编译环境支持,用自己最喜爱的编辑器去开发 Qt 程序
  3. 为了可持续的测试自动化,透过表面看本质(译)
  4. 信息学奥赛一本通 1176:谁考了第k名 | OpenJudge NOI 1.10 01:谁考了第k名
  5. Java编程的逻辑 (56) - 文件概述
  6. Python练习:求100以内的素数和
  7. java操作数据库 jdbc
  8. matlab连续信号傅里叶变换,连续信号的傅里叶变换及matlab显示
  9. 2019/12/9 K60单片机学习
  10. 【工商银行科技菁英计划笔试】压缩字符串
  11. MiniGUI——第一个程序helloworld
  12. mysql 按中文字段排序
  13. 华为防火墙实现双机热备配置详解
  14. MFS分布式存储安装部署
  15. jq 编码 php解码,jQuery编码转化base64通过AJAX上传
  16. 主流RGBD数据集简介 2019.12.15
  17. Qt 小例子学习33 - QTableWidget 显示点击的行列
  18. yolov5模型的部署之TensorRT
  19. IOS 使用支付宝的注意事项
  20. 用Java计算二月份有多少天

热门文章

  1. 使用Jetcache过程的bug之Buffer underflow
  2. Android中的EditText输入银行卡号四位空一格
  3. 我和欧阳娜娜一起搞研发
  4. 使用EFI安装win7-64位,在不能使用U盘的情况下
  5. libusb,libusbk,winusb的区别
  6. Flex Builder 3 如何弹出“打开文件对话框”,限制选择文件类型
  7. GitOps | 一种云原生的持续交付模型
  8. html5以图片为背景的代码,HTML5画布背景图片
  9. 虚拟IP人物,同时空出现——思念党的福音
  10. 内网异地备份_用批处理实现局域网内的异地备份