WebSocketsServer VS WebSocketsClient or both?

Projects Programming
1

Hi

I'm quite new to the world of Arduino, I'm working on a project that has a Access point, then a web server (once the SSID and Pass is set in the AP)

I'm using a JSON file on SPIFFS to store the data. I want to try and refine my code using WebSockets. One of the most frustrating things I have found with Arduino libraries is the lack of documentation / where to find it.

So first question, what's the difference between WebSocketsServer and WebSocketsClient and which one should I be using?

Second (main) question. I may end up regretting this, my plan was to load and save data to the HTML pages via WebSockets.
I can get the HTML to call for the data via JS which then sends a JSON over which the JS populates the form.
Now I want to save the data, in my first version I did an HTML post that Arduino handled and saved the data to the JSON file, then reloaded the HTML page which read it.

I've come to realise than I think I will need to have 2 WebSockets open (TX and RX) so I can handle the requests as needed, so should I be using WebSocketsServer for TX and WebSocketsClient for RX?

Am I going to cause myself more issues than it worth doing it this way? Is there a better way to look at this as I'm starting to realise its going to be a lot of coding to handle each request back and forth.

I could go back to getting the JS to read and load the JSON off the SPIFFS as per my first version, POST for saving and just have the WebSockets for just telling the Arduino to run functions, such as a test which was why I starting down this road in the first place.

Any advice from your experience would be great.

Brian

2

So first question, what's the difference between WebSocketsServer and WebSocketsClient and which one should I be using?

The first is for a server, the later is for a client. Which one to choose depends on the task you're trying. As you haven't told us, we cannot help.

I can get the HTML to call for the data via JS which then sends a JSON over which the JS populates the form.
Now I want to save the data, in my first version I did an HTML post that Arduino handled and saved the data to the JSON file, then reloaded the HTML page which read it.

Excuse me, but this is buzzword ping-pong. HTML cannot call anything as it describes just page content. I don't understand if your Javascript code sends JSON to the server or the server sends JSON to the client.
HTML cannot post anything, you probably mean HTTP POST. The Arduino cannot save any data to a file without additional hardware. I guess you're not using an Arduino but some kind of ESP board. If you don't specify it we on this forum always expect you to use an Arduino UNO.
If you really implemented above "procedure", post the complete code as the code might better explain what you're actually doing.

I've come to realise than I think I will need to have 2 WebSockets open (TX and RX) so I can handle the requests as needed, so should I be using WebSocketsServer for TX and WebSocketsClient for RX?

I don't see a need for WebSockets in what I understood of above description. A simple AJAX call is probably a better fit but my opinion might change once I now what you're trying to achieve.

3

Hi Pylon

Thanks for you reply

Will try to give more details. Sorry if I'm not using the correct terms, I'm using what I know. Here is what I am doing….

I have a an ESP8266, didn't realise I had to specify the board, very new to Arduino and thought that all boards would run the same code, sorry. I've posted the relevant code below

My ESP8266 is running in AP mode, has a server running on it, is also has a WebSocket, I'm using WebSocketsServer as I'm guessing the ESP is the server.

When the client connects to the AP WiFi and goes to 192.168.4.1 they get the HTML page, when the HTML Page loads is runs this script

InitWebSocket();

function InitWebSocket() {
        websock = new WebSocket('ws://' + window.location.hostname + ':81/');
        websock.onmessage = function(evt) {
            JSONobj = JSON.parse(evt.data);
            document.getElementById('netssid').value = JSONobj.netssid;
            document.getElementById('netpass').value = JSONobj.netpass;
        }
    }

websock.onopen = function () {
  websock.send("getdata");
  return; 
};

The InitWebSocket(); set up the WebSocket, the websock.onopen sends a message of "gerdata", this then triggers the ESP8266 to send back a JSON string (I would refer to this a the HTML making a call to the server)

This gets handled in the

webSocket.onEvent(webSocketEvent);

and sends

webSocket.sendTXT(JSONtxt);

This JSON string then gets handled by the JS script on the HTML page with the websock.onmessage = function(evt) which populates the form fields, this all works 

The next stage is if the user clicks on the save button on the HTML page, is will "send" a JSON string to the ESP8266 via this script.

function savedata() {
	 JSONtxt = " savedata={\"netssid\":\""+document.getElementById('netssid').value+"\",\"netpass\":\""+document.getElementById('netpass').value+"\" }";
	websock.send(JSONtxt);
}

This evening I worked out the best way for me to know what I need to do with the received data string was to put a " command" at the beginning, so once this JSONtxt is received is will get handled in the webSocketEvent I will split the data string up (haven't work out how yet) so I end up with something like

String command = savedata
String JSONStr = {"netssid":"myssid","netpass":"mypass" }

I will then do what I need with it.

I am aware this is a lot of messing around, I could do this with a JS script to read the JSON off the SPIFFS and HTTP_POST to save it, however this in only the first stage, the next stage once the user has connected to their network they will have access to the full HTML page with a lot more on it.

For a number of reasons I don't want to use HTTP_POST as I don't want the page to refresh, and can't use AJAX to do the HTTP_POST as I can't guarantee they will have internet access to download it, and don't want to have to mess about with having to put it on the SPIFFS drive.

Once again, thanks

4

If you use a WebSocket for the communication with the javascript client the server is responsible itself to know where a request starts and where it ends (think of a WebSocket as a serial interface, you just receive what the other end sends).
If you change your code to use AJAX calls (so standard HTTP connections), the server part get much easier and (because of the reduced complexity) more robust.

can't use AJAX to do the HTTP_POST as I can't guarantee they will have internet access to download it

To use an AJAX call you simply need a network connection to the server as you do with WebSockets. I get the impression you have a lot of mis-information you take for given.

don't want to have to mess about with having to put it on the SPIFFS drive.

What exactly do you want to store on the SPIFFS drive? AJAX is a functionality todays browsers offer and BTW, they did offer that much earlier than the supported WebSockets. WebSockets are only used if the server needs to send data to the client at any time (server push), for everything else you should use AJAX calls to save resources on the server, especially if you're using an embedded platform.

5

Hi pylon

Thanks for your reply, its been a lot of learning of the past few weeks. As you say some of this was was my lack of understanding.

Since making this post I have learnt a lot, I now have is fully working system via WebSockts.

The ESP sends strings of "command=Json" and the HTML handles it via JS, and the HTML page can send strings back which gets handled by the ESP, both working without fault :slight_smile:

The data getting past back and forth is stored in the SPIFFS in JSON format

With Ref to AJAX, from what I have read you need to put a link in the HTML for it, i didn't realise it was part of the browsers

Thanks

Brian