在我的网站中实施 Demo Pubnub React App

Question

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

那么，如何将上述 React App 应用到我的网站中呢？

Answer 1

还没有尝试添加到另一个应用程序，但如果您将 src 下的 files/folders 添加到您的应用程序中，然后执行类似于 src/main/App.tsx 的操作，它应该可以工作 [=12] =]

配置 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>
  ...

在我的网站中实施 Demo Pubnub React App

Implementing Demo Pubnub React App into my website

pubnub

reactjs

react-redux