Client laravel-echo does not respond to server events

Question

I'm trying to build my docker sample to work with php8.2, laravel10, websockets and redis. I have already prepared all the necessary docker images and combined them with the Caddy proxy. I also used horizon to debug my broadcasting (in another docker container) This is my docker-compose.yml

services:
  ### workspace ##################################
  workspace:
    build:
      context: ./workspace
      args:
        - TZ=${WORKSPACE_TIMEZONE}
        - NODE_VERSION=${WORKSPACE_NODE_VERSION}
        - YARN_VERSION=${WORKSPACE_YARN_VERSION}
        - APP_CODE_PATH=${APP_CODE_PATH_CONTAINER}
    environment:
      - APP_CODE_PATH=${APP_CODE_PATH_CONTAINER}
    volumes:
      - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}
    tty: true
    networks:
      - frontend
      - backend
  
  ### php-fpm ##############################################
  php-fpm:
    build:
      context: ./php-fpm
      args:
        - APP_CODE_PATH=${APP_CODE_PATH_CONTAINER}
    restart: unless-stopped
    volumes:
      - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}
    expose:
      - "9000"
    depends_on:
      - workspace
      - db
      - redis
      - laravel-echo-server
    networks:
      - backend

  ### caddy ###############################################
  caddy:
    image: caddy:2.2.1
    environment:
      - CADDY_HOST_LABEL=${CADDY_HOST_LABEL}
      - APP_CODE_PATH=${APP_CODE_PATH_CONTAINER}
    restart: unless-stopped
    volumes:
      - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}
      - caddy_data:/data
      - caddy_config:/config
      - ./caddy/Caddyfile:/etc/caddy/Caddyfile
    ports:
      - "${CADDY_HOST_HTTP_PORT}:80"
      - "${CADDY_HOST_HTTPS_PORT}:443"
    depends_on:
      - php-fpm
    networks:
      - frontend
      - backend

  ### db ##################################################
  db:
    image: mariadb:latest
    build:
      context: ./db
    environment:
      - MYSQL_DATABASE=${DB_DATABASE}
      - MYSQL_USER=${DB_USER}
      - MYSQL_PASSWORD=${DB_PASSWORD}
      - MYSQL_ROOT_PASSWORD=${DB_ROOT_PASSWORD}
      - TZ=${WORKSPACE_TIMEZONE}
    restart: unless-stopped
    volumes:
      - ${DATA_PATH_HOST}/db:/var/lib/mysql
    expose:
      - "3306"
    ports:
      - "${DB_PORT}:3306"
    networks:
      - backend

  ### redis ###############################################
  redis:
    build: ./redis
    restart: unless-stopped
    volumes:
      - ${DATA_PATH_HOST}/redis:/data
    expose:
      - "6379"
    ports:
      - "${REDIS_PORT}:6379"
    networks:
      - backend

  ### websockets ##########################################
  laravel-echo-server:
    image: oanhnn/laravel-echo-server:latest
    depends_on:
      - redis
    environment:
      LARAVEL_ECHO_SERVER_AUTH_HOST: http://example.com
      LARAVEL_ECHO_SERVER_DEBUG:     'true'
      LARAVEL_ECHO_SERVER_DB:        redis
      REDIS_HOST:     redis
      REDIS_PORT:     6379
      REDIS_PREFIX:   ""
      REDIS_DB:       0
    expose:
      - "6001"
    ports:
     - 6001:6001
    restart: unless-stopped
    networks:
      - backend

  ### horizon #############################################
  horizon:
    build:
      context: ./horizon
      args:
        - APP_CODE_PATH=${APP_CODE_PATH_CONTAINER}
    restart: unless-stopped
    volumes:
      - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}
    depends_on:
      - redis
    networks:
      - backend

version: '3'

networks:
  frontend:
  backend:

volumes:
  mysql:
  redis:
  caddy_data:
  caddy_config:

I configured everything correctly and my messages are successfully delivered, they are present in the debug console of laravel-echo-server, they are successfully displayed in laravel-horizon (there are no error messages anywhere, or no one is reporting that the behavior is incorrect)

Now I have started setting up my client. I have an electron + frontend application in React. According to the documentation, I installed "socket.io-client" and "laravel-echo" using npm. I have configured socket-io like this:

import Echo from 'laravel-echo';
window.io = require('socket.io-client');
if (typeof io !== 'undefined') {
  window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
  });
} else {
  console.log("IO ERROR")
}

window.Echo.channel(`laravel_database_translation.1`)
.listen('.App\\Events\\TranslationEvent', (e) => {
  console.log(e)
})

I connect to a websocket, I see ping/pong requests happening on the Internet tab(in f12). But when on the server side, using the console command, I dispatch my event - in my console I do not receive any information about this.

I tried different ways to connect to my channel, removed "laravel_database_" from the .channel('') method, changed the naming options for the event in .listen('*'). But I couldn’t catch the event via websockets. Before, I tried to do the same with local pusher, but also failed.Ыo I thought that switching to socket-io would help me - which I was wrong about. I'm pretty sure the problem is with my docker containers since I'm not a Dockerfile configurator. but it seems that it should work now, maybe the problem is different. My event on laravel:

<?php

namespace App\Events;

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

class TranslationEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels, Queueable;

    /**
     * Create a new event instance.
     */
    public function __construct(public $id, public $message)
    {
        
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel
     */
    public function broadcastOn()
    {
        return new Channel('translation.'.$this->id);
    }
}

Answer 1

Finally! After countless attempts to rebuild the Docker container, I finally identified a bug - the incompatibility of laravel-echo-server with the local version of laravel-echo. Use version 2.3.0 of laravel-echo and you will succeed!

Console log, which I waited more 10 hours :') https://i.stack.imgur.com/rbsCR.png PS if you use 2.3.0, then know that at that time it only supported the following code format:

window.Echo.channel('laravel_database_translation') // <== only full name
.listen('.App\\Events\\TranslationEvent', (e) => { // <== only full name
    console.log(e);
});