如何使用 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-jsimport 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'})