laravel websocketsを使用したアプリケーションがあります。websocketとプッシャーの構成に必要なものはすべてセットアップ済みです。ただし、ブロードキャストチャネルをテストするたびに、
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.
これが私の設定です。
broadcast.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-js
パッケージをバージョン4.3.1
にダウングレードしてみてください。それは私が使用しているものであり、うまく機能します。最新バージョンは常に非セキュアwss
ではなくセキュアws
をリッスンしているようです。
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であり、wsではなくwssを強制的にリッスンします。