FlyWeb 是一个实验性项目，我们一直在 Mozilla 平台部门的深处进行原型设计。它起源于去年年底的一个副项目，从那时起，一个小型、非正式的团队一直在致力于实现该概念的“版本零”。在过去 6 个月里，我们一直在改进实现，现在已经到了我们可以放心地谈论它的阶段，特别是对于那些可能对它提出的想法感兴趣的 Web 开发人员和硬件黑客们。

从根本上来说，我们的目标是：让在物理上靠近的人或设备能够轻松地互相流式传输应用程序和内容。为了实现这一点，我们希望让任何人能够轻松地搭建一个“局域网服务器”，并且可以让使用浏览器的其他人发现并连接到该局域网服务器。在这个架构之上构建了什么，就取决于你和其他开发人员/黑客。

FlyWeb 服务器可以驻留在你计算机或智能手机上加载的网页上，也可以驻留在你网络上的小型硬件设备上。FlyWeb 服务器并非设计为可被“互联网”访问，而仅限于本地网络上的用户访问（即，已经在物理附近的人）。

FlyWeb 的设计很简单。FlyWeb 服务器是一个 Web 服务器，它使用 mDNS 在本地网络上进行自我宣传。在 Firefox Nightly 中，我们添加了一个小型 UI 元素，让你可以列出本地宣传的 FlyWeb 服务（默认情况下关闭，只有在 dom.flyweb.enabled 配置首选项为真时才会激活）。当你选择要连接的服务时，浏览器会为该服务创建一个唯一的“UUID 主机名”，并将所有带有该主机名的 URL 路由到该服务。此外，我们使用新的 navigator.publishServer() 函数扩展 Web API，该函数允许网页在本地网络上发布 FlyWeb 服务器。系统会提示用户允许网页执行此操作。

这种设计支持两大类用例。一类与浏览器之间的交互有关，另一类涉及浏览器与想要向用户公开 UI 的“智能硬件”之间的交互。两者都使用相同的架构进行处理。

浏览器到浏览器的交互

假设你编写了一个专为智能手机设计的多人游戏。这里我说的不是 MMORPG，而是指在同一房间里由一群人玩的游戏，比如数字版卡坦、拼字游戏或扑克游戏。你有以下几种选择

1. 编写一个智能手机应用程序

这个解决方案可行，但你需要在应用商店发布该应用程序，并让每个人在玩游戏之前都下载该应用程序。如果有人想换一种游戏，他们都必须下载另一种游戏。该应用程序需要使用一些本机通信协议，以便手动发现和连接彼此的手机。

2. 编写一个基于 Web 的游戏

这也是一个合理的解决方案，但有一些问题。每个人都必须访问游戏的网站，并且可能需要在网站上创建帐户（或接收某种唯一的令牌），然后用它来彼此协调。玩家之间的通信必须通过游戏托管的服务器进行转发，这意味着需要低延迟输入的游戏很难或不可能实现。此外，所有参与游戏的玩家都必须连接到互联网。

FlyWeb 方法

以上两种方法都会造成很大的用户摩擦。使用 FlyWeb，你可以将游戏设计为 Web 游戏，但不再使用云来实现多人游戏，游戏本身可以托管本地多人游戏体验。以下是具体操作方法

1. 小组中的一人加载游戏网站，并要求游戏开始一个新的多人游戏会话。
2. 游戏会调用 navigator.publishServer()（一个 FlyWeb API）来发布一个局域网服务器。publishServer 返回一个 Promise，它解析为一个 FlyWebPublishedServer 对象，游戏会在该对象上绑定 HTTP/WebSocket 请求的事件处理程序。
3. 朋友们可以通过浏览器发现游戏，并直接连接到游戏。
4. 当他们连接时，主机网页的 FlyWebPublishedServer 事件处理程序会被调用。主机网页充当 Web 服务器，并向所有连接器提供其自身的一个副本（并跟踪它们）。“客户端”网页可以建立一个 WebSocket 连接返回到主机网页，如果游戏需要低延迟通信的话。
5. 每个人一起玩。就游戏而言，主机网页和玩家网页之间的通信使用标准的 Web 技术（如 HTTP fetch 请求和 WebSocket）来实现。

没有人需要下载应用程序，没有人需要注册帐户，或交叉引用唯一的代码或其他任何复杂的操作。只有托管游戏的浏览器需要连接到互联网才能获取主机“服务器”网页（使用 Service Worker 等新的 Web 功能，甚至不需要互联网连接）。该游戏可以建立在纯 Web 协议上，所有操作都具有低延迟并且可以玩。基本上，无需任何局域网之外的支撑基础设施和支持 FlyWeb 的浏览器，就可以创建多人游戏体验。

例如，Justin 将 FlyWeb 集成到一个基于 Unity WebGL 的赛车演示中，灵感来自 4 人分屏的马里奥赛车游戏玩法，Kannan 在 Mozilla 多伦多办事处举行了一次简短的游戏环节

