如何存储和共享单个 Pusher 实例

如何解决如何存储和共享单个 Pusher 实例

我读到不推荐使用多个 Pusher 实例，因此我使用的是 React 的上下文功能。

import React,{ useContext,useEffect,useRef } from "react";
import Pusher from "pusher-js";

const PusherContext = React.createContext<Pusher | undefined>(undefined);
export const usePusher = () => useContext(PusherContext)

export const PusherProvider: React.FC = (props) => {
    const clientRef = useRef<Pusher>();

    useEffect(() => {
        if (!clientRef.current) {
            clientRef.current = new Pusher('pusher_key',{
                cluster: 'pusher_cluster',authEndpoint: 'auth_endpoint',})
        }
    },[clientRef]);

    return (
        <PusherContext.Provider value={clientRef?.current}>
            {props.children}
        </PusherContext.Provider>
    )
}

我们的推送器实例的类型为 Pusher 或 undefined。当我们调用 usePusher 时，它总是未定义的。

import { usePusher } from "./services/pusher";


const Chat: React.FC = (props) => {
    const pusher = usePusher()
    
    useEffect(() => {
        if (pusher) {
            console.log("pusher is initialized/defined")
        } else {
            // it is always undefined
            console.log("pusher is not initialized/defined")
        }
    },[pusher])

    return (
        <div>
            Test component
        </div>
    )
}

问题出在哪里？

解决方法

似乎可以。我只是在包装提供者时做错了什么。希望对遇到类似问题的人有所帮助！