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

Question

WebSocket允许双向通信：服务器可以向浏览器发送消息，浏览器 - 客户端 - 可以通过相同的连接进行响应。我正在 Laravel 6 中实现聊天应用程序：使用：Laravel Echo JavaScript Package （不是 laravel-echo-server），Laravel WebSocketspusher-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,        ],    ],安装服务器。Pushercomposer require pusher/pusher-php-server "~3.0"将广播驱动程序设置为在文件中使用。pusher.envBROADCAST_DRIVER=pusher使用和在我的客户端。laravel-echopusher-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在服务器端，使用实现类的事件类触发事件。ShouldBroadcastNowevent(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 File

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

对于可能面临此问题的每个人。

您不需要回声，应直接从推杆实例化

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'})