WebSockets is a prominent web-technology, that ensures establishing of a continuous full-duplex connection between client and server for the bi-directional messages to be instantly transmitted with little overhead. Communication over this TCP-based protocol results in a very low connection latency and rapid interaction, thus making my applications faster and more efficient.
I can achieve the following benefits using WebSockets:
-
Reduction of response delays and unnecessary network traffic consumption due to the full-duplex distribution through a single connection
-
Streaming through proxies and firewalls, both upstream and downstream at once
-
Backward compatibility with the pre-WebSocket world, by switching from the HTTP connection to WebSockets
Cloud provides my with an advanced and complemented WebSockets support by means of integrating this technology to the Cloud Shared Resolver and NGINX-balancer node, so I can use it even without external IP address attached to my app server.
The easiest way to activate the WebSockets support is to place an NGINX balancer in front of my application, making it the entry point of the environment and getting rid of any additional configurations. Over and above, this server can also be used for easily overriding the default settings with my custom ones, e.g. changing the listeners’ port numbers.
Nevertheless, the WebSockets technology is also supported by the application servers provided at Cloud - the appropriate configuration examples are available within our documentation:
-
WebSockets for Java
-
WebSockets for Apache & NGINX
And the guide below will provide insights on how to configure WebSockets support for my application, hosted at Cloud Cloud, with the help of -balancer node. As an example, we’ll use a simple chat application, written in PHP. So, let’s get started and move step-by-step from the very beginning.
Environment Creation and Application Deployment
1. Log in to the Cloud dashboard with my credentials and click on the New environment button at its top left corner.
2. In the appeared Environment Topology frame, I need to create an appropriate environment according to my application’s requirements (e.g. we selected the Apache application server for our PHP app). The only obligatory element is the NGINX-balancer node.
Then set the resources usage limits for the chosen nodes by means of cloudlet sliders, type an environment name (e.g. balancer-) and click Create.
3. In a few my new environment will appear the dashboard.
4. Upload and deploy my application to the desired context (we’ll use the default ROOT one) using archive/URL or via the remote VCS repository - link to the corresponding instruction can be found in our Deployment Guide.
Once this is completed, the name of my project source will appear in the Deployed panel column.
NGINX Balancer Configurations
Now I need to modify the default proxy settings at my NGINX-balancer server in order to define where the incoming requests should be redirected to and enable the WebSockets streaming.
1. Access the Configuration Manager tab by selecting the Config button for my balancer node.
2. Then open the -.conf file within the conf directory, find the location block inside the first server code section and paste the following lines just before it:
location // {
proxy_pass http://{appserver_ip}:{port};
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
where
-
{appserver_ip} - IP address of the application server node with my WebSockets application deployed. It can be found by clicking the Additionally button for the required instance.
-
{port} - of the port, listened by my application
In our case, the required settings will look like the image below:
Note that we recommend the configurations in the .conf file and keep the -.conf one’s content as the default/backup settings. But in this case, since the required changes are rather simple and we are pretty sure that we know what we are doing, it will be easier to work directly with the - file.
3. That’s all for NGINX configurations, just don’t forget to Save the made changes and Restart balancer using the same-named button.
Application Configurations
Once the WebSockets support is enabled, the only thing that is left to do is to configure my application. I need to adjust its code similarly to the steps below in order to specify the correct connection string, according to a new WebSocket file’s location:
1. Click the Config button next to the chosen application server.
2. In the opened Configuration Manager tab I can access my application’s files by navigating to the webroot/ROOT folder (or, the latter one’s name can differ if I’ve specified my custom context during application deployment).
Open the file with the WebSockets settings stated and adjust the path according to the next format:
://{env_domain}{path_to_ws_file}
Herewith, the {env_domain} value should be substituted with my environment domain (can be seen under the environment name at the dashboard) and the {path_to_ws_file} value should lead to the file, that needs to be accessed upon establishing the WebSockets connection.
For example, in our case this string looks like the following:
Do not forget to Save the performed changes.
3. Finally, Restart my application server with the corresponding button in order to apply new configurations.
4. Once the service is up again, I can click Open in browser next to my environment and access my application.
5. Great, we are done!
As I can see, our tiny chat window is running, allowing sending and receiving of messages in real time, without refreshing a browser tab.