经常在带有 shadow-cljs 和 React Native 的 Cider 中看到“REPL 命令超时”。必须重启模拟器才能修复答案

【问题标题】：Often seeing "REPL command timed out" in Cider with shadow-cljs and React Native. Must restart emulator to fix经常在带有 shadow-cljs 和 React Native 的 Cider 中看到“REPL 命令超时”。必须重启模拟器才能修复
【发布时间】：2019-12-19 19:53:55
【问题描述】：

我正在使用 Emacs 与 Cider 和 ShadowCLJS 开发一个基本的 ReactNative 应用程序。我可以非常一致地使用 REPL 进行开发，但是一旦我不小心保存了一个包含语法错误的文件，我就会失去与 REPL 的通信。我输入的任何内容都会导致延迟，然后是“REPL 命令超时”。我发现修复它的唯一方法是使用npx react-native run-android 重新启动模拟器。但后来我失去了我在 REPL 中的所有状态。

【问题讨论】：

标签： react-native cider shadow-cljs

【解决方案1】：

这可能是许多不同的事情。

这可能与 Metro（或 Expo）提供的实时重新加载有关。在模拟器中按 Ctrl-M（Mac 上为 Cmd-M）以调出关闭快速刷新的选项。

https://facebook.github.io/react-native/docs/fast-refresh

https://github.com/thheller/shadow-cljs/issues/469

如果您在禁用快速刷新后仍然收到此错误，可能是因为 ReactNative 在重新加载时没有完全断开旧的 websocket。这是 shadow-cljs 的创建者的评论。

它是 react-native 中的一个错误，因为它在重新加载应用程序时不会断开 websockets，因此 shadow-cljs 认为“旧”应用程序仍在运行并尝试与它交谈（但它从不回复）我打开了一个问题在 RN repo 上，但由于一年左右不活动而关闭。我猜没人在乎。

我找到了一个使用 ReactNative 的 AppState 和从 shadow-cljs 开发命名空间中引用 websocket 的解决方法。

https://facebook.github.io/react-native/docs/appstate.html

https://github.com/thheller/shadow-cljs/blob/master/src/main/shadow/cljs/devtools/client/react_native.cljs

(defn on-app-state-change
  "Fixes issue with shadow-cljs repl losing connection to websocket.

  Put this in some root component's `component-did-mount`.
  https://stackoverflow.com/questions/40561073/websocket-not-closed-on-reload-appreact-native
  "
  [state]
  (cond
    (= state "background")
    (.close @shadow-rn/socket-ref)

    (and (= state "active")
         (nil? @shadow-rn/socket-ref))
    (shadow-rn/ws-connect)))

(defn make-reloader
  [component]
  (let [component-ref (r/atom component)]
    (letfn [(render []
              (let [component @component-ref]
                (if (fn? component)
                  (component)
                  component)))]
      (let [wrapper (r/create-class
                     {:render render
                      :component-did-mount
                      (fn []
                        (.addEventListener rn/AppState "change" on-app-state-change))

                      :component-will-unmount
                      (fn []
                        (.removeEventListener rn/AppState "change" on-app-state-change))})]

        (rn/AppRegistry.registerComponent "Ezmonic" (fn [] wrapper))
        (fn [comp]
          (reset! component-ref comp))))))

【讨论】：