イベントと新しいチャンネルを設定しました:
class TaskCreated implements shouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $task;
public function __construct(Task $task)
{
$this->task = $task;
}
}
echoをインストールしてセットアップします
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'pusher-key',
cluster: 'ap2',
encrypted: true
});
次に、タスクが投稿されたときにTaskCreatedイベントを呼び出します
event(new TaskCreated($task));
ただし、問題はEchoがプッシャーログまたは何も聞かないことです。 laravel-websocketsではイベントはapiメッセージとして作成されました。
ここにvue js Echoの実装:
mounted () {
axios.get('/tasks').then(response => (this.tasks = response.data));
Echo.channel('taskCreated').listen('TaskCreated', (e) => {
console.log(e);
this.tasks.Push(task.body)
});
ダッシュボードで:
api-message Channel: taskCreated, Event: App\Events\TaskCreated 19:01:55
[〜#〜]更新[〜#〜]
WSで接続しようとすると、接続ステータスが10秒間保留され、エラーが発生して終了しました。接続が確立される前にWebSocketが閉じられます。 AND接続確立時のエラー:net :: ERR_CERT_AUTHORITY_INVALID。
リクエストURL:wss://127.0.0.1/app/local?protocol = 7&client = js&version = 6.0.2&flash = false
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
wsHost: window.location.hostname,
wssPort: 6001,
disableStats: true,
enabledTransports: ['ws', 'wss']
多分あなたは試すことができます:
TaskCreated
イベントで:
public function broadcastOn()
{
return new Channel('task.created');
}
そしてあなたのVueで:
Echo.channel('task.created').listen('TaskCreated', (e) => {
this.tasks.Push(task.body)
});
Kabelbaanが言ったように、ドットを削除しますが、デバッグコンソールに移動し、アプリを更新して始めます。タスクチャネルの接続とサブスクリプションが表示されます。そうでない場合は、イベントのディスパッチをプッシュするのではなく、接続のデバッグを開始できます。また、コピーと貼り付けは不完全ですが、あなたのwindow.Echoステートメントは不完全です。
net :: ERR_CERT_AUTHORITY_INVALID。
リクエストURL:wss://127.0.0.1/app/local?protocol = 7&client = js&version = 6.0.2&flash = false
ssl認定に問題がある可能性があります。 wssを使用していますhttpsのみ。 ssl証明書を確認するか、代わりにwsを使用してください。
プラスのヒント:
プッシャーの代わりに、socket.io + redisコンボを使用します。