Laravel and Soketi locally(with Valet) and production(with nginx).md

Laravel and Soketi locally(with Valet) and production(with nginx reverse proxy)

---

locally (Valet)

Soketi

install soketi:

npm install -g @soketi/soketi

Create a JSON file to run with Soketi. Create a file named soketi_config.json for example and add the following content:

{
  "debug": true,
    "appManager.array.apps": [
      {
        "id": "app-id",
        "key": "app-key",
        "secret": "app-secret",
        "maxConnections": -1,
        "enableClientMessages": false,
        "enabled": true,
        "maxBackendEventsPerSecond": -1,
        "maxClientEventsPerSecond": -1,
        "maxReadRequestsPerSecond": -1,
        "webhooks": [

        ],
        "ssl": [
          {
            "certPath" : "the patch to .crt for socket-server.test that we created earlier",
            "keyPath": "the patch to .key for socket-server.test that we created earlier",
            "passphrase": "",
            "caPath": ""
      
          }
        ]
      }
    ]
  }

Start the server:

soketi start ----config=/Users/yourname/path_to/soketi_config.json

Valet/Nginx

Create a reverse proxy in Nginx using Valet:

valet proxy socket-server http://127.0.0.1:6001 --secure

Now you have socket-server.test:6001 as socket server.

Laravel Echo

In bootstrap.js:

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST,
    wsPort: import.meta.env.VITE_PUSHER_PORT,
    wssPort: import.meta.env.VITE_PUSHER_PORT,
    disableStats: true,
    encrypted: true,
    enabledTransports: ['ws', 'wss'], // Ensure WS and WSS are enabled
});

in .env:

BROADCAST_DRIVER=pusher

# rest of your env

PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=socket-server.test
PUSHER_PORT=
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

---

Production

Soketi

install soketi:

npm install -g @soketi/soketi

Create a JSON file to run with Soketi. Create a file named soketi_config.json for example and add the following content:

{
  "debug": true,
    "appManager.array.apps": [
      {
        "id": "app-id",
        "key": "app-key",
        "secret": "app-secret",
        "maxConnections": -1,
        "enableClientMessages": false,
        "enabled": true,
        "maxBackendEventsPerSecond": -1,
        "maxClientEventsPerSecond": -1,
        "maxReadRequestsPerSecond": -1,
        "webhooks": [

        ],
        "ssl": [
          {
            "certPath" : "the patch to .crt for socket-server.test that we created earlier",
            "keyPath": "the patch to .key for socket-server.test that we created earlier",
            "passphrase": "",
            "caPath": ""
      
          }
        ]
      }
    ]
  }

Supervisord

Create a new configuration file for Soketi in the /etc/supervisor/conf.d directory:

sudo nano /etc/supervisor/conf.d/soketi.conf

Add the following configuration, adjusting the command and directory as necessary for your setup:

command=soketi start --port=6001
autostart=true
autorestart=true
stderr_logfile=/var/log/soketi.err.log
stdout_logfile=/var/log/soketi.out.log
user=www-data

Start the procces:

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start soketi
sudo supervisorctl status soketi

Check:

nginx -t

Restart:

sudo systemctl restart nginx

Nginx

Edit the Nginx configuration file for your domain, usually located in /etc/nginx/sites-available/ or /etc/nginx/conf.d/.

Inside the server block for your domain, add a new location block to handle WebSocket connections. Here's an example that proxies all requests from /app to Soketi running on port 6001:

server {
    listen 443 ssl;
    server_name your-domain.com;
    
    # SSL cert (if it's managed leave it commented)
    # ssl_certificate /path/to/your/certificate.crt;
    # ssl_certificate_key /path/to/your/private.key;

    location / {
        proxy_pass http://localhost:6001;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # Rest of your server block...
}

Laravel Echo

In bootstrap.js:

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST,
    wsPort: import.meta.env.VITE_PUSHER_PORT,
    wssPort: import.meta.env.VITE_PUSHER_PORT,
    disableStats: true,
    encrypted: true,
    enabledTransports: ['ws', 'wss'], // Ensure WS and WSS are enabled
});

in .env (change credintals similer to soketi_config.json):

BROADCAST_DRIVER=pusher

# rest of your env

PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=#your host name
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Now you have your-hostname.com:443 as socket server.

Resourses:

• https://gist.github.com/umutyerebakmaz/4ade6739631292da9a1fa9bc24ec8513
• https://ahmadyousef.me/blog/11
• https://fajarwz.com/blog/unlocking-real-time-with-websockets-in-laravel-with-soketi/