1

我有一个 React Web 应用程序订阅了一个 Pusher 通道，该通道接收由 API 触发的事件 - 在这种情况下，一切正常。但是，我现在想从 React Web 应用程序本身而不是 API 触发事件，并且我通过状态通道来执行此操作，因为我曾经收到警告说只允许在私有或状态通道上。但是，当我从 React Web 应用程序触发事件时，什么都没有发生。而且我在仪表板上看不到正在订阅的频道。

AccountPage.js

const videoPusherChannel = useRef<any>();

useEffect(() => {

        var pusher = new Pusher('<PUSHER_KEY>', {
            cluster: 'eu',
        });

        const videoChannel = pusher.subscribe(`presence-video-starting.${authState.userId}`);

        videoChannel.bind('client-video-10-mins', function (data: any) {

            alert("test");
            return true;
        });

        videoPusherChannel.current = videoChannel;
}, []);


useEffect(() => {


        videoPusherChannel.current.trigger("client-video-10-mins", {
            type: 'video-starting',
            user: authenticatedUser,
            data: []
        });
}, [videoPusherChannel.current]);
  • 首先渲染，创建推送器实例并订阅频道。通道被分配给 refs 以确保在钩子之外访问
  • 一旦 ref 有一个值，即订阅频道，触发client-video-10-mins事件

什么都没有发生 - 没有错误。Pusher 仪表板未显示频道的订阅事件，并且我在浏览器上看不到警报“测试”。

我哪里错了？？

***更新***

来自开发控制台的屏幕截图：

在此处输入图像描述

从我的 API 验证函数（使用用户的硬编码值进行测试）：

public function authenticate(Request $request)
    {

        $socketId = $request->socket_id;
        $channelName = $request->channel_name;

        $pusher = new Pusher(<PUSHER_KEY>, <PUSHER_INFO>, <PUSHER_INFO>, [
            'cluster' => 'eu',
            'encrypted' => true
        ]);

        $presence_data = ['name' => "Tom Tom"];
        $key = $pusher->presence_auth($channelName, $socketId, 6, $presence_data);

        return response($key);
    }
4

0 回答 0