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 AppEvents;
use IlluminateBroadcastingChannel;
use IlluminateQueueSerializesModels;
use IlluminateBroadcastingPrivateChannel;
use IlluminateBroadcastingPresenceChannel;
use IlluminateFoundationEventsDispatchable;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateContractsBroadcastingShouldBroadcast;
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.
question from:
https://stackoverflow.com/questions/65935114/laravel-echo-is-not-listening-while-using-web-socket 
