WebSockets Support

A crucial web technology called WebSockets enables constant full-duplex connections between clients and servers, facilitating rapid, two-way communication with little overhead. Your apps will operate more quickly and efficiently thanks to this TCP-based protocol, which guarantees extremely low latency and speedy interactions.

Among the advantages of using WebSockets are:

• Reduced response delays and network traffic due to full-duplex communication through a single connection
• Ability to stream data through proxies and firewalls, both upstream and downstream
• Compatibility with older systems by switching from HTTP to WebSockets

You can use WebSockets even if your app server doesn’t have an external IP address because the platform integrates WebSockets technology with the NGINX-balancer and Shared Load Balancer nodes.

Placing an NGINX balancer in front of your application makes it the environment’s entry point and does away with the need for additional configurations, making it the simplest option to enable WebSockets support. Furthermore, default parameters can be readily modified using this server, including port numbers.

The application servers on the platform also support WebSockets technology.

The following guide will walk you through configuring the NGINX-balancer node to enable WebSockets functionality for your platform-hosted application. We’ll use a straightforward PHP chat program as an example. Let’s begin by going over each step from the beginning.

Environment Creation and Application Deployment

1. Log in to the platform dashboard with your credentials and click on the “New Environment” button in the top left corner.

2. Create an environment in the Environment Topology box according to the needs of your program (for example, we chose the Apache application server for our PHP application). The NGINX-balancer node is the sole component that is necessary.

Next, use the cloudlet sliders to specify the resource usage restrictions for the selected nodes, type the environment name (balancer-websockets, for example), and click “Create.”

3. In a few minutes, your new environment will appear on the dashboard.

4. Using an archive, URL, or remote VCS repository, upload and deploy your application to the preferred context (we’ll use the default ROOT). In-depth guidelines are available in our Deployment Guide.

When finished, the project source name will show up in the column of the Deployed panel.

NGINX Balancer Configurations

You now need to enable WebSockets streaming and change the default proxy settings on your NGINX-balancer server to indicate the destination for incoming requests.

1. Click the Config button for your balancer node to open the Configuration Manager pane.

2. Open the nginx-jelastic.conf file in the conf directory. Find the location block within the first server section and paste the following lines just before it:

location /ws/ {
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} – The IP address of the application server node where your WebSockets application is deployed. You can find it by clicking the Additionally button for the required instance.

{port} – The port number your application is using.

In our case, the required settings will look like the image below:

3. That’s it for the NGINX configurations. Just remember to save your changes and restart the balancer using the same-named button.

Application Configurations

Setting up your application is the next step after turning on WebSockets support. To define the correct connection string for the new WebSocket file location, you’ll need to modify its code as follows:

1. Next to the application server of your choice, click the “Config” button.

2. To access the files for your application, click the Configuration Manager tab and navigate to the webroot/ROOT folder (or another folder if you provided a specific context during application deployment).

Open the file containing the WebSockets settings and adjust the `ws` path in the following format:

ws://{env_domain}{path_to_ws_file}

Replace `{env_domain}` with your environment’s domain (found under the environment name on the dashboard), and `{path_to_ws_file}` with the path to the file that needs to be accessed when establishing the WebSockets connection.

For example, in our case, this string looks like the following:

Remember to save the modifications you made.

Lastly, to implement the updated configurations, use the relevant button to restart your application server.

4. To access your application, click “Open in Browser” next to your environment once the service has restarted.

5. Great, the process is completed!

Our chat window is now functioning properly, as you can see. You don’t have to reload the browser tab to send and receive messages in real time.