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:
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:
- a web server which supports nodejs and contains our files chat_server.js and chat_client.html
- your computer with a web browser
- your friends computer with a web browser
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.
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:
| 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:
| <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">   <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:
- On Windows, download and install the VM Player from VMWare
- On Windows, download, and unzip a virtual machine (VM) with Ubuntu and nodejs from bitnami.com
- On Windows, download and install WinSCP, a program to copy files from your computer to the virtual machine
- On Windows, create (with Notepad or similar text editor) the files chat_server.js and chat_client.html
- On Windows, start the VMware Player, and open (Player > File > Open) the unzipped bitnami file
- Use Play virtual machine to start the virtual computer, and login (user=bitnami, password=bitnami)
- 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.
- On the virtual machine (in directory /home/bitnami), install socket.io with the command: > npm install socket.io
- On the virtual machine (in directory /home/bitnami), start the nodejs server with the command > node chat_server.js
