laravel websocket in homestead not working

I've tried all the ways to implement this package Laravel Websockets with homestead, locally it works but using nginx Homestead doesn't.

1 -> configuration for /etc/nginx/sites-available/example.test :

server {
    listen 80;
    listen 443 ssl http2;
    server_name website.test;
    root "/home/vagrant/website/public";

index index.html index.htm index.php;

charset utf-8;

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt  { access_log off; log_not_found off; }

access_log off;
error_log  /var/log/nginx/website.test-error.log error;

sendfile off;

client_max_body_size 100m;

location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

    fastcgi_intercept_errors off;
    fastcgi_buffer_size 16k;
    fastcgi_buffers 4 16k;
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
}

location /ws {
    proxy_pass             http://127.0.0.1:6001;
    proxy_set_header Host  $host;
    proxy_read_timeout     60;
    proxy_connect_timeout  60;
    proxy_redirect         off;

    # Allow the use of websockets
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;}

location ~ /\.ht {
    deny all;
}

ssl_certificate     /etc/nginx/ssl/website.test.crt;
ssl_certificate_key /etc/nginx/ssl/website.test.key;

}

2 -> my js config :

import Echo from "laravel-echo"

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});

3 -> My Event :

<?php

namespace App\Events\CrudsEvents;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class DashboardEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;


    public $data ;

    public function __construct($data)
    {
        $this->data  = $data ;
    }

    public function broadcastOn()
    {

        return new Channel('chat-channel');
        // return new PrivateChannel('channel-name');
    }
}

4 -> i run in homestead the command php artisan websockets:serve

5 -> and try to listen in my client side using this code :

  mounted(){
    window.Echo.channel('chat-channel')
        .listen('DashboardEvent',(e)=>{
          console.log(e)
      })
  },

6 -> after broadcasting the event, nothing is received on my client side.

I figured it out

Your nginx config is almost correct, except if you are using Homestead, change the IP to

location /ws {
    proxy_pass             http://192.168.10.10:6001;
    proxy_set_header Host  $host;
    proxy_read_timeout     60;
    proxy_connect_timeout  60;
    proxy_redirect         off;

    # Allow the use of websockets
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

This is the only extra code that needs to be added to a default Homestead nginx site which you can find by ssh-ing into the VM and editing

sudo nano /etc/nginx/sites-available/mysite.test

Also change your host in broadcasting.php to

'host' => env('WEBSOCKET_BROADCAST_HOST'),

and in your .env

WEBSOCKET_BROADCAST_HOST=192.168.10.10

Next, set up Laravel Horizon and run the process

php artisan horizon

In another window, run

php artisan websockets:serve --host=192.168.10.10

In a third window, you can now open up tinker and run

event (new \App\Events\NewMessage("Hello world"));

If you are implementing ShouldBroadcast, it should work !

Alternatively, you could otherwise implement ShouldBroadcastNow which doesn't need horizon.

Recommended topics

Hot tags