> For the complete documentation index, see [llms.txt](https://docs.edgegap.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.edgegap.com/zh/docs/sample-projects/unity-netcodes/fishnet-on-edgegap-webgl.md).

# Fishnet WebGL

使用 FishNet 的 Bayou WebSocket 传输在 Edgegap 游戏服务器上运行 Unity WebGL 多人游戏。

本指南将帮助你使用 [FishNet](https://github.com/FirstGearGames/FishNet)的 Websocket 传输、 [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou)，并为 Unity 项目在 Edgegap 上创建一个无头服务器。

你可以在我们的 [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet)上找到最终示例项目，位于 `Fishnet_v4.1.6R_WebGL` 文件夹中。只要你为其使用合适版本的 Bayou，本指南应适用于任何版本的 Fishnet。

{% hint style="info" %}
由于 FishNet 4.1.6R 版本已包含 Edgegap 插件，我们将使用它来自动构建并容器化我们的游戏服务器，即使也可以通过 Dockerfile 手动完成。

有关该插件的更多信息，你可以阅读我们的文档 [这里](broken://pages/3abea5cdd9e3a9c090704ebd2b7b5d09a77d50a4).

你需要让 Docker 运行起来，它才能正常工作。
{% endhint %}

### Unity 要求

此项目在 Unity 版本 `2021.3.16f1`上进行了测试。你需要安装以下模块：

* WebGL 构建支持；
* Linux Dedicated Server 构建支持；
* Linux 构建支持（IL2CPP）。

### 切换传输

在 [这个 GitHub](https://github.com/FirstGearGames/Bayou/releases)下载 Bayou 的 Unity 包。使用工具栏中的 `资源/导入包/自定义包...`.

打开位于 `MainMenu` 下的场景 `Assets/SpaceEdge/Scenes`。在 `NetworkManager` 游戏对象中，移除 `Tugboat` 传输组件。将其替换为位于 `Bayou` 传输，位于 `Asstes/FishNet/Plugins/Bayou`。注意已设置的端口值，在本例中 `7770`.

请确保启用 `Start On Headless` 选项，用于服务器构建。

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-594181325c3fba9f457c57865daad12b3acc32d3%2Fnetwork-manager-setup.png?alt=media" alt=""><figcaption></figcaption></figure>

### 构建游戏服务器并进行容器化

使用 `Tools/Edgegap Hosting` 工具栏菜单打开 Edgegap 插件。验证你的 `Edgegap API Token` ，并为游戏创建或加载一个应用。确保 `端口` 值与 Bayou 传输中的值一致。选择 `WS` 协议，然后输入一个 `New Version Tag`.

一切设置正确后，点击 `Build and Push`，它会在短暂等待后自动将你的游戏服务器容器化，并在 Edgegap 控制台上创建一个新的应用版本。

### 测试客户端

#### 在编辑器中

回到项目中，选择 `MatchmakingSystem` 游戏对象并更改以下字段：

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7e7c88646513c68ea7dd68ba7aba1a40aa1b09d1%2Ffishnet-matchmaking-system.png?alt=media" alt=""><figcaption></figcaption></figure>

* AppName：将其设置为你在 Edgegap 插件中使用的“应用名称”。
* AppVersion：将其设置为你在 Edgegap 插件中使用的“版本名称”。
* AuthHeaderValue：将其设置为你在 Edgegap 插件中使用的 Edgegap API 令牌。

{% hint style="info" %}
移除 `token` 一词，因为我们会在 `Awake()` 方法中将其设置为身份验证头方案，该方法位于 `MatchmakingSystem`.
{% endhint %}

打开位于 `MatchmakingSystem` 脚本中，位置在 `Assets/SpaceEdge/Scripts/Systems`，你也可以在那里更新这些相同的值。搜索 `"UDP_PORT"` 并将其替换为 `"Game Port"`.

{% hint style="info" %}
本示例的早期版本会通过 Edgegap 控制台手动创建应用，而名称 `UDP_PORT` 会用于服务器使用的端口。

Edgegap 插件会自动将端口命名为 `Game Port` ，因此我们必须确保更新脚本。否则游戏将无法工作。
{% endhint %}

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-2a6ddd5037990eccf3c62943a9f6cc610ff175e8%2Ffishnet-code.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7a1523917e1509cab8490108ed7a98b44ae5423e%2Fport-name.png?alt=media" alt=""><figcaption></figcaption></figure>

请确保取消勾选 `Start On Headless` 选项在 `NetworkManager` 游戏对象中也要取消，因为我们现在要测试客户端集成。

完成后，点击 `Play` 在编辑器中，然后在文本框中输入一个名字并点击 `Start Game`。游戏会检查是否有可用服务器；如果没有，则会自动部署一个，然后再连接到它。

{% hint style="warning" %}
如果客户端一侧出现 `连接失败` 错误，可能是因为 `Start On Headless` 选项未在 `服务器构建`中启用，这意味着部署尚未处于可接受连接的状态，因为服务器从未正确启动。请先通过创建新的容器镜像和应用版本来确保启用该选项，然后重试。

这也可能是因为应用版本的 `端口名称` 与脚本中的 `MatchmakingSystem` 不相同。请确保两者名称一致，在本例中为 `"Game Port"`，然后再重试。
{% endhint %}

#### 在 Itch.io 上

一旦你确认游戏客户端在编辑器中可正常工作，它在 Itch.io 上也应该能正常工作。要将游戏上传到那里，你需要在 Unity 编辑器的 `构建` 界面中创建一个客户端构建，路径为 `文件 -> 构建设置`。选择以下选项：

* 设置 `平台` 中禁用任何应用或版本，以 `WebGL`;
* 打开 `Player Settings`。在 `Player -> Publishing Settings`下，将 `Compression Format` 中禁用任何应用或版本，以 `Gzip` 设置为，并确保 `Decompression Fallback` 选项已选中。保存这些设置，然后关闭窗口。

<figure><img src="https://3334189208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-d31291cf36a863193c24a856718a791db0c61577%2Fbuild-settings.png?alt=media" alt=""><figcaption></figcaption></figure>

然后点击构建，并选择一个名为 `build` 的新空文件夹作为文件输出位置。将此 `build` 文件夹中的文件压缩为 zip 文件夹，确保它们位于根目录中。然后你只需将 zip 文件夹上传到你的 Itch 项目，并确保选择让文件在浏览器中运行的选项。这样游戏应该就能像在编辑器中一样运行。