在我们这个例子中，笔记本电脑浏览器充当“控制台”，智能手机 FlyWeb 客户端充当游戏控制器。智能手机浏览器会发现并连接到笔记本电脑网页上托管的游戏服务器，并接收一个“控制器 UI”网页。手机上的这个控制器网页会建立一个 WebSocket 连接返回到主机网页，并使用它将触控和转向输入发送回去。

如果你有一部 Android 手机和一台笔记本电脑，你今天就可以玩这个演示（如果你想的话，还可以下载源代码并进行修改）。只需访问 flyweb.github.io 并按照说明操作，然后访问该页面的“Showcase”部分，以获取演示的链接。该游戏通过 GitHub Pages 托管，源代码可在我们的 GitHub 仓库 中的“flyweb-gp”文件夹中找到。

你还可以查看该 GitHub 仓库中的“flyfile”和“photo-wall”子文件夹，以了解更简单的基于 Web 的文件共享在智能手机之间的演示。

智能硬件

假设你正在构建一个硬件设备。也许它是一款新式智能恒温器，或者你自制的四轴飞行器。太好了！现在你需要一个 UI 来控制它。你可以选择以下几种方案

1. 编写一个智能手机应用程序

这可能是第一个想到的方案，但它有一些问题。编写智能手机应用程序很困难。你需要设置一个开发环境，下载 SDK/构建工具以及你选择的平台的所有其他东西。你需要编写应用程序，将其编译成一个包，并将其加载到你的手机上。如果你希望其他人能够轻松使用你的应用程序，你需要在应用商店发布它（希望它能被接受）并维护它。这是一个非常大的麻烦。

此外，你还需要为想要支持的每个不同的平台构建这个应用程序。你想从 Windows 或 Mac 笔记本电脑访问它，除了你的手机？再写一个应用程序。这绝对不是最方便的开发体验。

2. 构建一个从你的设备提供的 Web UI

这种方法简单得多。你不需要构建一个原生应用程序。UI 在不同的平台上都能正常工作。你不需要在应用商店托管应用程序。你不需要构建一个应用程序包来分发以供侧载。但是，访问 UI 很难。你必须打开浏览器，以某种方式找出设备的 IP 地址，然后输入它。

这种方法也很容易出错。如果你后来碰巧在其他局域网（例如 192.168.1.1:80）上以相同的私有 IP 地址访问其他服务，则该服务可能会窃取第一个服务存储的 cookie。这些服务在使用缓存时必须小心，因为当你访问第二个服务时，你可能会获得第一个服务的缓存页面。

FlyWeb 方法

FlyWeb 的方法基本上是选项 2，但加入了一些额外的魔法。第一个魔法是通过 mDNS 进行宣传，以及一个浏览器 UI 来按名称发现服务，而不是必须手动找出并输入 IP 地址。第二个魔法是生成唯一的 hostname。目前，每次连接到服务时，浏览器都会生成一个 UUID 用作该服务的 hostname。没有两个 UUID 会在服务之间共享，因此我们可以避免诸如泄漏 cookie 或缓存交叉污染等问题。

在才华横溢的 Kate Glazko 的帮助下，我们构建了一个演示，展示了这种方法如何使用 Parrot AR 四轴飞行器和 Raspberry PI（控制飞行器并公开一个 FlyWeb 服务器），并在 2016 年 6 月的 Mozilla 全体会议上进行了展示。这是一段演示视频

本演示的源代码也包含在我们的 示例仓库 中（在 flyweb-quadcopter 文件夹下）。我们已经构建了其他基于硬件的演示，例如 ESP8266，它是一款仅售 5 美元的带有嵌入式微控制器的 WiFi 芯片。FlyWeb 服务器可以在极其简陋的硬件上运行。即使是微小的、低功耗的设备也能呈现非常丰富的 UI，因为 Web 平台允许它们将控制 UI 动态流式传输到更强大的智能手机或计算机。

下一步

目前，此功能仅在 Firefox Nightly 中实现并公开（未在 Aurora 或 Beta 中），并且隐藏在默认情况下关闭的偏好设置后面。当前实现基本上是“版本 0”实现，足以构建一些非常棒的演示，并体验 FlyWeb 的潜力。

团队目前的目標是讓早期採用者開發者和愛好者使用這個實現，並就该功能作为未来“真正”的 Web 标准的可行性提供反馈。如果您是希望创建简洁的多用户“本地区域”体验的 Web 开发人员，或者您是希望为您的作品提供 UI 的硬件黑客，我们希望您能尝试一下，玩一玩，并告诉我们您的想法。

如果您對此功能的潛力感到興奮，想用它来构建东西，或帮助进行实现（我们的团队只有 2 人，我们不是什么大型项目——这实际上是一个实验性的“秘密项目”），请访问我们的网站 flyweb.github.io。您也可以在 Slack 上与我们聊天 mozflyweb.slack.com（注册 此处）或在 Twitter 上关注我们 @MozFlyWeb。

注意事项

请记住，这是一个非常早期的实现。可能存在错误和安全问题。如果您确实尝试使用 FlyWeb，我们建议您为此目的创建一个新的 Firefox 配置文件，并建议您不要使用该配置文件浏览通用网络。仅使用单独的配置文件运行 FlyWeb 演示或您自己的代码。

快乐地进行黑客攻击！:)