7

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

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

我已经得到它的工作，服务器触发事件​​和客户端监听这些事件如下。

  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 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？

4

4 回答 4

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",
 });
});
于 2021-05-06T03:38:28.517 回答
0

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

您不需要回显，应该直接从 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'})
于 2020-12-03T00:43:46.427 回答
0

我可能不正确，但我不相信你可以用他们的pusher-js包裹推送给 Pusher。这就是pusher-php-server作曲家包的用途。

可能有一个节点包，但你为什么要重新发明轮子？只需使用 axios 或 Vuex 操作发布到您的一条路线以触发您的事件，然后让 Echo 获取响应。

您甚至不需要创建控制器，只需使用路由关闭并触发您的事件。Axios 或 Vuex 都将返回一个 Promise，因此您可以在组件或 Vuex 操作中管理等待响应。

我可以理解您是否尝试使用 RabbitMQ 或 Rachet 之类的方式实现不同类型的广播驱动程序，但它被设计为某种循环循环，从 js 命中您的端点，从 PHP 触发事件，让 Pusher/或者 websockets 做这件事，用 js 接收你的广播。

于 2021-04-01T08:09:33.143 回答
0

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

如果您需要任何澄清，请告诉我。

于 2020-01-15T14:39:55.063 回答