top of page

WEEK 10:
MQTT & Web Sockets

NOTEs

TCP is a polite protocol. it checks if the client receives the message, and acknowledges to the client that the feedback is received. UTP is faster. It does not care if some bytes are dropped. ex. audio and video glitches. 

Network Sockets are temporary. It is built when a connection starts and is dismantled when the communication ends. 

Ports are like doors of a room for information to enter. You may listen to only one port and you can even close the other doors. 80 for HTTP, and 443 for HTTPS. If you send a request to the wrong port, the connection will not be built. So the server must inform the clients of the port number it is listening to, just like telling other people your phone number, so others can call you.

 request.rawHeaders : everything you send to the server, including information such as User Agent. 

螢幕截圖 2022-04-12 下午6.49.19.png
螢幕截圖 2022-04-12 下午6.49.19.png

MQTT

螢幕截圖 2022-04-12 下午8.18.00.png

Data Storage: The MQTT broker sends data to any MQTT client, for example, a glitch node.js file. Then the glitch makes an HTTP request to send the data to Google spreadsheet. 

 ParseInt : transfer string to number.

image.png

Glitch Sample

Glitch is like a postman standing in between the client and my server. Though Glitch itself is a server, you need to have your own server on the Glitch server so the Glitch know where to pass the client's message to.  

Light Remote Contro

image (1).png

The github HTTP server allows the phone to access to the MQTT broker and send message. Everone can have access to this page.

 

This client cannot directly communicate with the light. It only transfer what it want the light to do to the broker. 

Anyone have access to the QR code can send message to the broker.

This page listens to the hue data from the broker.

This is a private client. The light can be changed only if this client allows the change order to be passed to the Hue hub.

 

If this client is not running, the phone will still send datato the broker, but the light will not get the data. 

WebSocket

螢幕截圖 2022-04-12 下午11.00.56.png

QUESTIONs

The client makes an HTTP connection to the server (open the webpage), then sends another request to the server to open a websocket (then can use the websocket function to updata and see the latest data). HTTP is like a private video call, while WebSocket is like a zoom meeting. So, the client is an array. ws is the web socket library in node.

 var wsServe=require('express-ws')(server); : create a web socket server and it runs on the "server" server. 

 server.ws('/', handleClient); open a socket when no specific request is made (request '/').

Do all the subscribers of a subtopic receive the data update at the same time or one by one?

The update is more like broadcast, all subscribers receive the news at the same time. 

What does remoteDiv.html mean?

Cannot connect to Shiftr from MQTT explorer?

What is the difference between ExpressWsServer and jsClient for a web socket?

螢幕截圖 2022-04-12 下午10.16.02.png
螢幕截圖 2022-04-13 上午10.45.22.png

Check the host, protocol, and port number.

Input the username and password.

 

Do not use sandbox370, because sandbox370 is built for low-density streams such as sensor values. 

remoteDiv is defined as the remote client of the broker. remoteDiv.html means write something on the html page. 

FINAL PROJECT IDEA

I plan to continue developing my midterm project, the STANDIN. The last version works through Bluetooth, so the central and the peripheral have to stay very close. It works in conditions such as when a user wants to have body interaction with the next door neighbor without showing up in person (maybe because they are isolated due to covid-19). However, the desire for remote touching is much stronger when people are distant apart. In the next step, I am going to build an MQTT to allow the two devices to connect through the Internet. Then it is possible for me to mail one of the devices back to my home country and remotely hug my parents.

 

There was only single-way communication in the last version. The action sender can know the receiver's reaction to the fake hand movement only by vision. Since the new version does not allow the two users to see each other (because they are too far apart), I am going to notify the sender the receiver's reaction directly through the device. This feedback will be accompolished by touch sensors on the fake hand and DC vibrators on the glove. Mini DC vibrators over the glove will recreate the touch that fall on the fake hand. 

New Library: Arduino Client MQTT lib, 

New Materials: fiber sensors, DC vibrators, strength sensors. 

IMG_9010.heic
螢幕截圖 2022-04-19 下午6.37.31.png
螢幕截圖 2022-04-19 下午6.37.09.png

Glove

Fake Hand

Interface: 

connection indicator. 

message send indicator

history data record page.

QR code. 

Further to decide: 

What is the context of this interaction? How to imply the receiver what they can do to interact with the fake hand? (without breaking it)? What conventional action can be exchanged?

The interaction is not mirrored (you wave, I wave). How does the glover know more about the receiver's reaction? more than the touched position? Like the exact gesture to touch the fake hand? 

bottom of page