Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to implement the Web subscription side, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Let's implement the Web subscriber.

MQTT over WebSocket

What we want to implement is a MQTT Client that can be run in a browser. MQTT is based on the TCP protocol, in the current mainstream browsers, it is impossible to use JavaScript to directly open a TCP connection, so there is no way to directly use MQTT in the browser.

Socket API can solve this problem, but browser support for Socket API is still very limited. We can use MQTT over WebSocket to use MQTT in browsers, because most major browsers support WebSocket. The principle of MQTT over WebSocket implementation is to encapsulate MQTT packets in WebSocket frames and send them:

MQTT over WebSocket also requires Broker support, but most Broker currently supports it, including Public Broker used in this course.

Connect to Broker

First of all, you need to add the JS file that supports MQTT over WebSocket to HTML:

Then connect to Broker:

Var client = mqtt.connect ("ws://iot.eclipse.org/ws")

Notice here that the protocol part of the URL of Broker becomes "ws".

We do not specify a Client Identifier here, and the Client library or Broker will automatically generate a Client Identifier for us. In this way, conflicts do not occur when multiple Web subscribers are opened. But it is not possible to use persistent sessions, so in the actual project, you should assign a unique Client Identifier to each Web subscriber, such as the user ID as part of the Client Identifier.

Next, subscribe to related topics:

Client.subscribe ("front_door/detection/objects", {

Qos: 1

}, function (err) {

If (err! = undefined) {

Console.log ("subscribe failed")

} else {

Console.log (`subscribe succeeded)

}

})

Processing messages

As we said in the last lesson, when we accept a message, we need to deduplicate the message:

Var receivedMessages = new Set ()

Client.on ("message", function (_, payload) {

Var jsonMessage = JSON.parse (payload.toString ())

If (! receivedMessages.has (jsonMessage.id)) {

ReceivedMessages.add (jsonMessage.id)

/ / then display the results on the page

}

})

For simplicity of demonstration, a Set is used to hold the ID of the received message. In a real project, you can use a slightly more complex data structure, such as a cache that supports Expiration, to store the ID of received messages.

Then display the received results on the page (here using Table to display):

Var date = new Date (jsonMessage.timestamp * 1000)

$('# results tr:last') .after (`${date.toLocaleString ()} ${jsonMessage.objects}

`)

The end result of the Web subscriber side is as follows:

On how to achieve Web subscriber side to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.