Post
Ask Question

HTML5 WebSockets (Test WebSocket For Broadcasting): Part 3

Introduction

 
Before reading this article, please go through the following articles:
  1. HTML5 WebSockets Introduction: Part 1
  2. HTML5 WebSockets(Test WebSocket For Client/server): Part 2
After learning about HTML5 WebSockets and testing with a client-server in my previous article, here in this article we will test the WebSockets for broadcasting messages.
 
What is broadcasting messages? Broadcasting messages are like when you want to send a message to you all the clients at the same time, like in a chatting interface you chat with a single person while in broadcasting the message you send will be delivered to all the clients at the same time. To test HTML5 WebSockets for broadcasting messages, please read my previous article because some steps are the same as for my previous article.
 
Step 1: For the server-side, first download and install the node.js.
 
Step 2: Now install socket.io as done in the previous article.
 
Step 3: Now to create the js file under in the location C:\Program Files\nodejs as you did previously.
 
Write the following code and save the file as 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('YourcustomMessage', function (data) {  
  13.         console.log('Client Custom Message: ', data);  
  14.    
  15.         var current = new Date().getTime();  
  16.    
  17.         client.broadcast.emit('YourMessageResponse', data + '(broadcasted)->' + current);  
  18.     });  
  19.     client.on('disconnect', function () {  
  20.         console.log('Your Client disconnected');  
  21.     });  
  22. }); 
As you can see the difference between the code above and my previous article serverfile.js code, this js code I create for broadcasting the message.  
 
Step 4: Now start the server by again going to the command prompt and run the following command
 
HTML5-WebSockets1.jpg
 
That's it; your server is started successfully, as shown in the command prompt.
 
Now to prepare the main client-side.
 
For the client-side preparation, first, you need to create an HTML file for the interface to the client and do something 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('YourMessageResponse', function (data) {  
  21.                     HTML5WebSockets.socketio.log('Server Custom 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('#sendCustMes').onclick = function () {  
  29.                     HTML5WebSockets.socketio.emitCustomMessageToServer(document.querySelector('#custMes').value);  
  30.                     document.querySelector('#custMes').value = '';  
  31.                 };  
  32.             },           
  33.    
  34.             emitCustomMessageToServer: function (data) {  
  35.                 HTML5WebSockets.socketio.yoursocket.emit('YourcustomMessage', data);  
  36.                 HTML5WebSockets.socketio.log('Custom 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='custMes' />  
  47.     <button type='button' id='sendCustMes'>Brodcast</button>  
  48.    
  49.     <script>  
  50.         HTML5WebSockets.socketio.initialize();  
  51.     </script>  
  52. </body>  
  53. </html> 
Good. You are ready to broadcast a message. Do one thing here open the same HTML in 3 or 4, as many as you want to test the broadcast message.
 
Now if your server is started successfully and you run you HTML page then you will see a message on-page that you are connected to the server as in the following image
 
7.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 broadcast and then go to your server or command prompt, there you will see how your message will reach the server and how it will reach all the browser windows.
 
8.jpg
 
Go and check your broadcast message on the server
 
HTML5-WebSockets4.jpg


Similar Articles