15 Publish Subscribe.md

Publish Subscribe

Up to this point all the activities have been using the HTTP Protocol, which uses a request-response process (the client requests a resource and the server responds with this resource). If this seems unfamiliar you should work through the HTTP Protocol worksheet.

Whilst this approach works fine for delivering content to a web browser it is not a useful approach for certain applications. Imagine a chat room where you had to refresh the page to view new messages.

In this worksheet you will learn how to use a new HTML5 websocket protocol that allows a full duplex (2 way) communication over a single TCP connection. We will then explore the MQTT protocol which can be run over websockets and is used to implement a push message system, technically called publish-subscribe.

2 Set Up

Start by installing the Mosquitto Tools.

If you are using MacOS you should install the Brew Package Manager and use this to install Mosquitto using brew install mosquitto.

mosquitto_sub -h test.mosquitto.org -t "#" -v

1 The MQTT Protocol

Now we have the tools installed we can start using the protocol. You have installed 2 tools, mosquitto_pub is used to publish messages and mosquitto_sub subscribes to a channel. We will use the test.mosquitto.org broker.

Start by opening two terminal windows:

In the first window we will run the mosquitto_sub command and subscribe to a topic called 205CDE/XXX where XXX is your university username.

$ mosquitto_sub -h test.mosquitto.org -t 205CDE/XXX

1. The -h flag allows us to specify the host, in this case test.mosquitto.org.
2. The -t flag allows us to specify the topic, in this case 205CDE/XXX (remember to substitute your username)

In the second terminal we will run the mosquitto_pub command to publish messages to our topic.

$ mosquitto_pub -h test.mosquitto.org -t tyers/mark  -m 'hello world'

1. The -h flag allows us to specify the host, in this case test.mosquitto.org.
2. The -t flag allows us to specify the topic, in this case 205CDE/XXX (remember to substitute your username)
3. The -m flag allows us to specify the message, in this case hello world.

If you look at the first terminal window (running mosquitto_sub) you should see your message displayed.

2.1 Test Your Understanding

Working in small groups of between 2 and 4 people:

1. Decide on the topic name you will use.
2. Everyone runs the mosquitto_sub tool and subscribes to this same topic.
3. Each person launches a new terminal in a new pane (so you can see both terminal windows).
4. use the mosquitto_pub tool to send a message to your chosen topic name.
5. Look at the output of your mosquitto_sub command (in the first terminal window).

What have you produced? Can you think of any application for this...

3 Subscribing Using NodeJS

Open the subscribe.js file and study the contents:

1. When you run the script notice that the title is displayed in colour by passing 2 parameters to console.log(), the first parameter defines the colour:
   1. The string before the %s string defines the colour to be used. There is a reference that defines these.
   2. The string aftet the %s string resets the colours to default values so that any subsequent text reverts back to the defaults.
2. We import the mqtt package and use this to create a new client object by calling the connect() function and passing in the URL.
   1. Notice we specify the MQTT protocol rather than HTTP, by specifying mqtt://.
   2. We are connecting to the test.mosquitto.org server.
3. The client.on() function allows us to call anonymous functions to respond to key events:
   1. Once we have connected we subscribe to one or more topics.
   2. When a message is received we have a callback that passed both the topic and message as parameters.
   3. The \t character combination inserts a tab character.

3.1 Test Your Understanding

1. Change the script so it subscribes to your group's chosen topic. Run it to make sure it is receiving the messages.
2. Subscribe to an additional topic called 205CDE/announcements and use the mosquitto_pub tool to publish some messages to the entire class!
3. Modify the script so that the topic names are dimmer than the messages.
4. Modify the script so that any messages published to the 205CDE/announcements are coloured in red.

4 Publishing Using NodeJS

5 Creating a Web Client

https://github.com/jpmens/simple-mqtt-websocket-example

Websocket

Web Sockets is a bidirectional communication technology which operates over a single socket. It is implemented using a JavaScript object called WebSocket. This can be used to send data to a server and receive data through an event handler.

We start by creating a new WebSocket object passing the URL of the server.

const ws = new WebSocket(url)

This object contains a readyState property that represents the state of the connection. It contains one of four different values.

| value | meaning | | ----# | ----------------------------------------------------------- | | 0 | the connection has not yet been established | | 1 | the connection is established and communication is possible | | 2 | the connection is going through the closing handshake | | 3 | the connection has been closed or could not be opened |

It has two functions:

1. Data can be sent to the server using WebSocket.send().
2. The connection can be terminated using WebSocket.close().

There are four events associated with the WebSocket object.

event	event handler	description
open	Socket.onopen	socket connection is established
message	Socket.onmessage	client receives data from server
error	Socket.onerror	error in communication
close	Socket.onclose	connection is closed