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

Surjeet Yadav
11y
16.7k
0
0

Article

Before reading this article, please go through the following articles:

HTML5 WebSockets Introduction: Part 1

After learning about HTML5 WebSockets from my previous article, that is an introduction article, here in this article we will proceed to testing 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.

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.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 nodejs or we can say you need to create this js file inside the nodejs installation folder.)

Write the following code and save the file with whatever name you want with the .js extension, I used "serverfile.js" here:

var http = require('http');

var io = require('socket.io');

var yourserver = http.createServer(function (request, response) {

response.writeHead(250, { 'Content-Type': 'text/html' });

response.end('Your WebSocket server is running');

}).listen(22222);

var yoursocket = io.listen(yourserver).set('log', 1);

yoursocket.on('connection', function (client) {

client.on('message', function (data) {

console.log('Client Message: ', data);

});

var current = new Date().getTime();

client.emit('YourMessageResponse', data + '->' + current);

});

client.on('disconnect', function () {

console.log('Your Client disconnected');

});

Step 3: Now start the server by again going to the command prompt and run the following command:

That's it; your server is started successfully, as shown in the command prompt.

Now to prepare client-side.

For client-side preparation, first you need to create an .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:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var HTML5WebSockets = {};

HTML5WebSockets.socketio = {

yoursocket: null,

initialize: function () {

HTML5WebSockets.socketio.yoursocket = io.connect('http://localhost:22222');

HTML5WebSockets.socketio.yoursocket.on('connect', function () {

HTML5WebSockets.socketio.log('You are connected to Server<br />');

});

HTML5WebSockets.socketio.yoursocket.on('message', function (data) {

HTML5WebSockets.socketio.log('Server Response: ' + data + '<br />');

});

HTML5WebSockets.socketio.yoursocket.on('disconnect', function () {

HTML5WebSockets.socketio.log('You are disconnected from Server<br />');

});

document.querySelector('#sendMes').onclick = function () {

HTML5WebSockets.socketio.sendMessageToServer(document.querySelector('#mes').value);

document.querySelector('#mes').value = '';

};

sendMessageToServer: function (data) {

HTML5WebSockets.socketio.yoursocket.send(data);

HTML5WebSockets.socketio.log('Message to Server: ' + data + '<br />');

log: function (message) {

document.querySelector('#log').innerHTML += message;

}

</script>

<br />

HTML5WebSockets.socketio.initialize();

</script>

</body>

</html>

Now run it; your page should be like this:

Good; your client is also ready.

Now assuming your server is started successfully and you will run you HTML page then you will see a message on the page that you will connect to the server as in the following image:

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.

That's all thank you.