如何使用Laravel WebSockets通过Laravel中的WebSocket将消息从客户端

Question

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

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

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

Laravel WebSockets

pusher-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-echopusher-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服务器，我只是利用Puster API实现，而是指向步骤6中配置的本地。pusher-jsLaravel Echo JavaScript packageLaravel WebSockets server

请不要混淆 。我没有使用.Laravel Echo JavaScript packagelaravel-echo-serverSocket.IO ServerSocket.IO Server

现在，我不想像步骤 8 中所示在服务器端触发事件，而是希望从客户端触发事件，因为 WebSocket 允许双向通信。我怎样才能做到这一点， ？LaravelLaravel Echo JavaScript PackageLaravel WebSockets PHP package

Answer 1

请参阅此文档：https://pusher.com/docs/channels/using_channels/events#triggering-client-events根据推送器文档，使用此按钮初始化前端 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

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

Answer 3

初始化Echo后，您需要在前端的某个通道上进行侦听。我将展示一些 Vue 代码，但会相应地进行修改：Vue Fileexport 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

对于可能面临此问题的每个人。您不需要回声，应直接从推杆实例化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'})