ProMicro is outdated!! Creating a keyboard & mouse with ESP32-S3 #3 Communicating efficiently with WebSockets

I previously announced that I would be enhancing the macro features, but I have changed my plans to work on WebSockets instead. Using this should allow for performance improvements.

What is a WebSocket?

It's not exactly a recent thing, but there are services like Google Sheets or SharePoint Excel where multiple people can edit on a browser at the same time. Now, if you know how web servers work, you should
have some questions about this.
Why are the other person's changes applied to my screen in real-time? If you think about it carefully, the basic structure of a web server is that the client sends a request to the server, and the server responds to it. In other words, what I'm trying to say is that

the other party can send changes to the server but the server should have no way to pass those changes to other collaborators. So, I looked into it and found out about something called WebSocket
. This establishes a connection at the start, allowing both the client and server to communicate freely in both directions
. I see. With this, the server can notify that there has been a change or send the changes directly. Furthermore, this standard
establishes the communication at the beginning, so after that, there is very little data like unnecessary headers. In other words, the current keyboard implementation sends instructions by
accessing a URL using GET, but with this, every time a request header must be sent and the server must return a response, so such processing occurs, which takes some time
. However, if you change that part to this WebSocket, you only need to send and receive a tiny amount of data. Since the server doesn't need to return a response, it is expected that the processing will become very light
. So, to incorporate this into future projects, let's first establish WebSocket technology with this keyboard.

Arduino side

This time, I will use the "arduinoWebSockets" library.
Please download it from the link below and install the library in ZIP format.

Basic format
The basic format for a WebSocket server using this library is as follows.
Please watch the video for a detailed explanation.

JavaScript side

Basic format
On the JavaScript side, you can use WebSockets in the following format.
The following handles the next events.
On connection / On disconnection / On error / On data reception
Also, the function at the bottom is for sending data.

The following is the current keyboard program replaced from Fetch to WebSocket.

Performance comparison

I compared the time between using Fetch and after converting to WebSocket.
Fetch was checked via the log when sending macro codes.
Well, it's about 50ms, I suppose.
In contrast, WebSocket is 7ms. However, since this is the difference between transmission time and response time, it is expected to be even faster if you just need to get it delivered.
This seems like it will become the foundation for future projects.

Summary

This time, I changed my plans and implemented WebSockets.
As I actually tried it, I found that the operation becomes quite snappy, so I will make WebSockets the standard for communication in future projects.
Now, next time I really want to create the macros.