2 years ago

#30585

test-img

pbrune

React Websockets not working with Laravel Echo Server

I've currently got websockets working with my project with a React front end (www.mysite.com) and a Laravel back end (api.mysite.com) with Laravel Echo Server. It is noted that my front end and back end are two separate IPs. It appears that everything is working properly, but for some reason I'm not seeing a console.log whenever an event fires.

Here's my laravel-echo-server setup:

{
    "authHost": "https://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "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": ""
    }
}

And I am seeing the event being logged here:

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

version 1.6.2

⚠ 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: chat.9332
Event: LeagueChatCreated

Here's how I have everything set up on the front end:

import Echo from "laravel-echo/dist/echo";
import socketio from "socket.io-client";

const echo = new Echo({
    host: "https://api.mysite.com/socket.io",
    broadcaster: "socket.io",
    client: socketio,
});

export default echo;
useEffect(() => {
    echo.channel("chat." + leagueId).listen("LeagueChatCreated", (ev) => {
        console.log("new request");
    });
}, []);

And if this helps at all, I'm seeing the sockets logged in the network tab ex: https://api.mysite.com/socket.io/?EIO=4&transport=polling&t=Nv0ZpN4 Here's the response back from that:

96:0{"sid":"zboOkFWvkLvOj8xKAADx","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000}2:40

reactjs

laravel

websocket

laravel-echo

0 Answers

Your Answer

Accepted video resources