Elm：如何在自己的浏览器窗口中呈现每个 elm 模块？ - 同一个应用程序中的两个模块（主模块）

Posted 2023-03-07

【中文标题】Elm：如何在自己的浏览器窗口中呈现每个 elm 模块？ - 同一个应用程序中的两个模块（主模块）

【英文标题】：Elm: How to render each elm module in it's own browser window? - both module in the same app (main module)

【发布时间】：2017-03-06 13:31:03

【问题描述】：

我有一个多显示器设置（带有 4 个显示器），我想构建一个 一个跨越其中 3 个显示器的应用程序，如下所示： -- 所有显示器都是在extend mode。

它是一个网络应用程序，因此它必须位于浏览器窗口内。我不知道如何制作这种形状的镀铬窗口。据我所知，浏览器窗口必须具有矩形形状。

我无法修改应用程序的设计，我尝试了许多布局..我不想失去功能...拥有所有这些显示器太糟糕了，我无法用所有空间做我想做的事.所以最终的布局必须是你在上面看到的这个红色形状..

我认为将我的应用程序拆分为多个较小的 chrome 窗口是一个好主意——基于功能。

例如：

-- main module - this holds my app
   -- module 1
   -- module 2
   -- module 3
   -- module 4 .. etc

我希望它们是这样的： - 同一个应用，多个 chrome 窗口中的多个组件/模块。

如果我将它们排列得更近，并隐藏窗口（最小化按钮、关闭按钮等），在视觉上我会得到一个非常漂亮的应用程序。

Chrome 在同一应用程序行为上支持这种多窗口。您可以在开发者控制台中看到它 - 您可以在 Style Css 面板中修改某些内容，并且页面会实时更新。

开发者工具以某种方式与页面通信。 - 也许这不是我需要的 - 但 这个想法是从另一个完全不同的窗口修改应用程序内部的东西。 Chrome 开发者工具是基于浏览器的 - 也可以作为单独的窗口打开。

与此行为有关 - 我发现 this library 和 this demo - 让您在同一域的 2 个 Chrome 窗口之间传递信息 - 但它是完全相同的应用程序，相同的内容！ 不是更大应用程序的一部分。.. 这就是问题所在。我想要的是 2 个具有不同内容的窗口 - 用于交流 - 就像开发人员工具与网页一样。

elm 架构非常适合传达更改 - 但我不知道如何实现跨所有窗口的更新。如果我单击监视器 1 模块 4 上的某些内容，我想在监视器 2 模块 2 中查看结果。

问题：

这可能吗？完全 - 不仅仅是榆树 - 而是一般......可以在 javascript 中完成？

有什么想法可以让它适应 elm 架构吗？

鉴于这是可能的，但与 elm 架构不兼容。如果我选择为每个功能/每个模块构建完全独立的 elm 应用程序 - 我怎样才能让它们无延迟地通信？我当然可以使用服务器，但即使是 60-100 毫秒的延迟也不是这里的选择。必须尽可能实时。

我在黑暗中。欢迎任何想法:)

【问题讨论】：

可以选择在Electron 中构建您的应用程序吗？看起来有几种不同的方法可以进行窗口间通信。你仍然可以使用 Elm 作为 Electron 的前端。

嗯，谢谢@Chad Gilbert，看起来很有希望......我会回来回答:)

@Chad Gilbert Electron 绝对是做这类事情的最佳选择。它还可以通过 Node.js 访问 Os API。诸如关闭/最小化 Windows、通知、文件系统等之类的东西。您的评论向我介绍了 Electron Land，这太棒了！！

【参考方案1】：

您可能会尝试使用SharedWorker 在不同选项卡之间共享上下文。此 API 相当新，因此可能会产生一些影响。

一个更简单的选择是Responding to storage changes with the StorageEvent

简而言之，您可以监听本地存储的变化。

let counter = 0;

if (window.localStorage.getItem('counter') === null) 
  setInterval(
    () => 
      document.body.innerText = counter;
      window.localStorage.setItem('counter', counter)
      counter++
    ,
    1000
  )
 else 
  window.addEventListener('storage', event => 
    document.body.innerText = event.newValue;
  )

尝试在多个选项卡中打开此JS Bin demo（如果您想检查两次，请记住刷新您的存储空间）。

使用 JavaScript Interop 将您的 Elm 应用程序与所有这些魔法集成在一起，一切就绪。