The notification function is a handler who is awaiting a response from the server, and processes the data that the server sends. In our example, the processing is to put the data received in a layer whose id is "storage".

All this occurs at page load. Now we will see how to get a real interaction between the user and the server.

Interaction with the server

If we want real interaction, the page must send a request to the server at the request of the user, and displays the data transmitted by the server in response.

To demonstrate this, we add a button on the page. When the user presses this button, the callserver JavaScript function is executed.
The HTML page then starts the exchange with the server side script with a command emit.

socket.emit('called', 'Nothing');

The server intercepts the request and in response to the command 'called', sends a new message. This message is a set of data in JSON format that we have replaced here with a string:

socket.emit('notification', 'Yes still here! Want some data?');

On the client side, it is always the same handler that receives the data and displays the contents.

socket.on('notification', function(x) { notification(x); });

In practice, the content will be a set-key values, keys corresponding for example to text fields in the HTML page and values being contents to be displayed.

The server responds to only two types of queries, 'connection' and 'called', the first being preset, the second having been created by our demonstration.
You can create as many types of queries you want. If you want to avoid defining a function to each, they can be placed in the data sent with 'called' an array of key-value, each key being a control and each value providing the parameters for it.

This page is send by the server and displayed by the browser when you type in the URL bar of the browser:

localhost:1000

This demonstration is limited to a single HTML page given as parameter to the server and assigned to the variable uri, (which is enough to create an application with HTML interface).
Based on the previous tutorials, including How to build a page and application server script, you can make it more generic and use different HTML pages with the same server-side script. A full demo is given by Advanced Explorer, in the Script section.

For this article only the files socket-mini.html and socket mini.js are required.