Laravel Echo Server、Redis、Socket.IO:似乎无法让它们工作 [英] Laravel Echo Server, Redis, Socket.IO: Can't seem to make them work

问题描述

我正在使用 Laravel 开发实时应用程序.由于我不想使用 Pusher，我正在尝试使用 Laravel Echo Server 使 websockets 工作、Redis 和 Socket.IO.但是，我对这个堆栈有问题.客户端(浏览器)似乎无法从事件接收数据.我还在前端使用 Intertia 和 Vue.还值得注意的是，我使用 Laragon 作为我的本地开发环境.

I'm developing real-time app with Laravel. Since I don't want to use Pusher, I'm trying to make websockets work using Laravel Echo Server, Redis, and Socket.IO. However, I'm having a problem with this stack. The client (browser) can't seem to receive data from events. I also use Intertia and Vue for the frontend. It's also worth noting that I use Laragon as my local dev environment.

我的.env，有些省略了:

APP_URL=http://malbe.test

BROADCAST_DRIVER=redis
CACHE_DRIVER=file
QUEUE_CONNECTION=redis
SESSION_DRIVER=file
SESSION_LIFETIME=120

MIX_APP_URL="${APP_URL}"

我的laravel-echo-server.json:

{
    "authHost": "http://malbe.test",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "omitted",
            "key": "omitted"
        }
    ],
    "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": true,
        "allowOrigin": "http://malbe.test:80",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

我在 database.php 上的 redis 配置:注意:我使用 predis 因为即使我在 PHP 扩展上安装了 dll，我似乎也无法使 phpredis 工作.

My redis config on database.php: Note: I use predis because I can't seem to make phpredis work even if I installed the dll on PHP extensions.

'redis' => [

        // 'client' => env('REDIS_CLIENT', 'phpredis'),
        'client' => env('REDIS_CLIENT', 'predis'),

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
            // 'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
            'prefix' => "",
        ],

        'default' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'password' => env('REDIS_PASSWORD', null),
            'port' => env('REDIS_PORT', '6379'),
            'database' => env('REDIS_DB', '0'),
        ],

        'cache' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'password' => env('REDIS_PASSWORD', null),
            'port' => env('REDIS_PORT', '6379'),
            'database' => env('REDIS_CACHE_DB', '1'),
        ],

    ],

我的 Laravel 事件:

My Laravel event:

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

   public function __construct()
   {
       //
   }

   public function broadcastOn() {
      return new Channel("my-channel");
   }

   public function broadcastWith() {
      return ["data"=>"Hello"];
   }
}

我在 bootstrap.js 上的 Echo 初始化:

My Echo initialization at bootstrap.js:

import Echo from "laravel-echo";
window.io = require("socket.io-client");

if (typeof window.io !== "undefined") {
    window.Echo = new Echo({
        broadcaster: "socket.io",
        host: process.env.MIX_APP_URL + ":6001"
    });
}

在订阅Echo服务器的Vue页面上

On the Vue page that subscribes to the Echo server

export default {
    props: ["foo"],
    mounted: function () {
        window.Echo.channel("my-channel").listen("SampleEvent", (d) => console.log(d));
    }
};

运行这 3 个命令:

1. laravel-echo-server 启动
2. npm run watch
3. php artisan queue:work

我尝试使用 Tinker 和 GET 请求广播事件.

I tried broadcasting an event using Tinker and GET request.

Route::get("/broadcast", function () {
    event(new \App\Events\SampleEvent);
    // also tried
    // broadcast(new \App\Events\SampleEvent);
});

队列工作者处理事件；

[2020-12-24 11:07:35][n9FKq0n6C6QOKa2f1JBzWcCqgYqLiDvU] Processing: App\Events\SampleEvent
[2020-12-24 11:07:35][n9FKq0n6C6QOKa2f1JBzWcCqgYqLiDvU] Processed:  App\Events\SampleEvent

并且 laravel-echo-server 在广播事件时输出这个；

And laravel-echo-server outputs this whenever an event was broadcast;

L A R A V E L  E C H O  S E R V E R  
                                     
version 1.6.2                        
                                     
⚠ Starting server in DEV mode...     
                                     
✔  Running at localhost on port 6001 
✔  Channels are ready.               
✔  Listening for http events...      
✔  Listening for redis events...     
                                     
Server ready!                        
                                 
Channel: my-channel                  
Event: App\Events\SampleEvent        

客户端没有显示任何错误.以下是开发者控制台上的网络"选项卡:

Client does not show any error. Here is a look to its Network Tab on Developer Console:

浏览器网络标签

当我关闭 laravel-echo-server 而客户端仍然打开时，此错误每隔一秒发生一次:

And when I closed the laravel-echo-server while the client is still open this error occurs every other second:

ERR_CONNECTION_REFUSED

抱歉问了这么长的问题，我只需要显示我的所有配置，以便我可以帮助您解决这个问题.谁能指出我正确的解决方案?谢谢！

Sorry for the lengthy question, I just had to show all my configuration so that I can help you help me with this issue. Can anyone point me to the right solution? Thanks!

推荐答案

我认为您的配置代码是正确的.你可以在 vue 中看到你的 package.json 配置:

I think your config code is right. You could see your configuration of package.json in vue:

"socket.io-client": "^2.4.0",

如果你的"socket.io-client"是>=3，你最好把它改成2.4.0.并运行:

If your "socket.io-client" is >=3, you'd better change it into 2.4.0. and run:

sudo cnpm i socket.io@2.4.0

这篇关于Laravel Echo Server、Redis、Socket.IO:似乎无法让它们工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！