Reactjs Pusher.js订阅并从React客户端推送到频道不工作

Reactjs Pusher.js订阅并从React客户端推送到频道不工作,reactjs,pusher,pusher-js,Reactjs,Pusher,Pusher Js,我有一个React web应用程序订阅了一个Pusher频道,该频道接收由API触发的事件——在这个场景中,一切正常。我现在想从React web应用程序本身而不是API触发事件,但是,我是通过状态通道来触发事件的,因为我过去常常收到警告,说只允许在私人或状态通道上进行。但是,当我从React web应用程序触发事件时,不会发生任何事情。我在仪表板上看不到该频道正在被订阅 AccountPage.js const videoPusherChannel = useRef<any>();

我有一个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]);



您应该在pusher js库中启用日志记录,并检查浏览器控制台以查看客户端发生了什么-如果可能,共享屏幕截图。您可以使用
Pusher.logToConsole=true启用日志记录@doydoy更新了屏幕截图。在将API的auth端点添加到pusher对象之后,我得到了一个401。不知道为什么,因为我在我的Laravel应用程序(API前端)的组件中使用了相同的功能,并且它可以工作。您应该启用pusher js库中的日志记录,并检查浏览器控制台以查看客户端上发生了什么-如果可能,共享屏幕截图。您可以使用
Pusher.logToConsole=true启用日志记录@doydoy更新了屏幕截图。在将API的auth端点添加到pusher对象之后,我得到了一个401。我不知道为什么,因为我在我的Laravel应用程序(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);
    }