Laravel 5.7-广播-socket.io-Redis:客户端无任何反应

时间:2018-08-29 19:20:05

标签: php laravel-5 redis socket.io laravel-echo

几天以来,我读到了有关如何在本地计算机上设置laravel-echo的信息。我设法能够使用redis和socket.io运行laravel-echo-server。

问题在于事件被触发,但是客户端没有任何反应。

我知道该事件已触发,因为它已登录到我的horizo​​n.log文件中。

Horizon started successfully.
[2018-08-29 18:35:30][31] Processing: App\Events\NewModel
[2018-08-29 18:35:31][31] Processed:  App\Events\NewModel

然后,进入我的echo.log文件,我可以看到用户已连接到通道并通过echo触发了该事件。

L A R A V E L  E C H O  S E R V E R

version 1.3.9

⚠ Starting server in DEV mode...

✔  Running at localhost on port 60010
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

[6:35:15 PM] - QW3VITRzWPH4FvxPAAAB joined channel: channel-name
Channel: presence-channel-name
Event: App\Events\NewModel

它在端口60010上运行,因为当我尝试在端口6001上进行操作时,客户端无法连接。

我在Windows 10计算机上使用virtualbox / homestead。

有端口转发到我的Homestead.yaml

ports:
    - send: 60010
      to: 6001

所以,我不明白为什么客户不记录事件。这就是为什么现在我的代码

echo.js
/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from "laravel-echo"
window.io = require('socket.io-client');
// Have this in case you stop running your laravel echo server
if (typeof io !== 'undefined') {
  window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':60010',
  });
    console.log('Connected to socket.io');
} else {
    console.log('Not connected to socket.io');
}

window.Echo.channel('channel-name')
    .listen('NewModel', (e) => {
        console.log('1:');
        console.log(e);
    })
    .listen('App\Events\NewModel', (e) => {
        console.log('2:');
        console.log(e);
    })
    .listen('App.Events.NewModel', (e) => {
        console.log('3:');
        console.log(e);
    });
laravel-echo-server.json
{
    "authHost": "https://app.torque.homestead",
    "authEndpoint": "/broadcasting/auth",
    "clients": [{
        "appId": "appId",
        "key": "key"
    }],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "port": "6379",
            "host": "127.0.0.1"
        },
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": "",
    "port": "60010",
    "protocol": "https",
    "socketio": {},
    "sslCertPath": "app.torque.homestead.crt",
    "sslKeyPath": "app.torque.homestead.key",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}
channels.php
<?php

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/


Broadcast::channel('App.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Broadcast::channel('channel-name', function () {
    return true;
});

如果您想查看其他文件,请告诉我。其实我不知道该怎么解决这个问题。

我认为问题可能出在转发端口上...但是就像我说的那样,使用6001无法正常工作。

我尝试了很多类似更改端口的操作(也许不是正确的组合,例如60010上的客户端和6001上的服务器吗???

我也多次将该行更改为echo.js

host: window.location.hostname + ':60010',

有一些我正在使用的版本:

vagrant@homestead:~$ node -v
v10.8.0
vagrant@homestead:~$ npm -v
6.4.0
vagrant@homestead:~$ php -v
PHP 7.2.9-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Aug 19 2018 07:16:54) ( NTS )

packages.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "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 run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "babel-preset-react": "^6.24.1",
        "bootstrap": "^4.1.3",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^2.1.14",
        "lodash": "^4.17.4",
        "popper.js": "^1.14.4",
        "vue": "^2.5.17"
    },
    "dependencies": {
        "@fortawesome/fontawesome": "^1.1.8",
        "@fortawesome/fontawesome-free-brands": "^5.0.13",
        "@fortawesome/fontawesome-free-regular": "^5.0.13",
        "@fortawesome/fontawesome-free-solid": "^5.0.13",
        "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
        "@fortawesome/vue-fontawesome": "0.0.22",
        "ajv": "^6.5.3",
        "bootstrap-confirmation2": "^4.0.1",
        "datatables.net": "^1.10.19",
        "datatables.net-bs4": "^1.10.19",
        "datatables.net-buttons": "^1.5.3",
        "datatables.net-buttons-bs4": "^1.5.3",
        "express": "^4.16.3",
        "ioredis": "^4.0.0",
        "laravel-echo": "^1.4.0",
        "laravel-echo-server": "^1.3.9",
        "socket.io": "^2.1.1",
        "socket.io-client": "^2.1.1",
        "vee-validate": "^2.0.9",
        "vue-inject": "^2.1.1",
        "yarn": "^1.9.4"
    }
}

composer.json

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": "^7.1.3",
        "aloha/twilio": "^4.0",
        "eyewitness/eye": "dev-beta",
        "fideloper/proxy": "^4.0",
        "guzzlehttp/guzzle": "^6.3",
        "laravel/framework": "5.7.*",
        "laravel/horizon": "^1.3",
        "laravel/passport": "^6.0",
        "laravel/tinker": "^1.0",
        "predis/predis": "^1.1"
    },
    "require-dev": {
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^2.0",
        "phpunit/phpunit": "^7.0"
    },
    "autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "psr-4": {
            "App\\": "app/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "extra": {
        "laravel": {
            "dont-discover": [
            ]
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

谢谢您的帮助!

-编辑-

在mcklayin建议我之后,我正在寻找redis数据。所以我运行这个:

vagrant@homestead:/var/lib$ redis-cli --scan
presence-channel-name:members
horizon:1
horizon:34
horizon:supervisors
horizon:measured_jobs
horizon:9
horizon:monitor:time-to-clear
horizon:job:App\Jobs\ProcessModels
horizon:35
horizon:queue:default
horizon:job_id
horizon:job:App\Events\NewModel
horizon:masters
horizon:last_snapshot_at
horizon:33
horizon:master:homestead-xVse
horizon:failed_jobs
horizon:32
horizon:supervisor:homestead-xVse:supervisor-1
horizon:recent_jobs
horizon:measured_queues

-编辑2-

有App \ Events \ NewModel.php文件

<?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 NewModel implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $data;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($data)
    {
        $this->data = $data;
    }

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

    public function broadcastAs()
    {
        return 'NewModel';
    }
}

1 个答案:

答案 0 :(得分:0)

尝试将其添加到App \ Events \ NewModel:

public function broadcastAs()
    
{
        
    return 'NewModel';
    
}

并在客户端的事件名称之前添加点符号:

window.Echo.channel('channel-name')
    .listen('.NewModel', (e) => {
        console.log('1:');
        console.log(e);
    })