{"id":1096,"date":"2012-08-21T00:52:18","date_gmt":"2012-08-21T05:52:18","guid":{"rendered":"http:\/\/www.tigoe.com\/pcomp\/code\/?p=1096"},"modified":"2018-07-04T11:19:54","modified_gmt":"2018-07-04T16:19:54","slug":"serial-to-browser-using-node-js","status":"publish","type":"post","link":"https:\/\/www.tigoe.com\/pcomp\/code\/arduinowiring\/1096\/","title":{"rendered":"Serial to Browser using node.js"},"content":{"rendered":"<p><em>Updated\u00a028 July 2015<\/em><\/p>\n<p>This is a brief introduction to using node.js and websockets to connect a serial device, like an Arduino microcontroller, to a browser.<\/p>\n<p>To make this happen you&#8217;ll need:<\/p>\n<ul>\n<li>An <a href=\"http:\/\/www.arduino.cc\">Arduino<\/a>, and the Arduino IDE<\/li>\n<li>an HTML5-capable browser. I used Chrome, but Opera or Firefox or Safari will work too)<\/li>\n<li><a href=\"http:\/\/nodejs.org\">node.js<\/a>\u00a0and the following libraries for node:\n<ul>\n<li><a href=\"http:\/\/expressjs.com\/\">express.js<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/ws\">ws.js<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/voodootikigod\/node-serialport\">node-serialport<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div><span style=\"font-size: medium;\"><span style=\"line-height: 24px;\">This post assumes you understand:<\/span><\/span><\/div>\n<div>\n<ul>\n<li>How to use <a href=\"http:\/www.arduino.cc\">Arduino<\/a>, including how to send serial data<\/li>\n<li>How to write a <a href=\"http:\/\/www.codecademy.com\/tracks\/web\">web page<\/a>, and what a server is<\/li>\n<li>A little about <a href=\"http:\/\/www.codecademy.com\/tracks\/javascript\">JavaScript<\/a><\/li>\n<li>A little about the <a href=\"http:\/\/etutorials.org\/Mac+OS\/mac+os+x+power+tools\/Part+IV+Mastering+Your+Mac-Security+Maintenance+and+Unix\/Chapter+15+Utilizing+Unix\/Getting+Started+with+Terminal+and+a+Shell\/\">command line<\/a><\/li>\n<\/ul>\n<div><span style=\"font-size: medium;\"><span style=\"line-height: 24px;\"><!--more--><\/span><\/span><\/div>\n<\/div>\n<p><strong>Install node.js on your computer<\/strong>. It&#8217;s a server-side engine for javaScript, it allows you to write web servers in JavaScript. There&#8217;s lots of great tutorials on it on the web, but the main Node site has pretty good instructions on getting started.<\/p>\n<p><strong>Make a directory to keep all your node projects in<\/strong>. On my mac, I went with the predictable: ~\/Documents\/node\/<\/p>\n<p><strong>Open a command line application<\/strong> (Terminal on OSX, for me). Change directories to the node directory:<\/p>\n<pre>cd Documents\/node\/<\/pre>\n<p>Now you need to <strong>install a few node libraries<\/strong>. The first is express.js, a library that simplifies writing nice <a href=\"http:\/\/en.wikipedia.org\/wiki\/Representational_state_transfer\">RESTful<\/a> web servers in node. Node has an easy package manager that will do it for you. Type:<\/p>\n<pre>npm install express<\/pre>\n<p>You&#8217;ll get a lot of feedback in the terminal while the package manager downloads and installs the express.js library. Once it&#8217;s done, you&#8217;ll have a new directory called node_modules inside Documents\/node\/. Now install two more libraries, ws.js and node-serialport. The former allows you to read to and write from webSockets using node:<\/p>\n<pre>npm install ws<\/pre>\n<p>then when it&#8217;s done:<\/p>\n<pre>npm install serialport<\/pre>\n<p>Node-serialport allows you to access your computer&#8217;s serial port, and read to and write from them.<\/p>\n<p>You can also add the libraries all at once by adding a file to your project directory called <strong>package.json<\/strong>, containing the required libraries. \u00a0For more on this, see the npm<a href=\"https:\/\/npmjs.org\/doc\/json.html\"> guide to making packages<\/a>. The <a href=\"https:\/\/github.com\/tigoe\/NodeExamples\/tree\/master\/SerialToWsServer\">gitHub repository for this project<\/a> contains a package.json file, so you can just type<\/p>\n<pre>npm install<\/pre>\n<p>and it will install all the required packages for you. You can thank Steve Klise for making me do that.<\/p>\n<p>Once you have the libraries installed, <strong>put a sketch on your Arduino that sends something out the serial port<\/strong>. I used the AnalogReadSerial example, which comes with Arduino. Look under File-&gt; Examples-&gt; 01.Basics-&gt;AnalogReadSerial. Once you know it&#8217;s working, you&#8217;re ready to write the server script. Anything will do, as long as it sends a carriage return and newline, like Serial.println() does.<\/p>\n<p><strong>Make a new directory inside Documents\/node\/ for your application<\/strong>. Call it nodeSerialServer, or anything else you like. Inside that folder you&#8217;ll save two files, an index.html page that you&#8217;ll view in a browser, and SerialServer.js, a javaScript server that you&#8217;ll run using node.<\/p>\n<p>I chose to make my index page and JavaScript page with <a href=\"https:\/\/p5js.org\/\">p5.js<\/a>.\u00a0 Here&#8217;s the <a href=\"https:\/\/github.com\/tigoe\/NodeExamples\/blob\/master\/SerialToWsServer\/public\/index.html\">index page<\/a>. It loads the <a href=\"https:\/\/github.com\/tigoe\/NodeExamples\/blob\/master\/SerialToWsServer\/public\/sketch.js\">sketch.js<\/a> script, written with <a href=\"http:\/\/www.p5j2.org\">P5.js<\/a>, that handles the socket communication. It opens a webSocket back to the server, and listens for events from the server.\u00a0Whatever data it gets from the event, it prints to a DIV inside itself. See the inline comments for more details. Save these\u00a0in a new subdirectory \/nodeSerialServer\/public.<\/p>\n<p>Note the project structure in the gitHub repo: the server lives in the root of the project directory, and all the documents that will be passed to the client: the index.html and the sketch.js page and any additional js pages for p5.js, are in the \/public subdirectory.<\/p>\n<p>Here&#8217;s the <a href=\"https:\/\/github.com\/tigoe\/NodeExamples\/blob\/master\/SerialToWsServer\/server.js\">server<\/a>. It starts a web server and listens for HTTP requests for public\/index.html, and serves it out when asked. It also listens for incoming webSocket requests, and opens them. When it does so, it start listening for serial events. If it gets a carriage return and newline in the serial port, it sends what it got out to the websocket.\u00a0Save this in your main project directory.<\/p>\n<p>To run this, \u00a0change directories to\u00a0Save this in \/nodeSerialServer:<\/p>\n<pre>cd \/nodeSerialServer<\/pre>\n<p>then run the server.js script using node. To invoke this script, you need to give it the name of the serial port you want to open on the command line like so:<\/p>\n<pre>node server.js \/dev\/tty.usbmodem621<\/pre>\n<p>Substitute the name of your port for the name of my port above.You&#8217;ll get a message that the script started. Now open a browser and open this address:<\/p>\n<address>http:\/\/localhost:8080<\/address>\n<p>The server will deliver index.html to your browser and start listening to the serial port. \u00a0The index page will listen for serial events from the server, and update the DIV with the new data. \u00a0Voila! You&#8217;re serving serial data to a web page.<\/p>\n<p>To stop the server, hold down the control key then type C on the command line.<\/p>\n<p>This is only a beginning, and a crude one at that. \u00a0It can be improved a lot. But hopefully it gives you enough of an idea to get started. For more on node.js, check out the <a href=\"http:\/\/www.nodebeginner.org\/\">Node Beginners Book<\/a>.<\/p>\n<p>To write this example, I borrowed from the examples included with <a href=\"http:\/\/socket.io\/#how-to-use\">ws.js<\/a>, <a href=\"http:\/\/expressjs.com\">express.js<\/a>, and <a href=\"https:\/\/github.com\/voodootikigod\/node-serialport\">node-serialport<\/a>, all of which provide excellent starts. \u00a0Enjoy.<\/p>\n<p><strong>Update<\/strong>: \u00a0Though I only wrote and tested this on localhost, reader Sam Royston mailed me to tell me that it will work just fine from a remote client, if you have no firewall and a public IP address on the machine on which you are running Node. \u00a0I&#8217;ve updated the code to account for this.\u00a0\u00a0Thanks, Sam for the note.<\/p>\n<p><strong>Update 2<\/strong>: Thanks to Lia Martinez and Will Jennings, this now works with Express 3.0. \u00a0Thanks to Steve Klise, it has a package.json file for your installing convenience.<\/p>\n<p><strong>Update 3<\/strong>: I changed the index.js script so that you can pass it the serial port from the command line.<\/p>\n<p><strong>Update 4:<\/strong> I changed this from socket.io to ws.js because nowadays I find ws.js faster and easier to work with then socket.io.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated\u00a028 July 2015 This is a brief introduction to using node.js and websockets to connect a serial device, like an Arduino microcontroller, to a browser. To make this happen you&#8217;ll need: An Arduino, and the Arduino IDE an HTML5-capable browser. I used Chrome, but Opera or Firefox or Safari will work too) node.js\u00a0and the following &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.tigoe.com\/pcomp\/code\/arduinowiring\/1096\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Serial to Browser using node.js&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,100,74,103,104],"tags":[],"class_list":["post-1096","post","type-post","status-publish","format-standard","hentry","category-arduinowiring","category-code","category-electronics","category-javascript","category-node-js"],"_links":{"self":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/1096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/comments?post=1096"}],"version-history":[{"count":10,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/1096\/revisions"}],"predecessor-version":[{"id":1306,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/1096\/revisions\/1306"}],"wp:attachment":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/media?parent=1096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/categories?post=1096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/tags?post=1096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}