如何使用 Laravel WebSockets 在 Laravel 中通过 WebSocket 将消息从客户端发送回服务器？

Question

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

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

• Laravel Echo JavaScript 包（不是 laravel-echo-server），
• Laravel 网络套接字
• pusher-js。

我已经知道服务器触发事件​​并且客户端侦听这些事件如下。

1. 安装 Laravel WebSockets 包。

composer require beyondcode/laravel-websockets

2. 配置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',
            ],
        ],
    ]

3. 配置 config/websockets.php

'apps' => [
        [
            'id' => xxx,
            'name' => xxx,
            'key' => xxx,
            'secret' => xxx,
            'enable_client_messages' => true,
            'enable_statistics' => true,
        ],
    ],

4. 安装Pusher服务器。

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

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

BROADCAST_DRIVER=pusher

6. 在我的客户端使用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,
});

7. 启动 WebSockets 服务器。

php artisan websockets:serve

8. 在服务器端，使用实现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

初始化 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 通道。

如果您需要任何说明，请告诉我。