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