Angular 8 & Laravel echo websockets with socket io：找不到 Socket.io 客户端

Question

我用php artisan serve 让 Laravel 在本地运行，用npm install -g laravel-echo-server 安装 laravel-echo-server 然后我运行命令laravel-echo-server init 来生成 laravel-echo-server.json：

{
    "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": true,
        "allowOrigin": "http://localhost:8001",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

然后我运行命令laravel-echo-server start 来启动服务器，结果是this console，然后我运行命令php artisan queue:listen 来监听队列，最后我启动tinker 控制台来运行我的事件。这只是一个带有“测试”消息的基本事件：

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

    private $message = 'test';

    /**
     * Create a new event instance.
     *
     */
    public function __construct()
    {

    }

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

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

在角度我设置了以下内容：

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

this.echo.connector.socket.on('connect', function () {
    console.log('CONNECTED');
});

this.echo.connector.socket.on('reconnecting', function () {
    console.log('CONNECTING');
});

this.echo.connector.socket.on('disconnect', function () {
    console.log('DISCONNECTED');
});

this.echo.channel('test-channel')
    .listen('.test', (data) => {
        console.log(data);
});

但是，当我启动 Angular 客户端时，我收到以下消息： Socket.io client not found

Answer 1

你需要在 angular.json 中添加一个 socketio-client

npm i socket.io-client

// 在 angular.json 中

"options": {        
    "scripts": [
        "node_modules/socket.io-client/dist/socket.io.js"
     ]
}