如何使用 Laravel WebSockets 通过 Laravel 中的 WebSocket

Question

WebSocket 允许双向通信：服务器可以向浏览器发送消息，而浏览器（客户端）可以通过相同的连接进行响应。

我正在使用以下方法在 Laravel 6 中实现聊天应用程序：

Laravel Echo JavaScript 包（不是 laravel-echo-server），

Laravel 网络套接字

推送器-js。

我已经得到它的工作，服务器触发事件和客户端监听这些事件如下。

安装 Laravel WebSockets 包。

composer require beyondcode/laravel-websockets

配置config/broadcasting.php.

        'pusher' => [

            'driver' => 'pusher',

            'key' => xxx,

            'secret' => xxx,

            'app_id' => xxx,

            'options' => [

                'cluster' => xxx,

                'encrypted' => true,

                'useTLS' => true, 

                'host' => '127.0.0.1',

                'port' => 6001,

                'scheme' => 'https',

            ],

        ],

    ]

配置config/websockets.php

'apps' => [

        [

            'id' => xxx,

            'name' => xxx,

            'key' => xxx,

            'secret' => xxx,

            'enable_client_messages' => true,

            'enable_statistics' => true,

        ],

    ],

安装Pusher服务器。

composer require pusher/pusher-php-server "~3.0"

设置广播驱动程序以pusher在.env文件中使用。

BROADCAST_DRIVER=pusher

在我的客户端使用laravel-echo和。pusher-js

import Echo from "laravel-echo"

window.Pusher = require('pusher-js');

window.Echo = new Echo({

    broadcaster: 'pusher',

    key: 'your-pusher-key',

    wsHost: window.location.hostname,

    wsPort: 6001,

    disableStats: true,

});

启动 WebSockets 服务器。

php artisan websockets:serve

在服务器端，使用实现类的事件类触发事件ShouldBroadcastNow。

event(new MyEventClass((object)$message));

一切正常。在第 8 步中，我从服务器端触发事件。

请注意，我没有使用官方的 Pusher 服务器，我只是使用 Pusher API 实现，pusher-js但指向Laravel Echo JavaScript package本地Laravel WebSockets server，在步骤 6 中配置。

请不要Laravel Echo JavaScript package与laravel-echo-serverof混淆Socket.IO Server。我没有使用Socket.IO Server.

现在，我不想像第 8 步那样在服务器端触发事件，而是想从客户端触发事件，因为 WebSocket 允许双向通信。我怎么能用 , 做到Laravel这Laravel Echo JavaScript Package一点Laravel WebSockets PHP package？

Answer 1

请参阅此文档：https ://pusher.com/docs/channels/using_channels/events#triggering-client-events根据 pusher 文档，使用这个初始化你的前端 this.echo = new Pusher('mykey', {    wsHost: 'localhost',    wsPort: 6001,    forceTLS: false,    disableStats: true,    enabledTransports: ['ws', 'wss']  });用它来触发你的事件var channel = this.echo.subscribe("private-channel");channel.bind("pusher:subscription_succeeded", () => {var triggered = channel.trigger("client-someEventName", {   your: "data", });});

Answer 2

我可能不正确，但我不相信你可以用他们的pusher-js包裹推送给 Pusher。这就是pusher-php-server作曲家包的用途。可能有一个节点包，但你为什么要重新发明轮子？只需使用 axios 或 Vuex 操作发布到您的一条路线以触发您的事件，然后让 Echo 获取响应。您甚至不需要创建控制器，只需使用路由关闭并触发您的事件。Axios 或 Vuex 都将返回一个 Promise，因此您可以在组件或 Vuex 操作中管理等待响应。我可以理解您是否尝试使用 RabbitMQ 或 Rachet 等实现不同类型的广播驱动程序，但它被设计为某种循环循环，从 js 命中您的端点，从 PHP 触发事件，让 Pusher/或者 websockets 做这件事，用 js 接收你的广播。

Answer 3

初始化 Echo 后，您需要在前端的某个频道上收听。我将展示一些 Vue 代码，但要进行相应的修改：Vue文件export default {    methods: {        sendCommand(command) {            axios.post('/api/command', { 'command': command })            .then((res) => {                //            })        }    },    mounted() {        Echo.channel('xxx')        .listen('.weight-change', (e) => {            this.weight = e.weight        })    }}在这里，您可以看到所有传入的消息都在代码的侦听部分捕获，并且发送新消息是通过后端的 api 路由完成的，该路由将它们发送到 Echo 通道。如果您需要任何澄清，请告诉我。

Answer 4

对于每个可能面临这个问题的人。您不需要回显，应该直接从 Pusher 实例化const my_pusher = new Pusher("APP_KEY", {        cluster: 'mt1',        wsHost: window.location.hostname,        wsPort: 6001,        forceTLS: false,        disableStats: true,    });并将消息发送到服务器：my_pusher.send_event('EVENT_NAME',{'ANYTHING':'YOU_WANT'})