How to read serial port data from JavaScript

Question

I connected an Arduino to my laptop using USB, and I can read the serial data using Processing.

Is there any way to get this data in real time into a local webbrowser? For example, a text field that shows the value from the serial port? It does not have to be connected to the internet.

The JavaScript version of Processing does not support the following code, which would have been the ideal solution.

The Processing code is:

myPort = new Serial(this, Serial.list()[0], 9600);
// read a byte from the serial port
int inByte = myPort.read();
// print it
println(inByte);
// now send this value somewhere...?
// ehm...

Answer 1

There is no way to directly access the local machine from the web browser. For security reasons browsers have very limited access to the machines resources.

To do this one option would be to write an extension for the browser of your choosing. Even though extensions also have a variety of limitations.

Option two would be to use local server to provide the functionality you need. Personally I recommend using node.js (it's light weight, fast and easy to implement). You can read/write serial data using https://github.com/rwaldron/johnny-five (as @kmas suggested) or https://github.com/voodootikigod/node-serialport and than you can use http://socket.io/ to create a simple service and connect to it though the browser. Socket.io uses WebSockets in modern browsers and works excepionally well for real-time connections.