Ajax / AJAJ

Ajax stands for Asynchronous JavaScript and XML. With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required; JSON is often used instead (see AJAJ), and the requests do not need to be asynchronous.

AJAJ stands for Asynchronous JavaScript and JSON. AJAJ is used primarily with server communication. Unlike its predecessor AJAX which uses XML, in AJAJ the content sent back and forth between the client and server is strictlyJSON.

Similar to the more popularly used AJAX, AJAJ is executed asynchronously, meaning that it occurs in the background, and does not interrupt the flow of the JavaScript interpreter as it gets read. The asynchronous aspect of AJAJ allows one to write code which, for example, sends some request to a server and handles a server response without reloading the page in the process. The opposite of this is synchronous, which means “in order”. An example of synchronous processes is seen in standard HTML transmission between a client and a server; when a user clicks a hyperlink, there is some time in which the content is requested and retrieved from the server which causes the page to “reload.” With any kind of web-based asynchronous request, you can request a resource over HTTP without reloading the page.

Websockets

First of all on the web we communicate with the server with short-lived request/responses. So a user would interact with the site which sends a request to the server, the server then inspects the data and sends back the required response. This is good for sending data like html files or images to the browser, but not too good for real time updates.

Web-sockets are the key to this as they keep an open connection between server and client until one is disconnected. There are other ways using AJAX called ‘long polling’ but thats for another post.

While this communication link is open, both ends can send and receive data in real time and dynamically update what the user see’s on screen.

This will enable the browser to support real-time multi-player games or real time data feeds.

http://www.html5rocks.com/en/tutorials/websockets/basics/

Webpage with Node.js

So at the beginning of the week I was using node.js as a simple server and found a quicker way of creating it then using a bit of script. Simply download http-server using the npm:

npm http-server -g

Then  go into the directory your project is and type

node http-server

And this will run a local host on port 8080.

Click LED, with node.js, socket.io, js and arduino

So my first working app with all 4 elements working together to produce a button that turns off and on a LED, the same as with PHP but all HTML and JS.

So it works by node.js is acting as our localhost server and is loading in the web-socket ‘socket.io’.

The js file is linking between the socket.io, and this is what the socket uses and interprets to the Arduino.

The html file is linking in all the factors into the browser by using <script> tags and the js fie interprets the user event.

dia

Node.JS + Asynchronous Programming

While researching node.js I came across the term Asynchronous Programming , this term refers to having un-synchronised events within web applications.

Basically once a wep application loads up and waits until a user  gives it something to to by pressing buttons or selecting objects and if none of these events have been clicked the program is doing nothing at all, Just Waiting.

Now by using events and event handlers the program is is always looking for the next event to be run, for example if you have three buttons and you click them one after other it will run the first event but not the others.

This is because event handlers are single threaded event systems, meaning that they queue events and run them one by one. This is Asynchronous Programming because now the events are queued you now have no idea when they will be executed  as it all runs in the background of the program .

 

http://www.i-programmer.info/programming/theory/6040-what-is-asynchronous-programming.html

 

 

Packages.JSON

http://browsenpm.org/package.json , here is a great link for understanding how JSON files work and how to write them.

JSON stands for Javascript Object Notation, it basically is a file that can easily import all the necessary files into your project for it to work.

Screen Shot 2014-06-13 at 10.18.15

Here is a quick example of a JSON file, anything within the dependencies function will be retrieved through git.

A simple function in the correct directory of npm install will retrieve all these dependancies.

Socket.IO

Web sockets are a way of communicating  between the client and the sever through a single TCP connection (Tcp) = Transmission control protocol, this is what web browsers use  when they connect the net.

Websockets can be used by any client or server application to create more interaction between browsers and web site for applications such as real-time games and live content.

http://www.olivierklaver.com/chapter_3.html

http://www.html5rocks.com/en/tutorials/websockets/basics/

I am using Socket.io to provide  instant 2 way communication between server and client along with adding Arduino in the mix.

For example: Chat, Mail, Multiplayer Games or Home Automation.

Because they are quite new within Html5, there are fallback mechanisms like, long polling or flash sockets so that it still works.

At this moment in time I have successfully got socket.io wot work with Node.js.

To get to this point I have:

  • Installed Socket.io through npm
  • created a

 

 

Creating a local host server with node

So to help me understand how node.js works as more then a package manage I have set up a local host server (I shall use this rather then mamp to create my web app for arduino).

To create this server I followed this walkthrough:

http://www.tigoe.com/pcomp/code/arduinowiring/1096/

First of all you need to install a few packages:  express (which is node.js framework) open (which is a package that opens a file or url with the users preferred application) serialport (this allows you to access your computer’s serial port, and read to and write from them) and finally socket.io ( allows you too to read and write to the web sockets).

Once You have all of these installed we are ready to roll. So create a new directory in same location as your installed packages.  Something like nodeServer, now within that folder create a index.html and server.js file.

The index file is what shows on the browser, and has a few lines of code that link it to the socket.io package.

The server.js file pulls in all the required packages and creates listen and response connections.

Once the code is written into these files you can initiate the server by being in the directory  in the command window and type in:

node filename.js  then the serial connection 

Then your browser will open to the desired url.

Here is the most simple http server

Screen Shot 2014-06-12 at 17.05.50