Creating a WebSocket Using Amazon EC2 + Apache + Ratchet

Türkçe versiyon

This document explains in detail the steps to establish a WebSocket connection on Amazon EC2 using the Ratchet library. WebSocket is a technology that provides real-time, bidirectional communication and is frequently used in web applications.

The setup in this example was created for a notification system on a WordPress-based website. The steps following the connection can be customized according to the Ratchet documentation. The functions of the notification system are not included in this article.

Step-by-Step Installation Guide

Security Group Setting:

• Purpose: We configure the firewall settings to allow incoming WebSocket connections to your EC2 instance.
• Procedure:
  • Go to your EC2 instance’s Security Group.
  • Add a new rule to the Inbound Rules section:
    • Type: TCP
    • Port Range: 12345 (the port you will use for WebSocket)
    • Source: 0.0.0.0/0 (Accept connections from anywhere)

Connecting to EC2 and Creating a Directory:

• Purpose: To connect to your EC2 instance via SSH and create a directory to store the WebSocket application’s files.
• Procedure:
  • Connect to your EC2 instance via SSH.
  • Create a new directory named websocket under the /bitnami/wordpress/wp-content directory:

mkdir websocket

mkdir websocket

Ratchet Installation and Testing:

• Purpose: To install the Ratchet library and create a simple WebSocket server to test if it is working.
• Procedure:
  • Follow the installation and testing steps in the Ratchet documentation at http://socketo.me/docs/hello-world. In this step, you will install Ratchet and create a simple WebSocket server that sends a “Hello World” message.

Apache Configuration:

• Purpose: To configure the Apache web server to forward WebSocket connections.
• Procedure:
  • Open Apache’s virtual host configuration file:

sudo vi /opt/bitnami/apache/conf/vhosts/wordpress-https-vhost.conf

sudo vi /opt/bitnami/apache/conf/vhosts/wordpress-https-vhost.conf

• Add the following lines to the file:

ProxyPass "/ws2/" "ws://localhost:12345/"
ProxyPass "/wss2/" "wss://localhost:12345/"

ProxyPass "/ws2/" "ws://localhost:12345/"
ProxyPass "/wss2/" "wss://localhost:12345/"

• These lines will forward requests starting with /ws2/ and /wss2/ to ws://localhost:12345/ and wss://localhost:12345/ respectively.

Restarting Apache:

• Purpose: To restart the Apache web server for the changes to take effect.
• Procedure:

sudo /opt/bitnami/ctlscript.sh restart apache

sudo /opt/bitnami/ctlscript.sh restart apache

Testing from the Chrome Console:

• Purpose: To check if the application is working by establishing a WebSocket connection from your browser.
• Procedure:
  • Open Chrome’s developer tools and type the following code into the console. You need to replace example.com with your own domain name. If the connection is successful, you will see the “Connection established!” message in the console.
    

var conn = new WebSocket('https://example.com/ws2/');
conn.onopen = function(e) {
    console.log("Connection established!");
};
conn.onmessage = function(e) {
    console.log(e.data);
};

var conn = new WebSocket('https://example.com/ws2/');
conn.onopen = function(e) {
    console.log("Connection established!");
};
conn.onmessage = function(e) {
    console.log(e.data);
};

Additional Notes

• WebSocket Port: Port 12345 is just an example. You can use any port you want.
• Security Group: For security purposes, it is important to open only the necessary ports.
• Ratchet Library: Ratchet is a powerful WebSocket library for PHP. You can use the features offered by this library for more advanced applications.
• Apache Configuration: The ProxyPass directives are used to forward HTTP requests to the WebSocket server.
• Chrome Console: You can use your browser’s developer tools to test the WebSocket connection.