WelcomeWelcome | FAQFAQ | DownloadsDownloads | WikiWiki

Author Topic: HTML5 + websocketd  (Read 5279 times)

Offline gavinmc42

  • Sr. Member
  • ****
  • Posts: 301
HTML5 + websocketd
« on: October 20, 2015, 08:54:40 PM »
Been busy making web servers running on IoT Pi's.
ie gadgets with browser based control interfaces.

Web Guru's bear with  me as I explain it to myself.
For those who don't know webpages are client/server.
Client makes a connection, requests a html webpage, server delivers it and then the connection closes.

In my case Linux/PC browsers and Pi's running picore with busybox-httpd as the server.
This is fine if you want to just serve pages but for real time control it is a bit slow.
The Pi' spend a lot of time updating the html pages and re-serving them.
Each time it has to send a lot of html data.

Websockets are built into the HTML5 standard and most browsers can handle it now.
Instead closing the connection the socket stays opens and data can be passed back and forwards.
If you only want to update a single sensor data, like temperature you can just send a byte or so of data etc.

Now I am not sure if Busybox-httpd can do websockets, this is all new to me.
So I went googling.
Here is a way to use nc and shell scripts -  https://gist.github.com/apk/2414478
nc is in busybox as standard.

Then I found this - http://websocketd.com/
Downloaded the Arm binary and wow it just worked.
Er, at least the binary fired up and the -h command worked.
Still further testing to be done but I thought some of you maybe interested in it.

Note: edit the demo count.sh bash script for busybox's ash shell.
Will be interesting to see if it can handle video.

Bela - tcz please, no hurry, the single binary works fine.

Regards
Gavin









Offline Zendrael

  • Sr. Member
  • ****
  • Posts: 362
    • Zendrael's home of projects
Re: HTML5 + websocketd
« Reply #1 on: October 27, 2015, 12:17:10 PM »
Hi,

If you do not want to reload the whole page all the time, try using AJAX calls - much faster with a busybox-httpd server.

Offline gavinmc42

  • Sr. Member
  • ****
  • Posts: 301
Re: HTML5 + websocketd
« Reply #2 on: October 27, 2015, 09:46:23 PM »
AJAX, so last year:)

Just got websocketd running some shell script updating data 40 times a second.
Actually have to slow it down a bit with a sleep 0.1 to save cpu cycles.
Will tweak it a bit, somewhere between 0.1 and 1sec should be ok.
Much less for plotting.

Will try lua, micropython one day but I expect that to be faster.

Offline Rich

  • Administrator
  • Hero Member
  • *****
  • Posts: 11256
Re: HTML5 + websocketd
« Reply #3 on: October 27, 2015, 09:51:56 PM »
Hi gavinmc42
Quote
Just got websocketd running some shell script updating data 40 times a second.
Is it always the same data? If so, there may be some caching going on making things appear faster than they really are.

Offline gavinmc42

  • Sr. Member
  • ****
  • Posts: 301
Re: HTML5 + websocketd
« Reply #4 on: October 27, 2015, 11:42:52 PM »
Hi Rich,

Could be some caching, but I doubt it.
I looked at the console log and it shows me it got data about 40 or 41 times a seconds.
In the ws.onmessage javascript function I get it to write to console.log every time.
I use a Windows chrome browser inspect element feature, it has a handy counter.
Still to test with firefox, mobile browsers etc, have not tested with the Raspbian browser.

Hmm could be interesting to make Raspberry Pi network games.
Websockets for gaming pops up a lot on google.

Regards
Gavin

Offline gavinmc42

  • Sr. Member
  • ****
  • Posts: 301
Re: HTML5 + websocketd
« Reply #5 on: October 28, 2015, 01:24:48 AM »
Just wrote a micropython loop printing an incrementing value.
Seems even faster, had to use a stopwatch, over 10000 per 10 seconds, so 1000/sec updates.
Refreshing the page from the browser resets the loop, ie disconnects, reconnects the running program.
Need to figure out how an already running program can pass the values.

Offline Zendrael

  • Sr. Member
  • ****
  • Posts: 362
    • Zendrael's home of projects
Re: HTML5 + websocketd
« Reply #6 on: October 28, 2015, 02:05:00 AM »
Try to use node.js as your websocket server and simple client JS with sockets too.

Offline gavinmc42

  • Sr. Member
  • ****
  • Posts: 301
Re: HTML5 + websocketd
« Reply #7 on: October 28, 2015, 05:40:22 PM »
Nodejs would be good I think but my javascript coding experience is very low at the moment.
I also think node need the socket.io plugin, not sure it any webserver has native ws support yet.
Only just figured out how ws works in real device a few days ago.

With websocketd I can use any language I already know.
Now that I know how the client end JS works it will be easier to do a node server?
I have been experimenting with demos on nodejs for over a year, but have yet to roll it out in a device.

Offline Zendrael

  • Sr. Member
  • ****
  • Posts: 362
    • Zendrael's home of projects
Re: HTML5 + websocketd
« Reply #8 on: October 29, 2015, 07:23:01 AM »
A simple websocket server with node.js (I hope it could be useful):

Code: [Select]
#!/usr/bin/env node
var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Recebida requisição para ' + request.url);
    response.writeHead(404);
    response.end();
});

server.listen(12345, function() {
    console.log((new Date()) + ' Servidor escutando na porta 12345');
});

wsServer = new WebSocketServer({
    httpServer: server,
    // You should not use autoAcceptConnections for production
    // applications, as it defeats all standard cross-origin protection
    // facilities built into the protocol and the browser.  You should
    // *always* verify the connection's origin and decide whether or not
    // to accept it.
    autoAcceptConnections: false
});

function originIsAllowed(origin) {
  // put logic here to detect whether the specified origin is allowed.
  return true;
}

wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
      // Make sure we only accept requests from an allowed origin
      request.reject();
      console.log((new Date()) + ' Conexão de origem ' + request.origin + ' rejeitada.');
      return;
    }

    var connection = request.accept('echo-protocol', request.origin);
   
    console.log((new Date()) + ' Conexão de '+ connection.remoteAddress +' aceita.' );
    //console.log( connection.remoteAddress );
   
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Recebida mensagem: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log('Recebida mensagem Binária de ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
   
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Cliente ' + connection.remoteAddress + ' desconectado.');
    });
});

Offline gjm

  • Newbie
  • *
  • Posts: 7
Re: HTML5 + websocketd
« Reply #9 on: January 27, 2019, 10:14:17 AM »
I know this topic is quite old now but I couldn't find anything else relating to websocketd!

Two things please:
Need to figure out how an already running program can pass the values.
1) Did you ever figure this out?

2) Have you noticed any timeouts using websocketd where it drops the connection?  If I use a simple script that increments from 1 in steps of 1 and just keeps going, the websocketd drops after about 20 seconds.  If I restart it, it consistently drops at about 20 seconds.  If I insert a delay of 0.6 seconds into the incremental loop, it runs for about 43 seconds before dropping! Running piCore 9 on an RPi 0W.