Post
Ask Question

HTML5 WebSockets (Test WebSocket For Client/server) : Part 2

Introduction

 
Before reading this article, please go through the following articles:
  1. HTML5 WebSockets Introduction: Part 1
After learning about HTML5 WebSockets from my previous article, which is an introduction article, here in this article we will proceed to test WebSockets.
 
First, prepare the server-side 
 
Now the question is, what platform do you use to test WebSockets since I am using Windows and as much I Googled around I learned that I need to use "node.js" and "socket.io" to test the WebSockets. 
 
Step 1: First download node.js from here and install it. 
 
WebSockets1.jpg 
 
Now to install "socket.io".
 
Step 2: Run the command prompt as administrator, go to the "C:\Program Files\nodejs" location and run this command to install "socket.io" and you can clearly see how "socket.io" will be installed.
 
WebSockets2.jpg
 
WebSockets2.5.jpg
 
WebSockets2.6.jpg
 
Now for the server, you need to create a js file in the location "C:\Program Files\nodejs" (the same here, you install node.js or we can say you need to create this js file inside the node.js installation folder.)
 
Write the following code and save the file with whatever name you want with the .js extension, I used "serverfile.js" here:
  1. var http = require('http');  
  2. var io = require('socket.io');  
  3.    
  4. var yourserver = http.createServer(function (request, response) {  
  5.     response.writeHead(250, { 'Content-Type': 'text/html' });  
  6.     response.end('Your WebSocket server is running');  
  7. }).listen(22222);  
  8.    
  9. var yoursocket = io.listen(yourserver).set('log', 1);  
  10.    
  11. yoursocket.on('connection', function (client) {  
  12.     client.on('message', function (data) {  
  13.         console.log('Client Message: ', data);  
  14.     });    
  15.         var current = new Date().getTime();  
  16.    
  17.         client.emit('YourMessageResponse', data + '->' + current);  
  18.     });  
  19.     client.on('disconnect', function () {  
  20.         console.log('Your Client disconnected');  
  21.     });  
  22. }); 
     
Step 3: Now start the server by again going to the command prompt and run the following command:
 
WebSockets3.jpg
 
That's it; your server is started successfully, as shown in the command prompt.
 
Now to prepare the client-side.
 
For client-side preparation, first, you need to create a .html file for providing an interface to the client and perform some action on the page. So, the HTML page looks as in the following:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <script src='http://localhost:22222/socket.io/socket.io.js'></script>  
  5. </head>  
  6. <body>  
  7.     <script>  
  8.         var HTML5WebSockets = {};  
  9.         HTML5WebSockets.socketio = {  
  10.             yoursocket: null,  
  11.    
  12.             initialize: function () {  
  13.    
  14.                 HTML5WebSockets.socketio.yoursocket = io.connect('http://localhost:22222');  
  15.    
  16.                 HTML5WebSockets.socketio.yoursocket.on('connect', function () {  
  17.                     HTML5WebSockets.socketio.log('You are connected to Server<br />');  
  18.                 });  
  19.    
  20.                 HTML5WebSockets.socketio.yoursocket.on('message', function (data) {  
  21.                     HTML5WebSockets.socketio.log('Server Response:  ' + data + '<br />');  
  22.                 });  
  23.               
  24.                 HTML5WebSockets.socketio.yoursocket.on('disconnect', function () {  
  25.                     HTML5WebSockets.socketio.log('You are disconnected from Server<br />');  
  26.                 });  
  27.    
  28.                 document.querySelector('#sendMes').onclick = function () {  
  29.                     HTML5WebSockets.socketio.sendMessageToServer(document.querySelector('#mes').value);  
  30.                     document.querySelector('#mes').value = '';  
  31.                 };  
  32.                 
  33.             },  
  34.             sendMessageToServer: function (data) {  
  35.                 HTML5WebSockets.socketio.yoursocket.send(data);  
  36.                 HTML5WebSockets.socketio.log('Message to Server: ' + data + '<br />');  
  37.             },            
  38.    
  39.             log: function (message) {  
  40.                 document.querySelector('#log').innerHTML += message;  
  41.             }  
  42.         }  
  43.     </script>  
  44.    
  45.     <div id='log'></div>  
  46.     <input type='text' id='mes' />  
  47.     <button type='button' id='sendMes'>Send</button>  
  48.     <br />    
  49.     <script>  
  50.         HTML5WebSockets.socketio.initialize();  
  51.     </script>  
  52. </body>  
  53. </html> 
     
Now run it; your page should be like this:
 
WebSockets4.jpg
 
Good; your client is also ready.
 
Now assuming your server is started successfully and you will run your HTML page then you will see a message on the page that you will connect to the server as in the following image:
 
WebSockets5.jpg
 
Now just type your message and hit the send button; you will immediately see a message below the server connected message that your message will be sent to the server and then goes to the server or command prompt, there you will see how your message will be reached to the server.
 
WebSockets6.jpg
 
WebSockets7.jpg
 
WebSockets8.jpg
 
That's all thank you.


Similar Articles