# Fishnet WebGL
本指南将帮助你使用 [FishNet](https://github.com/FirstGearGames/FishNet)的 Websocket 传输， [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou)，并在 Edgegap 上为一个 Unity 项目创建无头服务器。
你可以在我们的 [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 Build Support；
* Linux Dedicated Server Build Support；
* Linux Build Support（IL2CPP）。
### 切换传输
在以下位置下载 Bayou 的 Unity 包 [这个 GitHub](https://github.com/FirstGearGames/Bayou/releases)。在游戏项目中通过工具栏导入该包，路径为 `Asset/Import Package/Custom Package...`.
打开 `MainMenu` 位于以下位置的场景 `Assets/SpaceEdge/Scenes`。在 `NetworkManager` gameObject，移除 `Tugboat` 传输组件。将其替换为 `Bayou` 传输，位于 `Asstes/FishNet/Plugins/Bayou`下。记下已设置的端口值，在本例中为 `7770`.
请确保为服务器构建启用 `Start On Headless（无头启动）` 选项。
### 构建游戏服务器与容器化
通过 `Edgegap/Edgegap Hosting` 工具栏菜单打开 Edgegap 插件。验证你的 `Edgegap API Token（Edgegap API 令牌）` ，并为游戏创建或加载一个应用。确保 `端口` 值与 Bayou 传输的值匹配。选择 `WS` 协议，然后输入一个 `New Version Tag（新版本标签）`.
完成正确设置后，点击 `Build and Push（构建并推送）`，这将自动容器化你的游戏服务器，并在短暂等待后在 Edgegap 控制台上创建一个新的应用版本。
### 测试客户端
#### 在编辑器中
回到项目中，选择 `MatchmakingSystem` gameObject 并更改以下字段：
* AppName：设置为你在 Edgegap 插件中使用的“Application name”。
* AppVersion：设置为你在 Edgegap 插件中使用的“Version name”。
* AuthHeaderValue：设置为你在 Edgegap 插件中使用的 Edgegap API 令牌。
{% hint style="info" %}
从 API 令牌中移除 `令牌` 这个词，因为我们在 `Awake()` 方法中将其设置为 `MatchmakingSystem`.
{% endhint %}
打开 `MatchmakingSystem` 脚本的身份验证 Header 模式，脚本位于 `Assets/SpaceEdge/Scripts/Systems`下，你也可以在那里更新相同的值。搜索 `"UDP_PORT"` 并将其替换为 `"Game Port"`.
{% hint style="info" %}
此示例的先前版本会通过 Edgegap 仪表板手动创建应用程序，并使用名称 `UDP_PORT` 作为服务器使用的端口。
Edgegap 插件会自动将端口命名为 `Game Port` ，因此我们必须确保更新脚本。否则游戏将无法运行。
{% endhint %}
同时确保你取消勾选 `Start On Headless（无头启动）` 选项于该 `NetworkManager` gameObject。
完成后，点击 `Play` 在编辑器中，然后在文本框中输入名称并点击 `Start Game（开始游戏）`。游戏会检查是否有可用服务器；如果没有，会在连接之前自动部署一个。
{% hint style="warning" %}
如果客户端出现 `ConnectionFailed` 错误，可能是因为在 `Start On Headless（无头启动）` 服务器构建 `中未启用`选项，这意味着由于服务器未正确启动，部署未处于可接受连接的状态。请确保启用该选项，然后创建新的容器镜像和应用版本后再试。
也可能是因为应用版本的 `端口名称` 与 `MatchmakingSystem` 脚本中的不一致。请确保两者名称相同，在本例中为 `"Game Port"`，然后再试。
{% endhint %}
#### 在 Itch.io 上
一旦你确认游戏客户端在编辑器中可用，它在 Itch.io 上也应该可用。要将你的游戏上传到那里，你需要在 `Build` Unity 编辑器的界面，在 `File -> Build Settings`中制作一个客户端构建。选择以下选项：
* 设置 `平台` 转向 `WebGL`;
* 打开 `Player Settings`。在 `Player -> Publishing Settings`下，将 `Compression Format` 转向 `设置为 Gzip` 并确保选择了 `Decompression Fallback` 选项。保存这些设置并关闭窗口。
然后点击构建，并选择一个名为 `将` 作为文件目标。将该 `将` 文件夹中的文件压缩为一个 zip 文件夹，并确保它们位于 zip 的根目录。然后你只需将该 zip 文件夹上传到你的 Itch 项目，并确保选择在浏览器中运行文件的选项。随后游戏应与在编辑器中的运行方式相同。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.edgegap.com/zh/docs/sample-projects/unity-netcodes/fishnet-on-edgegap-webgl.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.