HTML5 bidirection websocket (node ws) sketch to try.

This setup deals with bidirectional websocket (ws) data flow using HTML5.
It consists of a webpage which will display data numerically and also graphed.
There are toggling buttons which control some ports and the a/d data collection can be switched off
for faster port switching.

Credit must be given to Tom Igoe and Feedback for the inspiration.

This is no way finished but will provide a functioning tool which can be modified and completed as is wanted.
It's not particularly well formatted or written, but it works, which is a good starting point!

The weakest link is the communication process that delivers the arduino data to the node ws socket. On average, over an
hours worth of data, this communication process was just under 180mS. Not fast, but considerably better than
with XML type communication.

I do use Windows .... Along with CoffeeCup HTML editor, WinSCP and the latest Arduino IDE.

Ok, here goes. The Yun must have the latest update with an SD card.
So ...

opkg update.
opkg install node ( check with node -v)
opkg install node-ws
opkg install node-serialport
This gets it all in place if required.

This can be checked in /usr/lib/node_modules.I use WinSCP (SCP mode) and log into root@n.n.n.n (ip address of Yun)
mine consists of ws, serialport and npm directories.

Now node and ws modules will be accessible from the sketch.

There is a required javascript file ('wserver.js') which sets up a 'readline' module associated with node and is activated within the sketch.
This configures ws to deal with data in and out via stdin stdout.

I have this file in the arduino directory of the SD card, but in can be in any directory on the card, as long
as the correct directory is referred to in the sketch.

On the HTML side, at the moment I just run it as a file on the PC, so I can edit it at will.
The Yun's ip address should edited in the var wsUri = "ws://192.168.1.11:8080/";
Note that port 8080 is used. This can be edited in the HTML file but must match the port in the 'wserver.js'
script file mentioned as in the arduino directory on the SD.

The graphing uses a simple to use 'smoothie.js' script (excellent). Not the most technically equipped, but very easy to
use. It can be configured as wanted.
This requires the smoothie.js script to be in the same directory as the HTML file.

The serial screen in the IDE will shown the running average time of the arduino to node communication.

If all goes well, the Yun will boot up and after 1 min the Red LED, L13 will come on, go off, then blink on.
After another 30 secs, the wifi will come on.
If the web page is running, the graphing and ad data will update and port switching will be available.
L13 LED will blink at the communication rate. The web page is setup for 250mS, but this is not consistent will the Yun.
There are periods of pauses in this rate.

I hope this will be of use, and maybe the bottleneck bypassed somehow.

HTML5_Socket_trial.html (12.5 KB)

smoothie.js (28.9 KB)

websocket1.ino (3.72 KB)

wserver.js (788 Bytes)

Hi Roffey,

Thanks for sharing. I was still strugling what's the fastest way to communicate between nodejs and the arduino side. Till now I was using NET tcp connections from nodejs and the console library on the arduino side. Some example code:

Node:

var net = require('net');
var WebSocketServer = require('ws').Server
  , wss = new WebSocketServer({port: 8080});

function setupConnection() {
  connection = net.connect({port: 6571}, function () {
  });
  connection.on('close', function() {
    console.log('Connection closed');
    setTimeout(setupConnection, 10000); //Try to reconnect EDITED
  });

  connection.on('error', function() {
    console.log('Connection error');
  });
  
  connection.on('connection', function() {
    console.log('Connection estahblised');
  });
  wss.on('connection', function(ws) {
	connection.on('data', function(data) {
	console.log(data.toString());
	ws.send(data.toString());
  });
  //client.end();
});
}

setupConnection();

Arduino sketch:

#include <Console.h>

String name;

void setup() {
  // Initialize Console and wait for port to open:
  Bridge.begin();
  Console.begin(); 

  // Wait for Console port to connect
  while (!Console); 

  Console.println("Hi, what's your name?");
}

Now you and Tim inspired me to use node-serialport. Thx!

Well, if it helps that's a good thing. Scouring the net and posts shows that the chip intercommunication methodology can cause delays for sure. There are various opinions and mods going on to reduce these delays, but they are way above my head. Maybe as I keep digging, learning and trying, things will not be so frustrating.
Without knowing the fundamentals, sometimes the appreciation of the skillset behind creating devices like the Yun gets lost, and too much is demanded.
It's all thanks to Tim and those of similar knowledge, and the fact that they publish and share their skills. Let's hope they keep doing so!

Cool! 8)

I've just read this topic..

so, I have a question: what about replacing the linux bridge part with a direct connection with node serial module and read directly from the serial instead of deadline? will it make it faster?

mantissa00:
I've just read this topic..

so, I have a question: what about replacing the linux bridge part with a direct connection with node serial module and read directly from the serial instead of deadline? will it make it faster?

There is an example which bypasses linux bridge. I've tried it. The response time is very low.

But it comment /dev/ttyATH0 in /etc/inittab, so the bridge function including Process class can't be used any more. So it hard to send linux instructions from MCU with sketch.

http://tavendo.com/blog/post/arduino-yun-with-autobahn/

Maybe, you know how to solve this.

tim9510019:
There is an example which bypasses linux bridge. I've tried it. The response time is very low.

But it comment /dev/ttyATH0 in /etc/inittab, so the bridge function including Process class can't be used any more. So it hard to send linux instructions from MCU with sketch.

http://tavendo.com/blog/post/arduino-yun-with-autobahn/

Maybe, you know how to solve this.

sonnyyu:
The three main reasons Yun does not run Node well:

  • lack of A floating-point unit (FPU)
  • lack of random-access memory (RAM)
  • lack of CPU speed (400 Mhz)

Sorry, i am a newbie. My question may be dumb.

How to set keep-alive in this example?

The demo web keep creating websocket connection, Why?