[SOLVED] Echo not subscribing to Reverb on production (works fine on my local)

Reverb Version

beta

Laravel Version

10.47

PHP Version

8.2.12

Description

Echo connects to Reverb server just fine since I can sing ping/pongs Ping pings work

However, it doesn't seem to subscribe to events.

Dev: Dev subscribes to WS

Prod: Prod doesn't subcribe at all

I've cross checked to confirm the code is same and that it isn't dependent on the the environment - that is the subscription should happen regardless of the environment.

Steps To Reproduce

Subscribe to event channel on both prod and dev. Prod doesn't work, dev does.

AppLayout.vue

...
onMounted(() => {
    console.log('Subscribing to broadcast channels');
    window.Echo.private('correspondence-channel')
        .listen('SendingCorrespondence', (e) => {
            console.log(e);
        });
})
...

bootstrap.js

...
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});
...

Also I can confirm there are no errors at all - no WSS or JS errors thrown.

LaryAI

2 years ago

Level 58

It sounds like you're experiencing an issue where Laravel Echo is not subscribing to channels on your production environment, even though it works fine in your development environment. Here are a few steps and checks you can perform to troubleshoot and potentially resolve this issue:

Environment Configuration: Ensure that your environment variables are correctly set in your production environment. Specifically, check the values for VITE_REVERB_APP_KEY, VITE_REVERB_HOST, VITE_REVERB_PORT, and VITE_REVERB_SCHEME. These should match the configuration of your Reverb server.
CORS and WebSocket Configuration: Make sure that your production server is correctly configured to handle CORS and WebSocket connections. Sometimes, WebSocket connections can be blocked due to CORS policies or firewall settings.
SSL/TLS Configuration: If you are using HTTPS in production, ensure that the forceTLS option is set correctly. Also, verify that your SSL certificates are properly configured and valid.
Network Issues: Check if there are any network issues or restrictions that might be preventing the WebSocket connection from being established in the production environment.
Debugging: Add additional logging to see if the subscription attempt is being made and if there are any errors that are not being caught. You can add more detailed logging in your onMounted function.

Here is an updated version of your AppLayout.vue with additional logging:

onMounted(() => {
    console.log('Subscribing to broadcast channels');
    window.Echo.private('correspondence-channel')
        .listen('SendingCorrespondence', (e) => {
            console.log('Event received:', e);
        })
        .error((error) => {
            console.error('Subscription error:', error);
        });
});

Check Reverb Server Logs: Look at the logs of your Reverb server to see if there are any errors or warnings that might indicate why the subscription is not working in production.
Verify Channel Authorization: Ensure that the authorization for private channels is working correctly in production. Sometimes, issues with authentication can prevent subscriptions from being established.
Check for Differences in Dependencies: Ensure that the versions of laravel-echo, pusher-js, and other related dependencies are the same in both your development and production environments.
Firewall and Security Groups: If your production environment is hosted on a cloud service (like AWS, Azure, etc.), ensure that the necessary ports for WebSocket connections are open and not blocked by security groups or firewalls.

By following these steps, you should be able to identify and resolve the issue preventing Laravel Echo from subscribing to channels in your production environment. If the problem persists, consider providing more detailed logs or error messages to get further assistance.