更新

Question

我正在遵循https://medium.com/@dennissmink/laravel-echo-server-how-to-24d5778ece8b中给出的教程。

我安装了laravel-echo-server，redis，socket.io，laravel-echo。

这是laravel-echo-server init

的配置

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

此js代码位于app.blade.php的底部，该页面包含在所有页面中

<script type="module">
    import Echo from 'laravel-echo'

    window.io = require('socket.io-client');window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: window.location.hostname + ':6001'
    });

    window.Echo.channel('test-event')
        .listen('ExampleEvent', (e) => {
            console.log(e);
        });
</script>

我创建了一个事件php artisan make:event ExampleEvent，如下所示

namespace App\Events;

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

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

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('test-event');
    }

    public function broadcastWith()
    {
        return [
            'data' => 'Hi bro!'
        ];
    }
}

以及以下路线

Route::get('test-broadcast', function(){
    broadcast(new \App\Events\ExampleEvent);
});

我还启动了队列监听器

php artisan queue:listen --tries=1

当我访问页面test-broadcast时，我在终端机上看到了

但是浏览器的控制台什么也没显示，而console.log(e);必须返回一些信息。我也这样做了

    window.Echo.channel('test-event')
        .listen('ExampleEvent', (e) => {
            alert('hi')
            console.log(e);
        });

，但没有任何警报。听力似乎有些问题。

谢谢。

更新

在访问login或任何包含app.blade.php的页面时，我从浏览器的控制台收到此错误

更新

我更新了以下脚本代码

    <script src="http://{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
    <script src="{{ asset('/js/app.js') }}"></script>
    <script type="module">
        import Echo from 'laravel-echo'

        window.Echo = new Echo({
         broadcaster: 'socket.io',
         host: window.location.hostname + ':6001'
         });

        window.Echo.channel('test-event')
            .listen('.ExampleEvent', (e) => {
                console.log(e);
            });
    </script>

控制台仍报告错误

TypeError：错误解析模块说明符：laravel-echo

更新

我跑步

npm run development -- --watch

这就是结果

跨环境NODE_ENV =开发node_modules / webpack / bin / webpack.js --progress-隐藏模块--config = node_modules / laravel-mix / setup / webpack.config.js “-手表”

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/
setup/webpack.config.js "--watch"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Mamad\AppData\Roaming\npm-cache\_logs\2020-03-05T14_59_30_604Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `npm run development -- --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Mamad\AppData\Roaming\npm-cache\_logs\2020-03-05T14_59_30_697Z-debug.log

Answer 1

这总共是必需的：

默认Laravel安装
撰写者需要predis / predis
安装NPM模块（laravel-echo-server，socket.io和laravel-echo）
通过控制台设置Laravel Echo Server（大多数默认设置，域名除外）： docker build ./svc-a (or b)
Redis服务器的设置并使用Laravel broadcast.php文件连接到它

{ "authHost": "http://echo", "authEndpoint": "/broadcasting/auth", "clients": [ { "appId": "fc3de97a1787ea04", "key": "ecf31edced85073f7dd77de1588db13b" } ], "database": "sqlite", "databaseConfig": { "redis": {}, "sqlite": { "databasePath": "/database/laravel-echo-server.sqlite" } }, "devMode": true, "host": null, "port": "6001", "protocol": "http", "socketio": {}, "secureOptions": 67108864, "sslCertPath": "", "sslKeyPath": "", "sslCertChainPath": "", "sslPassphrase": "", "subscribers": { "http": true, "redis": true }, "apiOriginAllow": { "allowCors": true, "allowOrigin": "http://echo:80", "allowMethods": "GET, POST", "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id" } }

.p文件中的

或BROADCAST_DRIVER = redis

在web.php中添加路由

'default' => env('BROADCAST_DRIVER', 'redis')

在bootstrap.js中添加代码：

从'laravel-echo'导入Echo

window.io = require（'socket.io-client'）;
window.Echo =新的Echo（{ 广播公司：“ socket.io”，主机：window.location.hostname +'：6001' }）;

添加

window.Echo.channel（'MyChannel'） .listen（'。ExampleEvent'，（e）=> { console.log（e）; }）;

运行Route::get('/test-broadcast', function(){ broadcast(new \App\Events\ExampleEvent); return response('OK'); });来编译所有Javascript模块
运行npm run dev以启动Laravel Echo Server
运行laravel-echo-server start以启动侦听队列
访问http://echo/test-broadcast

已更新

11.1将ExampleEvent的方法调整为：

公共函数broadcastOn（） { 返回新的Channel（'MyChannel'）; }

公共函数broadcastAs（） { 返回'ExampleEvent'; }

11.2在welcome.blade.php中，在BODY标记之前，添加

php artisan queue:listen --tries=1

database.php中的11.3，将redix前缀设置为空字符串值

<script type="text/javascript" src="/js/app.js"></script>

不要忘记重新运行'prefix' => env('REDIS_PREFIX', '')并清除浏览器缓存

结果

Answer 2

从您的错误中，我认为您的软件包未安装或导入不正确。您可以尝试安装软件包

oddNumbers

将这些代码添加到 fileresources / js / bootstrap.js

的末尾

npm install --save socket.io-client laravel-echo

并运行import Echo from "laravel-echo" window.io = require('socket.io-client'); window.Echo = new Echo({ broadcaster: 'socket.io', host: window.location.hostname + ':6001' });

参考：https://laravel.com/docs/master/broadcasting#driver-prerequisites部分socket.io

Laravel Echo服务器在浏览器中无响应

更新

更新

更新

2 个答案: