基于浏览器的Web应用,一般都是通过JavaScript来和服务器进行交互,这时可以采用基于WebSocket的MQTT。大部分Broker都支持MQTT over WebSocket。这样做的好处在于可以很好的利用浏览器的WebSocket,而服务端无需在开放80/443以外的端口。
MQTT本省和WebSocket没有什么关系,但是Broker可以处理WebSocket里的MQTT包。
设置Mosqiutto Broker
/etc/mosquitto/mosquitto.conf
listener 1883
protocol mqtt
listener 9001
protocol websockets
重启服务器后,Broker就同时支持一下两种访问形式:
引用
tcp://localhost:1883
ws://localhost:9001
测试代码
mosquitto和paho都已经封装好了这部分代码,直接下载下来用即可。
ws.html http://mosquitto.org/js/mosquitto-1.1.js
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='mosquitto-1.1.js'></script>
<script type="text/javascript">
var mosq = null;
var url = "ws://localhost:9001/";
var topic = "test/rensanning/ws";
var time = 0;
function conn() {
if ("WebSocket" in window) {
console.log("WebSocket is supported by your Browser!");
mosq = new Mosquitto();
mosq.connect(url);
mosq.onconnect = function(rc) {
console.log("CONNACK " + rc);
};
mosq.ondisconnect = function(rc) {
console.log("Lost connection");
};
mosq.onmessage = function(topic, payload, qos) {
console.log("PUBLISH " + topic + " " + payload);
};
} else {
console.log("WebSocket NOT supported by your Browser!");
}
}
function sub() {
mosq.subscribe(topic, 0);
}
function pub() {
time = time + 1;
var msg = "ws test by mosquitto-1.1.js. " + time;
mosq.publish(topic, msg, 0);
}
</script>
</head>
<body>
<div>
<a href="javascript:conn()">connection</a><br/>
<a href="javascript:sub()">subscribe</a><br/>
<a href="javascript:pub()">publish</a>
</div>
</body>
</html>
ws-paho.html https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='mqttws31.js'></script>
<script type="text/javascript">
var client = null;
var url = "ws://localhost:9001/";
var topic = "test/rensanning/ws";
var time = 0;
function conn() {
if ("WebSocket" in window) {
console.log("WebSocket is supported by your Browser!");
client = new Paho.MQTT.Client(url, "ClientId");
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({onSuccess:onConnect});
} else {
console.log("WebSocket NOT supported by your Browser!");
}
}
function sub() {
client.subscribe(topic);
}
function pub() {
time = time + 1;
var msg = "ws test by mqttws31.js. " + time;
var message = new Paho.MQTT.Message(msg);
message.destinationName = topic;
client.send(message);
}
function onConnect() {
console.log("CONNACK");
}
function onConnectionLost(responseObject) {
console.log("Lost connection");
if (responseObject.errorCode !== 0)
console.log("onConnectionLost:" + responseObject.errorMessage);
}
function onMessageArrived(message) {
console.log("PUBLISH " + message.destinationName + " " + message.payloadString);
}
</script>
</head>
<body>
<div>
<a href="javascript:conn()">connection</a><br/>
<a href="javascript:sub()">subscribe</a><br/>
<a href="javascript:pub()">publish</a>
</div>
</body>
</html>
挨个执行所有的connection,再挨个执行subscribe,最后挨个publish消息们,可以看到,无论是websocket还是mqtt的消息都可以正确处理。
查看一下websocket的HTTP和Packet:
- 大小: 19.1 KB
- 大小: 16.3 KB
- 大小: 42.4 KB
- 大小: 15.2 KB
- 大小: 58.9 KB
- 大小: 2.5 KB
分享到:
相关推荐
最近公司在一个物联网项目中为了解决页面主动实时获取设备位置信息和一些状态信息,而尝试使用了mqtt协议的方案,实现类似html5 webSocket协议实时通讯的替代方案。项目运行npm installnpm run dev注意:页面运行...
mqtt-websocket mosquitto 1.4.9
MQTT Websocket客户端 使用MQTT协议和Node JS的Websocket客户端。 该项目是实习的任务。 该应用程序托管在Heroku上,可以在找到实时版本。先决条件: 节点JS NPM Chrome(能够运行测试)用法: # installing ...
用于 MQTT 的 Paho Java 客户端
Activemq-MQTT-Websocket库Js文件mqttws31.js 前端使用Websocket连接Activemq中间件的Js库文件
安卓 andorid mqtt websocket andorid mqtt websocket app
mica mqtt mica-mqtt 基于 t-io 实现的简单、低延迟、高性能 的 mqtt 物联网开源组件。使用详见 mica-mqtt gitee 源码 mica-mqtt-...添加 websocket 支持(已预研成功)。 优化处理 mqtt session,以及支持 v5.0
mqtt-websocket
MQTT 控制报文格式 控制报文 操作行为 安全 使用 WebSocket 作为网络传输层 t 一致性目标。
Java工程运用MQTT技术实现对Android 客户端消息推送
mqtt支持ws的mosquitto工具和node测试Demo;该压缩包已包含了所有需要的DLL,上一次资源中缺少部分DLL,mosquitto在一些电脑上不能运行。测试方法:mosquitto -c mosquitto.conf -v,正常开启后会显示websocket 已...
mqtt-client是一个静态元素,它执行与侦听 WebSocket TCP 端口的 MQTT 代理的连接。 该元素必须在每个使用mqtt-client-sub或mqtt-client-pub 的自定义元素中声明。 如果声明了多个相同id 的mqtt-client ,则只有带...
不支持Websocket交互,通过反复查阅资料,使用基于.Net Core(3.1) 和MQTTnet.AspNetCore(3.0.9)的服务端程序可以实现同时支持cs客户端、Websocket客户端的MQTT服务端,可以下载参考直接开发。
mqtt-画布样本将使用 React 和 WebSocket 的 Canvas 应用程序合并到 Salesforce 并实时绘制从 MQTT Broker 订阅的数据的示例 [MQTT Broker] -- (Websocket) -- [MQTT Subscriber/React] -- (HTTP/SignedRequest) -- ...
mqtt协议也支持websocket进行通信,在开发过程中,我们经常遇到mosquitto或者其他mqtt的broker配置websocket之后,不知道能不能用,这里是我们以前写的一个js的测试代码,只要把配置文件的ip地址和端口修改为自己的...
Javascript client mqtt
具体参看官网,Moquette是基于netty(老版本使用的是mina) 的模型的一个Java MQTT broker,支持websocket,SSL。 如果想直接启动 moquette-broker-0.4-jar-with-dependencies.jar的jar文件方式 可以执行一些命令实现 ...
mqtt-ws-bridge.go 适用于mqttws31.js的websocket-mosquitto桥示例。如何设置 $ sudo apt-get install mosquitto mosquitto-client$ sudo apt-get install golang$ sudo apt-get install git mercurial$ vi ~/.bash_...
解决初始使用mqtt , websocket的困绕,提示不支持html5的内容,修改增加一些服务器的提示界面,简化mqtt调试,让初次使用都减少时间浪费。