Laravel Echo 在使用 Web Socket 时没有监听答案

【问题标题】：Laravel Echo is not listening while using Web SocketLaravel Echo 在使用 Web Socket 时没有监听
【发布时间】：2021-05-02 05:31:29
【问题描述】：

我正在使用 web socket 监听端口进行聊天，现在我按照你管上的这个视频链接安装 websocket 和 pusher link

但是在完成所有步骤之后，websocket serve 启动并成功运行，但是当调用 php artisan serve 并在控制台上运行 URL 时出现错误。

DevTools 无法加载 SourceMap：无法加载内容 http://127.0.0.1:8000/js/popper.js.map：HTTP 错误：状态码 404，网络::ERR_HTTP_RESPONSE_CODE_FAILURE

Web socket 没有监听端口，这是我的事件代码

<?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');
    }
}

这是调用事件的网络路由。

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

这是我的 bootstrap.js 代码

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);
 });

欢迎页面代码

<!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>

这里是 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"
    }

我尝试了互联网和堆栈溢出的所有解决方案，但没有一个能够解决这个问题，请帮助解决这个问题，提前谢谢你，我没有得到演示频道响应的图片。

当尝试从 Web Socket 通道发送消息得到响应时这是web socket页面控制台错误的控制台

加载资源失败：服务器响应状态为 404 （未找到）/admin/websocket/api/anyID/statistics:1 加载失败资源：服务器响应状态为 404（未找到） /admin/websocket/event:1 加载资源失败：服务器响应状态为 404（未找到）

请帮帮我，我是 web Socket 的新手。

【问题讨论】：

检查你的网络标签ws部分websocket是否连接
你能解释一下，如何检查它
i.stack.imgur.com/nuTI4.png这样检查
3 步，如图所示，没有任何显示空白的请求
这意味着你没有在java脚本中列出任何频道

标签： php jquery laravel vue.js websocket

【解决方案1】：

找到这个问题的解决方案

检查是否安装了 pusher，如果没有安装 pusher-js
在终端上运行npm run watch后
在同一频道上运行admin/websocket，如http://127.0.0.1:8000/admin/websocket 和控制台，您正在调用路由，其中websocket 广播调用如http://127.0.0.1:8000/。

现在，当我从通道发送数据时，它正在接收它在欢迎路由控制台上接收。

【讨论】：