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

Question

WebSocket允许双向通信:服务器可以向浏览器发送消息，而浏览器--客户机--可以通过相同的连接返回。

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

• Laravel软件包 (不是拉拉回波服务器)，
• Laravel WebSockets
• 推js。

服务器触发事件，客户端侦听这些事件，我已经做到了，如下所示。

1. 安装Laravel WebSockets软件包。

composer require beyondcode/laravel-websockets

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

1. 配置config/websockets.php

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

1. 安装Pusher服务器。

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

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

BROADCAST_DRIVER=pusher

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

1. 启动WebSockets服务器。

php artisan websockets:serve

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

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

一切都很好。在步骤8中，我从服务器端触发事件。

注意，我不是在使用正式的Pusher服务器，我只是利用Pusher实现和pusher-js，但是将Laravel Echo JavaScript package指向第6步中配置的本地Laravel WebSockets server。

请不要将Laravel Echo JavaScript package和laravel-echo-server of Socket.IO Server混淆。我不使用Socket.IO Server。

现在，我不想像步骤8所示那样在服务器端触发事件，而是从客户端跳槽事件，因为WebSocket允许双向通信。我如何在Laravel中与Laravel Echo JavaScript Package，Laravel WebSockets PHP package一起做到这一点？

Answer 1

请参阅以下文档：通道/事件#触发-客户端事件

根据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

在初始化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 3

对于每个可能面临这个问题的人来说。

您不需要回显，应该直接从推车中实例化。

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