We can not deny that the Internet is growing, both in number of users, as in the number of services offered, as well as in the number of devices that are connected.This makes the needs also greater and the applications adapt to each one of them.
Today, we are accustomed to working with increasingly dynamic applications. Where the communication process is increasingly transparent to the user, so that the constant dialogue with the web server is not perceived. We are increasingly familiar with applications that show us real-time information, whether the stock status or the weather in our area, applications that show us notifications and update our e-mail tray, as well as chats where we can talk With other users.
A recent technology that allows two- way and persistent communication between our web applications and the web server, is called Websocket.
A recent technology that allows two- way and persistent communication between our web applications and the web server, is called Websocket.
Heating up motors
When we access resources using our web client we use the HTTP protocol, that protocol establishes the rules so that our web browser and the web server know how to communicate and understand each other.
The usual process in a web request, requires both entities (server and client) to "greet", the client requests the content, the server serves the content, both "bounce" and remove the link. All explained in a very brief way.
The previous case, happens when we access a web, the web browser, begins to request all resources, be it stylesheets, javascript or ajax resources. For each resource, repeat the previous cycle.
An improvement that was incorporated in HTTP / 2 is HTTP keep-alive , which allows to suppress the process of establishing the connection and closing of connection for requests that occur in the same interval of time.
AJAX
One of the most powerful paradigms that makes communication between client and server more transparent to the user is known as AJAX requests. Very briefly AJAX allows to make requests from a web application in "background", ie avoid having to reload all the content that we had previously loaded.
AJAX by definition works asynchronously, although as we saw in the post ( AJAX Interfaces: Synchronous Javascript Requests ), it can also work synchronously.
Obviously AJAX follows the HTTP behavior we discussed earlier.
AJAX by definition works asynchronously, although as we saw in the post ( AJAX Interfaces: Synchronous Javascript Requests ), it can also work synchronously.
Obviously AJAX follows the HTTP behavior we discussed earlier.
What are Websocket?
In 2011, we incorporated the standard websocket technology , which as we can intuit the word is formed by web + socket. Socket , literally means "plug" and is a technology with great travel since the beginning of the Internet and allows connecting several remote machines through the Internet. The word Web , refers to the technologies that make possible the programming of web applications that make up the great web, including the HTTP protocol that we introduced earlier.
The objective is to create persistent and bidirectional connections between a web client and a web server. This way once negotiated the connection and established, a channel is opened by which both server and client can send messages in real time.
All this using the standard HTTP port 80, and can add an additional layer of security through HTTPS .
The objective is to create persistent and bidirectional connections between a web client and a web server. This way once negotiated the connection and established, a channel is opened by which both server and client can send messages in real time.
All this using the standard HTTP port 80, and can add an additional layer of security through HTTPS .
Comparison between HTTP and Websocket
At this point you may be thinking that we should use websocket for all connections to the server and that all are advantages, because this is not true. It is a technology that requires a lot of resources and therefore it is only applicable in the cases that require it and very well controlling the volume of users who will work with the application simultaneously.
HTTP, by not having persistent connections the server allows to attend to more users, websocket on the contrary each user that connects begins to consume server resources.
By making a comic comparison between both technologies, making typical HTTP requests resembles going to the supermarket, buying your favorite drink and leaving, websocker connections on the other hand resemble resorting to the nearest bar, sit at the counter and start asking The waiter that serves you your favorite drink.
The first case, we see that it is more uncomfortable for the user, but the moment he finishes his purchase and leaves the door, allows more customers to buy, in the second case we see that it is a more comfortable situation for the customer, given That the waiter is willing to serve your favorite drink at any time, instead each user occupies a place in the bar and is slowly filling up so far not to admit more customers.
Therefore , it is advisable to use websocket only in situations that require it, applications where there is a need to have a constant flow of information, such as a chat, a monitoring system, a real-time game.
HTTP, by not having persistent connections the server allows to attend to more users, websocket on the contrary each user that connects begins to consume server resources.
By making a comic comparison between both technologies, making typical HTTP requests resembles going to the supermarket, buying your favorite drink and leaving, websocker connections on the other hand resemble resorting to the nearest bar, sit at the counter and start asking The waiter that serves you your favorite drink.
The first case, we see that it is more uncomfortable for the user, but the moment he finishes his purchase and leaves the door, allows more customers to buy, in the second case we see that it is a more comfortable situation for the customer, given That the waiter is willing to serve your favorite drink at any time, instead each user occupies a place in the bar and is slowly filling up so far not to admit more customers.
Therefore , it is advisable to use websocket only in situations that require it, applications where there is a need to have a constant flow of information, such as a chat, a monitoring system, a real-time game.
Playing with Websocket
To put all the above into context I would like to propose a very simple example of use.
Imagine that we have a server that collects weather data from our neighborhood in real time, this server supports connections through a websocket on port 80. And for the moment does not incorporate authentication mechanism.
Imagine that we have a server that collects weather data from our neighborhood in real time, this server supports connections through a websocket on port 80. And for the moment does not incorporate authentication mechanism.
We are asked to implement a web application where we can see in real time the different parameters, such as temperature, wind, atmospheric pressure, humidity etc.
There are different alternatives to be able to incorporate connections websocket to our applications, perhaps one of the most interesting is Angular Websocket , connection module for Angular JS 1.x.
This module can be installed very easily using bower:
> Bower install angular-websocket --save
> Bower install angular-websocket --save
One of the advantages is that the API is quite simple as we will see below.
So we get to work, and we implemented our Angular service, which can have a look like the next snippet of code.
And the skeleton of our main controller:
Once the stumbling block of communication is solved we can devote ourselves to working on the visualization of the data. For these types of representations a very interesting package is Highcharts .
Self-define with the following sentence:
"Highcharts makes it easy for developers to set up interactive charts in their web pages"
"Highcharts makes it easy for developers to set up interactive charts in their web pages"
Highcharts does not depend on any frontend framework, but for our case we may be interested in making use of " highcharts-ng " which is a highcharts wrapper for Angular JS 1.xe projects and implements a series of directives that facilitate development.
Installed with bower:
> Bower install highcharts-ng --save
To help us "highcharts-ng" in its documentation gives us different example. Link to example .
And finally here we can see an example of how you can view the information provided by our meteorological server using websocket.
And finally here we can see an example of how you can view the information provided by our meteorological server using websocket.
If you find the topic interesting and you think it may be useful for other readers, do not hesitate to share it on social networks and leave a comment if you want to complement the post ;-)
No comments:
Post a Comment