Q X Innovation
  • Home
  • Contact

Programming for kids, part 8: server-side javascript

24/6/2013

 
In Programming for kids, part 4: javascript, we used HTML and javascript to create an interactive webpage: you enter your name in an input field, press the "OK" button, and your name appears on the web page. All this interaction is handled locally, in your web browser (in computer terminology: a client). You are the only one who is seeing this.

When we also add javascript to a web server, we can do more interesting things: you type text in an input field, press the "OK" button, and the text appears in the web browser of your friend who you are chatting with!

To do this, you need 3 computers:
  1. a web server which supports nodejs and contains our files chat_server.js and chat_client.html
  2. your computer with a web browser
  3. your friends computer with a web browser
As excercise, we can do all this on one computer, like this: one server and two clients on one screen.
Picture
On the server (in this example at 192.168.1.40), you start the javascript program chat_server.js like this:
    bitnami@linux:~$ node chat_server.js
When you point a web browser at  http://192.168.1.40:8080, the web page  chat_client.html (with HTML and javascript) is displayed. And you can start chatting.

The file chat_server.js uses a lot of programming that is provided by the programs nodejs and socket.io.

The main parts we have added are:
  1. when the user connects to the web page, the file chat_client.html  (see below) is presented.
  2. when the user sends (by clicking the button "OK", see chat_client.html) the message "text" with the chat, the server sends this chat to the other participant(s) with socket.emit.
var app = require('http').createServer(handler)
  , io = require('/home/bitnami/node_modules/socket.io/lib/socket.io.js').listen(app)
  , fs = require('fs')

app.listen(8080);
io.set('log level',1);

function handler (req, res) {
  fs.readFile('chat_client.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading file');
    }
    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.on('text', function (data) {
    console.log(data);
    socket.emit('chat',data);
    socket.broadcast.emit('chat', data);
  });
});


The file chat_client.html contains the HTML and javascript for the webpage as presented to the user.

The HTML elements are elements like we used earler: <input>, <button>, <p>, <script>.

The javascript contains following elements:
  1. when the page is loaded, a connection ("socket") is created to the server.
  2. when the web page receives the message 'chat' from the server, it displays this content on the webpage, at the paragraph paragraph_1.
  3. when the user clicks the OK button, the message 'text' (with name and chat message) is send to the server, using socket.emit.
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<p>To participate in the chat session: enter your name, some text and press <button onclick="sendChat()">OK</button>

<p><input id="input_1" size="20">&nbsp&nbsp&nbsp<input id="input_2" size="48">

<p id="paragraph_1"> </p>

<script>
    var socket = io.connect("http://" + window.location.host);

    socket.on('chat', function (data) {
       var x3 = document.getElementById("paragraph_1");
       x3.innerHTML= x3.innerHTML + '<br>' + data;
    });

    function sendChat() {
       var x1 = document.getElementById("input_1");
       var x2 = document.getElementById("input_2");
       socket.emit('text', x1.value + ' > '+ x2.value);
       x2.value = "";
    }    
</script>
</body>
</html>

To run this example yourself, you need a nodejs server on your computer. Some hints (maybe a more detailled description in a later post) on how to achieve this:
  1. On Windows, download and install the VM Player from VMWare
  2. On Windows, download, and unzip a virtual machine (VM) with Ubuntu and nodejs from bitnami.com
  3. On Windows, download and install WinSCP, a program to copy files from your computer to the virtual machine
  4. On Windows, create (with Notepad or similar text editor) the files chat_server.js and chat_client.html
  5. On Windows, start the VMware Player, and open (Player > File > Open) the unzipped bitnami file
  6. Use Play virtual machine to start the virtual computer, and login (user=bitnami, password=bitnami)
  7. On Windows, start WinSCP. Use as Protocol "SCP", use as Host name 192.168.1.40, press Login. User=bitnami, password=bitnami. Copy the files chat_server.js and chat_client.html from your computer to the virtual machine, into the directory /home/bitnami.
  8. On the virtual machine (in directory /home/bitnami), install socket.io with the command: > npm install socket.io
  9. On the virtual machine (in directory /home/bitnami), start the nodejs server with the command > node chat_server.js

Comments are closed.

    Author

    Jos den Hartog
    @josdenhartog

    View my profile on LinkedIn

    Archives

    July 2013
    June 2013
    May 2013
    February 2013
    January 2013
    December 2012

Powered by Create your own unique website with customizable templates.