Laravel Echo is not listening while using Web Socket

Question

I am making chat using web socket listening port, Now I install websocket and pusher following this video link on you tube link

But after following all step started websocket serve and its running successfully but when calling php artisan serve and running URL getting error on console.

DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Web socket is not listening the port, here is my code of event

<?php

namespace App\Events;

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

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

    public $somedata;
    
    public function __construct($somedata)
    {
        $this->somedata = $somedata;
    }

    public function broadcastOn()
    {
        return new Channel('DemoChannel');
    }
}

This is web route where calling event.

Route::get('/', function () {
    broadcast(new WebsocketDemoEvent('some data'));
    return view('welcome');
});

This is my bootstrap.js code

window._ = require('lodash');
import Popper from 'popper.js/dist/umd/popper.js';

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

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

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import Echo from 'laravel-echo'

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

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


 window.Echo.channel('DemoChannel').listen('WebsocketDemoEvent', (e) => {
    console.log(e);
 });

welcome page code

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
 </head>
    <body>
        <div id="app" class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>

        <script src="js/app.js"></script>
    </body>
</html>

Here is package JSON

"devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.21"
    },
    "dependencies": {
        "laravel-echo": "^1.5.2",
        "pusher-js": "^4.3.1",
        "vue-chat-scroll": "^1.3.5"
    }

I tried all the solution from internet and stack over flow but none is able to solve this , please help to solve this issue, Thank you in advance , Picture where I am not getting demo channel response.

And when tried to send message from Web Socket channel getting response this is the console of web socket page console error

Failed to load resource: the server responded with a status of 404 (Not Found) /admin/websocket/api/anyID/statistics:1 Failed to load resource: the server responded with a status of 404 (Not Found) /admin/websocket/event:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Please help me with it, I am very new with web Socket.

check your network tab ws section websocket is connected or not — Kamlesh Paul
3 step as on picture showing there is not any request showing blank space — vikash

vikash vikash · Accepted Answer · 2021-01-30T06:46:10

Find the solution for this problem

Check if pusher is install if not then Install the pusher-js
After run npm run watch on terminal
Run admin/websocket on same channel like http://127.0.0.1:8000/admin/websocket and console where you are calling the route in which websocket broadcoast calling like http://127.0.0.1:8000/.

Now when I am sending data from channel it is receiving it is receiving on welcome route console.

Laravel Echo is not listening while using Web Socket

1 Answers