0

Am having troubles with using Pusher-js in Laravel and having it show on Debug console. Pusher is connecting successfully but no event is seen on the debug console. My credentials are correct, it showed something few hours ago but hasn't responded again since then and am a little confused if there's a configuration I've not made

Broadcasting.js

            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
            ],

            
        ],```

Boostrap.js


window.Pusher = require('pusher-js');
Pusher.logToConsole = true;


window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    forceTLS: false,
    wsPort: 6001,
    disableStats: true,
});


window.Echo.channel('chat').listen('ChatEvent',(e)=>{
    console.log(e)
}) ```

Websocket.js

        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
            'verify_peer' => false,
        ],
    ],```

Package.json | devDependencies and dependencies

        "axios": "^0.19.2",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0.2",
        "jquery": "^3.2",
        "laravel-echo": "^1.9.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "pusher-js": "^7.0.1",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "v-toaster": "^1.0.3",
        "vue-chat-scroll": "^1.4.0",
        "websocket": "^1.0.32"
    }
} ```
Atuoha Anthony
  • 3
  • 4
  • The debug console on Pusher Dashboard is not showing anything at all. (Not Connected or Connected) – Atuoha Anthony Nov 11 '20 at 08:46
  • I am missing the part; " what have you tried" section in your question to make it work. I would suggest to try running the application to make your own connection and debug it? and see if the connection can be made using websockets. Did you try to create your own WebSocket client to connect to it using the chrome developer console? (F12 ) go to console and type in the following; (each line separate) var socket = new WebSocket("ws://localhost:6001"); socket.send("Example message to be received"); – Jasper Lankhorst Nov 11 '20 at 10:53
  • Have you tried looking at the documentation? Normally I would write down the answer but since there are many variables and allot of little steps and no evidence of what you did I need to refer to the urls for debugging. Laravel pusher bridge Which I think you are trying to use. - https://pusher-community.github.io/real-time-laravel/getting-started/laravel-pusher-bridge.html This is how to install it on a laravel application. Debugging your server-side integration with Pusher https://pusher-community.github.io/real-time-laravel/getting-started/server-debugging.html – Jasper Lankhorst Nov 11 '20 at 11:24
  • I've followed through those docs but still the same thing. There is no leading bug(s) logged anywhere. – Atuoha Anthony Nov 11 '20 at 14:40
  • Am now receiving something using php artisan websocket:serve --debug. Showing that webSocket is working and it is showing on the Network Tab of chrome developer console but it's not yet showing anything on debug console – Atuoha Anthony Nov 11 '20 at 15:32
  • From terminal -- New connection opened for app key xxxxxxxxx. Connection id xxxxxxxx sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"xxxxxxxxxx\",\"activity_timeout\":30}"} 1104914: connection id xxxxxxxxx received message: {"event":"pusher:subscribe","data":{"channel":"chat"}}. – Atuoha Anthony Nov 11 '20 at 15:33

0 Answers0