Websockets Support for Apache NGINX PHP

WebSockets is a widely spread client-server technology, which allows you to implement the instant messages exchanging within your application. This is achieved by establishing a continuous, full-duplex TCP connection between the server and the client’s browser. Using such communication channels results in very low connection latency and rapid interaction, while simultaneously ensuring streaming through proxies and firewalls, both upstream and downstream.

The platform provides advanced, comprehensive WebSockets support by integrating this technology into the Shared Load Balancer and the NGINX-balancer node, so you can use it even without an external IP address on your server. This is achieved by proxying the variety of ports used by your WebSockets apps to a single one: 80 for HTTP and 443 for HTTPS.

The easiest way to configure WebSockets support for your app is to place an NGINX balancer in front of it (the detailed instructions are in the corresponding document). Nevertheless, such a method may sometimes contradict your requirements, while an application still needs this technology implemented. For such cases, the platform ensures full WebSockets support within the available application servers, including both Apache (intended to serve PHP, Ruby, and Python apps) and NGINX (for PHP and Ruby apps).

The process of WebSocket’s integration can vary from application to application, but as for the server-side settings, the platform provides you with a configuration sample for each of the abovementioned nodes, thus you only need to uncomment it and add a few minor edits according to your app’s specifications (e.g. listener port number).

So, in the step-by-step tutorial below, we’ll show you an example of such configurations for a simple PHP chat project, deployed in the environment without a balancer server and using WebSockets. Let’s get started from the very beginning.

Create Environment and Deploy Application

With the platform you can create the required environment in several clicks – just log into your PaaS account and follow the steps below:

1. Click on the New environment button at the top left dashboard corner.

2. Within the Environment Wizard window, switch to the necessary programming language tab and choose the desired application server (we’ll use the Apache one for serving our PHP application). Then set the amount of allocated resources for it by means of cloudlet sliders, type the name for your environment (apache-websockets in our case), and click Create.

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

4. Upload and deploy your application using the platform Deployment Manager or via the remote GIT/SVN repository (the required instructions, according to the chosen engine, can be found in our Deployment Guide).

As a result, your deployed project will be listed inside the appropriate section in the environment panel.

Server and Application Configurations

The WebSockets support within the Apache server is provided by means of the proxy_wstunnel_module module, added to the default server’s build. As for the NGINX application server, it uses its embedded WebSocket proxying capability, similarly to the way the NGINX-balancer does.

So it’s time to configure your application server.

1. Click on the Config button next to your app server node:

2. In the opened Configuration Manager tab, perform the steps within one of the following instruction sections, according to the chosen server:

• for Apache app server

Find the httpd.conf file inside the conf directory and uncomment the next strings at the very end of it (approximately at the 962nd line).

1
2
3
4

<Location /ws>  
   ProxyPass ws://127.0.0.1:<PORT>  
   ProxyPassReverse ws://127.0.0.1:<PORT>  
</Location>

Now change both parameters to the port number, which is listened by your WebSockets application (e.g. our uses the 9000 one).

Make sure it appears the same as the image below.

Save the made changes using the same-named button above the editor.

• for the NGINX app server

Find the #Websocket support section inside the nginx.conf file (located within the conf directory) and uncomment the following lines:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

upstream websocket {  
    server 127.0.0.1:<PORT>;  
 }  
&hellip;  
location /ws {  
        proxy_pass http://websocket;  
        proxy_http_version 1.1;  
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "Upgrade";  
    }

Then substitute the <PORT> value with the corresponding port number (i.e., which is listened to by your WebSockets application) and save the performed changes.

3. That’s all the server configurations you need to do, so the only thing left is to configure your deployed application. For that, access your application’s configuration file, which is responsible for WebSockets settings, and adjust the ws path it contains according to the next format:

ws://{env_domain}{path_to_ws_file}

where

• {env_url} should be substituted with your environment domain (can be seen under the environment name at the dashboard, apache-websockets.jelastic.com in our case)
• {path_to_ws_file} needs to be changed according to the path to the file, that should be accessed upon establishing the WebSockets connection.

It should look similar to the image below:

4. Save the changes and restart your application server with the corresponding button.

5. Great, now it’s done! Click on Open in Browser to run your application in a new browser tab.

6. As you can see, our example chat app is working like a charm.

Even running such a simple chat application, you will still experience the benefits of blazingly fast message transfer, available due to the WebSockets protocol usage. Enjoy!