在我的网站中实现 Demo Pubnub React App答案

【问题标题】：Implementing Demo Pubnub React App into my website在我的网站中实现 Demo Pubnub React App
【发布时间】：2020-07-16 19:58:06
【问题描述】：

我的应用中有几条路线，在其中一条路线中，我想包含来自https://github.com/pubnub/typescript-ref-app-team-chat 的演示 React Pubnub 团队应用。通常，我会将它们导入到我的 App.js 中，但我认为 React 应用程序不会导出任何内容，并且在尝试时遇到了几个错误（资源繁忙或锁定）。

那么，我怎样才能在我的网站中实现上述 React App？

【问题讨论】：

标签： reactjs react-redux pubnub

【解决方案1】：

尚未尝试添加到另一个应用程序，但如果您将 src 下的文件/文件夹添加到您的应用程序中，然后执行类似于 src/main/App.tsx 的操作，它应该可以工作

配置 pubnub


const pubnubConfig = Object.assign(
  {},
  {
    // Ensure that subscriptions will be retained if the network connection is lost
    restore: true,
    heartbeatInterval: 0
  },
  keyConfiguration
);
const pubnub = new Pubnub(pubnubConfig);

const store = createAppStore({
  pubnub: {
    api: pubnub
  }
});

const leaveApplication = () => {
  // This is required to show the current user leave immediately rather than
  // wating for the timeout period
  pubnub.unsubscribeAll();
};

const App = () => {
  useEffect(() => {
    // Start listening for messages and events from PubNub
    pubnub.addListener(createPubNubListener(store.dispatch));
    pubnub.addListener(createTypingIndicatorsListener(store.dispatch));
    return leaveApplication;
  }, []);

  useEffect(() => {
    window.addEventListener("beforeunload", leaveApplication);
  }, []);

将反应组件添加到您的路线之一

  ...
  <Route path="/chat">
    <ThemeProvider theme={appTheme}>
      <Provider store={store}>
        <PubNubProvider client={pubnub}>
          <Normalize />
          <GlobalStyles />
          <ApplicationRouter />
        </PubNubProvider>
      </Provider>
    </ThemeProvider>
  </Route>
  ...

【讨论】：

可能还想将提供程序移到更高级别，只需将应用程序中的 ApplicationRouter 添加到您的路由中
哦，您的应用程序中可能也有依赖项，没想到，但您可以在 package.json 中查找这些内容
是的，这是主要问题。我昨天试图实现这个，除了所有的依赖都搞砸了。