Article

Securing WebSocket Channels in Local Development: A Guide with Soketi and Laravel Valet

Mar 12, 2024 4,141
Securing WebSocket Channels in Local Development: A Guide with Soketi and Laravel Valet

In this tutorial, we will demonstrate how to set up private channels using Laravel Valet and Soketi. If you've encountered challenges establishing wss connections with Valet due to SSL issues or if you're unsure how to configure a private channel in your local Valet environment, you've come to the right place.

Let's dive straight into the process. First, ensure you have installed Soketi by following their installation guide, which sets it to run by default on port 6001. Running the command soketi start should execute without any issues, and visiting 127.0.0.1:6001 in your browser should display "ok".

Once Soketi is installed, you can use it as-is for your public channels and configure it in your .env file as outlined in the documentation, as it utilizes the WS port, which does not require encryption. However, when attempting to open a private channel, a WSS (secure WebSockets) connection is necessary, which isn't available by default. This issue may also arise if your project connection is secured and automatically connects to WSS instead of WS.

To enable Soketi to run on a secure channel in Valet, you must first create a secure proxy for port 6001. You can do this by executing the following command:

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

This command generates a virtual site, socket-server.test, which is linked to 127.0.0.1:6001 and is provided with a certificate.

Now that the connection is secure, let's create a configuration JSON file to run with Soketi. Create a file named soketi_config.json 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": ""
      
          }
        ]
      }
    ]
  }

On macOS, you can find the .crt and .key files in the following path: /Users/yourname/.config/valet/Certificates.

Now, run your Soketi server with this configuration file using the following command:

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

In your .env file, instead of specifying:

PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001

You should now use:

PUSHER_HOST=socket-server.test
PUSHER_PORT=

Congratulations! Your wss connection is now smoothly operating in your Valet environment.

Ahmet Yusuf
Ahmet Yusuf

As a full-stack developer with a master’s degree in Electrical and Computer Engineering, I’m deeply passionate about web design and development. I enjoy exploring new technologies and sharing insights into creating user-centered digital experiences in this exciting field.

Related Articles

You may also like

See all posts
How to generate a sitemap with Laravel cover

How to generate a sitemap with Laravel

Adding a sitemap to your laravel application is a very important feature in order for your website t (...)

Read article
Web Design Quality Impact on the User cover

Web Design Quality Impact on the User

Bringing users to visit a website can be an easy task compared to converting them to be returning vi (...)

Read article
Multiple Image Uploader with Laravel 5.5 and Dropzone.js cover

Multiple Image Uploader with Laravel 5.5 and Dropzone.js

In a lot of our projects we need to make a multiple image uploader. In this tutorial, We will make a (...)

Read article