Search code examples
laravelpusherlaravel-echolaravel-10pusher-js

Soketi + Laravel broadcast events, realtime communication works in host but not externally (web chat app)

I have managed to implement real time communication in my web chat app, but I had a few problems when opening my domain through HTTPS..but then I followed the following steps to disable security to test things out:

  1. In laravel config/broadcasting.php , in 'pusher' config, under 'options' I've set the 'encrypted' to false

  2. In my laravel resources/js/bootstrap.js I set the forceTLS to false, and encrypted to false, when building the "window.Echo = new Echo({.."

  3. I've set PUSHER_SCHEME=http in .env file

  4. I've opened my app exclusively with "http://" protocol, on one browser (chrome) and on another browser (firefox) on my server / same computer / dev computer. Real time communication works from one side to another in my webchat app!! (git repo: https://github.com/Pablo-Camara/Chat-Rooms )

But then I've tried to send a message from mobile + mobile internet (outside wifi - external), and in my computer it listened for the event properly and showed the new message.. but when I send from the computer, on my phone I don't get the real time message / it seems to not listen... I wonder if it's the same problem because of being "WS" or "WSS" (secure connection or not).

I also tried from external net / host to external net / host (used https://www.browserling.com/ ), but it won't work real-time. It seems that only on my host machine it works / listens for events! could it be something on cloudflare since my DNS is there? could it be that i really need to setup secure soketi / websocket connection? "wss" instead of "ws" ? I have soketi port(6001) open on my router too..Also If I do need to setup secure connection, anyone knows how to implement it with cloudflare free certificate?

btw soketi is running on docker/with docker-compose.yml:

soketi:
    image: 'quay.io/soketi/soketi:latest-16-alpine'
    environment:
        SOKETI_DEBUG: '1'
        SOKETI_METRICS_SERVER_PORT: '9601'
    ports:
        - '${SOKETI_PORT:-6001}:6001'
        - '${SOKETI_METRICS_SERVER_PORT:-9601}:9601'
Solution

  • Ok, so I found out my problem, and tested a few things:

    • My env variable ( that is visible on the frontend ) called "VITE_PUSHER_HOST" had local ip "127.0.0.1", when I switched that to my public IP, testing between external hosts / nets ( with https://www.browserling.com/ ) Image below: enter image description here

    But now if I test on my own host / dev computer / self host, with my public ip, it wont work between browsers like before! So if testing on my local / dev / host, I would have to use 127.0.0.1 !

    Btw after changing those, one has to build JS again! ( npm run build ) to release these VITE_ENV_VARS to the frontend!

    I wonder If I could have both! To test my external phone CHATTING with my host computer and vice-versa, and still have External CHATTING with External, working.. ( anyone let me know how to handle this since my dev computer is the same as my production computer - and is the host - with docker - and open ports in router configs - I tried using domain that points to the same IP but domain doesnt work externally only on same host, so.. solution is public IP to work in prod/externally, local ip (127.0.0.1 or domain because IN HOSTS file) will work on dev machine)

    Cool! it works! I hope sharing this will help someone! :)