Setup Websockets

Tutorial


In many modern web applications, WebSockets are used to implement realtime, live-updating user interfaces, so it makes realtime communication much more efficient.

When some data is updated on the server, a message is typically sent over a WebSocket connection to be handled by the client.

Exbita uses Websocket to pass some data from the server and displays them without reloading the page. This provides a more robust, efficient alternative to continually polling the application for changes.

Let's start the installation process.

1. Laravel-Echo-Server package needs to be installed globally on your machine.

sudo npm i laravel-echo-server

NOTE:npm package was installed within NodeJS and NPM Installation section. Please check it again if npm wasn't detected.

2. Configure Laravel Echo Server

sudo laravel-echo-server configure

3. We need to use Nginx proxy/Apache proxy to pass socket_io connections to our running laravel-echo-server instance.

Nginx Configuration

Add following config to the website's Nginx config previously created (/etc/nginx/sites-available/default):

location /socket.io {
proxy_pass http://yourdomainname:6001;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

Replace http://localhost:6001 with https://localhost:6001 if you use https connection.

Please note that the snippet above should be included inside the server directive as follows:

server {
# other nginx config lines...

location /socket.io {
proxy_pass http://localhost:6001;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

After modifying the config file, you need to save it, run NGINX syntax checker and restart NGINX service if it didn't fail:

nginx -tsudo systemctl restart nginx

Apache Configuration

Add following config to the website's virtualhost config file previously created inside directive ( usually it locates on APACHE_PATH/conf/extra/httpd-vhosts.conf):

RewriteCond %{REQUEST_URI}^/socket.io [NC]
RewriteCond %{QUERY_STRING}transport=websocket [NC]
RewriteRule /(.*) ws://localhost:6001/$1 [P,L]

ProxyPass /socket.io http://yourdomainname:6001/socket.io
ProxyPassReverse /socket.io http://yourdomainname:6001/socket.io

So full virtualhost directive looks like this:

<VirtualHost *:80>DocumentRoot "SITE_ROOT_DIRECTORY/public"ServerName DOMAIN_NAME_OR_IP_ADDRESS<Directory "SITE_ROOT_DIRECTORY/public">Options Indexes FollowSymLinks MultiViewsAllowOverride AllOrder allow,denyallow from allRequire all granted</Directory>RewriteCond %{REQUEST_URI}^/socket.io [NC]RewriteCond %{QUERY_STRING}transport=websocket [NC]RewriteRule /(.*) ws://yourdomainname:6001/$1 [P,L]ProxyPass /socket.io http://yourdomainname:6001/socket.ioProxyPassReverse /socket.io http://yourdomainname:6001/socket.io</VirtualHost>

After modifying the config file, you need to save it and restart Apache Service. If it fails after save, make sure you enabled all modules described in Exbita Installation ->Apache Configuration section.

4. Setup Laravel Echo Daemon to keep it running in the background by installing PM package

sudo npm i [email protected]

Generate an active startup script (do once)

pm2 start

Start laravel echo server with pm2. It helps to auto-start echo server after restarting the system. The app keeps laravel-echo-server-pm2.json file inside echo-server folder, so the command below includes the path to that folder accordingly.

sudo pm2 start /var/www/html/echo-server/laravel-echo-server-pm2.json
  • if the project path is different than /var/www/html/, please adjust it accordingly
  • if Echo Server throws 502 Error please make sure the project folder is writable and echo-server config file was configured properly.

NOTE:pm2 package only works on unix systems, if you use Windows, please check this package pm2-windows-startup or keep running laravel-echo-server start command from project directory using command-line interface for testing purposes and skip pm2 installation.

Please check Admin Dashboard ->Health Status section after you configured this service to make sure it is up and running.