Веб-сокет Laravel не может подключиться к толкателю ERR_CERT_AUTHORITY_INVALID

Question

У меня есть приложение laravel с веб-сокетами. Я уже настроил все необходимое для конфигурации websocket и pusher. Но всякий раз, когда я тестировал свой канал вещания, я получал

app.js:58283 WebSocket connection to 'wss://127.0.0.1/app/644a4ac1988060882370?protocol=7&client=js&version=6.0.2&flash=false' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

Когда я немного перезагружаюсь. иногда я получаюapp.js:55791 WebSocket connection to 'wss://127.0.0.1/app/644a4ac1988060882370?protocol=7&client=js&version=6.0.2&flash=false' failed: WebSocket is closed before the connection is established.

Вот мои конфиги.

broadcasting.php

   'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
            ],
        ],

websockets.php

  'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
            'verify_peer' => false,
        ],
    ],

bootstrap.js

import Echo from "laravel-echo"
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxx',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    // enabledTransports: ['ws', 'wss']
});

window.Echo.channel('Inventory').listen('InventoryEvent',(e)=>{
    console.log(e)
})

web.php

Route::get('/', function () {
    broadcast(new InventoryEvent('somedata'));
    return view('welcome');
});

InventoryEvent

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

    public $somedata;

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

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

package.json

    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "admin-lte": "^3.0.4",
        "fusioncharts": "^3.15.1-sr.1",
        "laravel-echo": "^1.7.0",
        "pusher-js": "^6.0.2",
        "sweetalert2": "^9.10.9",
        "vue-fusioncharts": "^3.0.4",
        "vue-moment": "^4.1.0",
        "vue-router": "^3.1.6",
        "vue-select": "^3.9.5"
    }

Я уже настроил env для своих учетных данных pusher. Нужно ли мне что-то настраивать в моем пушере, чтобы это работало? У меня есть еще один проект с такой же настройкой, но он работает, а этот - нет.

Answer 1

Попробуйте понизить свою pusher-js пакет к версии 4.3.1. Это то, что я использую, и это хорошо работает. Последняя версия всегда прослушивает безопасныйwss вместо незащищенного ws.

Answer 2

В вашем файле bootstrap.js попробуйте изменить:

import Echo from "laravel-echo"
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxx',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false, //<<<<=====CHANGE THIS
    // enabledTransports: ['ws', 'wss']
});

window.Echo.channel('Inventory').listen('InventoryEvent',(e)=>{
    console.log(e)
})

значение по умолчанию для параметра forceTLS - true, что заставляет прослушивать wss вместо ws.

Answer 3

У меня была аналогичная проблема. Я провел много отладки, не зная, что упустил очень простую вещь, которая, в конце концов, не была такой простой :) В моем файле ../config/websockets.php был разрешен только один IP-адрес. я должен был это прокомментировать

      'allowed_origins' => [
    //'124.0.0.1',
    //
],

Answer 4

1. В laravel config/broadcasting.php, в конфигурации «толкателя», в разделе «Параметры» я установил для параметра «зашифровано» значение false

2. В моих ресурсах laravel/js/bootstrap.js для параметра ForceTLS установлено значение false и зашифровано значение false, пример:

   window.Echo = new Echo({ вещатель: 'pusher', ключ: import.meta.env.VITE_PUSHER_APP_KEY, кластер: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',wsHost: import.meta.env.VITE_PUSHER_HOST, / / Используйте wssHost вместо wsHostwssHost: import.meta.env.VITE_PUSHER_HOST, // Используйте wssHost вместо wsHostwssPort: import.meta.env.VITE_PUSHER_PORT, // Используйте wssPort вместо wsPortwsPort: import.meta.env.VITE_PUSHER_PORT, // Используйте wssPort вместо wsPort ForceTLS: false, // Установите для ForceTLS значение true для безопасного соединения. protected: false, // Установите для шифрования значение true для безопасного соединения. /Указать wss как единственный транспорт });

3. Я установил PUSHER_SCHEME=http в файле .env.

4. Я открыл свое приложение исключительно по протоколу «http://» в одном браузере и в другом браузере на моем сервере/том же компьютере/компьютере разработчика. В моем приложении веб-чата общение в режиме реального времени работает с одной стороны на другую!

Но затем я попытался отправить сообщение с мобильного телефона + мобильного Интернета (внешнее Wi-Fi - внешнее), и на моем компьютере оно правильно прослушало событие и показало новое сообщение.. но когда я отправляю с компьютера, на моем телефоне Я не получаю сообщения в реальном времени/кажется, оно не слушается... Интересно, та же проблема из-за того, что это "WS" или "WSS" (защищенное соединение или нет). Есть идеи у кого-нибудь? Репозиторий Github: https://github.com/Pablo-Camara/Chat-Rooms

Я еще попробую с внешней сети/телефона на внешнюю сеть/телефон, но что-то мне подсказывает, что не получится. Изменить: я тестировал с виртуального компьютера/браузера Edge и другого Firefox, и между ними связь не в реальном времени! только на моей хост-машине это работает! может быть что-то на Cloudflare? может быть, мне действительно нужно настроить безопасное соединение Soketi/WebSocket? «wss» вместо «ws»?