Laravel-echo-server and Socket.io not firing command even though it's listening to channel

Question

I've been trying to create a live chat application for a couple of days now, but it seems that I'm getting stuck on the first step; Getting the project to fire an event. (I'm using redis and laravel-echo-server to get this whole thing running.) I'm having trouble getting laravel-echo to listen on a channel and fire a command when the event is fired, even though the laravel-echo-server and redis logs say otherwise.

Redis MONITOR log:

127.0.0.1:6379> MONITOR
OK
1643223248.975531 [0 127.0.0.1:54786] "SELECT" "0"
1643223249.056260 [0 127.0.0.1:54786] "EVAL" "for i = 2, #ARGV do\n  redis.call('publish', ARGV[i], ARGV[1])\nend" "0" "{\"event\":\"connected\",\"data\":{\"boolean\":true,\"socket\":null},\"socket\":null}" "IsConnected"
1643223249.056333 [0 lua] "publish" "IsConnected" "{\"event\":\"connected\",\"data\":{\"boolean\":true,\"socket\":null},\"socket\":null}"
1643223261.258602 [0 127.0.0.1:54809] "SELECT" "0"
1643223261.259042 [0 127.0.0.1:54809] "EVAL" "for i = 2, #ARGV do\n  redis.call('publish', ARGV[i], ARGV[1])\nend" "0" "{\"event\":\"connected\",\"data\":{\"boolean\":true,\"socket\":null},\"socket\":null}" "IsConnected"
1643223261.259086 [0 lua] "publish" "IsConnected" "{\"event\":\"connected\",\"data\":{\"boolean\":true,\"socket\":null},\"socket\":null}"
1643223506.115183 [0 127.0.0.1:54958] "info"
1643223506.115765 [0 127.0.0.1:54959] "info"
1643223506.117294 [0 127.0.0.1:54958] "psubscribe" "*"

Laravel-echo-server log:

L A R A V E L  E C H O  S E R V E R

version 1.6.3

⚠ Starting server in DEV mode...

✔  Running at localhost on port 6001
✔  Channels are ready.
✔  Listening for http events... 
✔  Listening for redis events...

Server ready!

Channel: IsConnected
Event: connected
Channel: IsConnected
Event: connected

I'm just trying to do a simple console.log command, but for some reason it isn't working.

My bootstrap.js file:

window._ = require('lodash');

/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import Echo from 'laravel-echo';
window.io = require(`socket.io-client`);

import $ from 'jquery';

window.Echo = new Echo({
broadcaster: `socket.io`,
host: window.location.hostname + ':6001',
encrypted: true,
  authEndpoint: "api/broadcasting/auth",
 csrfToken: $('meta[name="csrf-token"]').attr('content'),
 auth: {
      headers: {
          Authorization: 'Bearer ' + $('meta[name="csrf-token"]').attr('content'),
      },
 },
});

My event php file:

<?php

namespace App\Events;

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

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

public $boolean;

/**
 * Create a new event instance.
 *
 * @return void
 */
public function __construct($boolean)
{
    $this->boolean = $boolean;
}

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{
    return new Channel('IsConnected');
}

public function broadcastAs() {
    return 'connected';
}

}

The javascript file where I'm trying to listen for the event:

require('./bootstrap');
import { Checkbox, Button } from '@mui/material';
import * as React from 'react';
import ReactDOM from 'react-dom';
import { io } from 'socket.io-client';

window.Echo.channel("IsConnected").listen(".connected", (e)=>{
    setConnected(true);
    console.log("lmao");
});

function ChangeStatus() {
    const [connected, setConnected] = React.useState(false);

    async function testFire (){
        await fetch("/api/v11/test-fire").then(res=>res.json()).then(res=>{
            console.log(res);
        }).catch(error=>console.log(error));
}

return(
    <div>
        <p>{connected? "Connected!" : "no"}</p>
        <button onClick={(e)=>{testFire();}}></button>
    </div>
);

}

ReactDOM.render(<ChangeStatus/>, document.querySelector("#lmao"));

My laravel-echo-server.json file:

{
"authHost": "http://localhost:3000",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
    "redis": {
        "port": "6379",
        "host": "localhost"
    },
    "sqlite": {
        "databasePath": "/database/laravel-echo-server.sqlite"
    }
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"secureOptions": 67108864,
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"subscribers": {
    "http": true,
    "redis": true
},
"apiOriginAllow": {
    "allowCors": false,
    "allowOrigin": "",
    "allowMethods": "",
    "allowHeaders": ""
}
}

I apologize if I'm being a little vague, but I genuinely have no idea why this isn't working. If you need more information I'm happy to oblige.

Answer 1

You can try to downgrade socket.io-client to version 2.3.0 ... for no aparent reason