> 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/ru/docs/sample-projects/unity-netcodes/fishnet-on-edgegap-webgl.md).

# Fishnet WebGL

Это руководство поможет вам использовать [FishNet](https://github.com/FirstGearGames/FishNet)WebSocket-транспорт, [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou)и создать headless-сервер на Edgegap для проекта Unity.

Вы можете найти итоговый пример проекта на нашем [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet), в `Fishnet_v4.1.6R_WebGL` папке. Это руководство должно работать с любой версией Fishnet, если вы используете подходящую версию Bayou для неё.

{% hint style="info" %}
Поскольку версия FishNet 4.1.6R уже включает плагин Edgegap, мы будем использовать его для автоматической сборки и контейнеризации нашего игрового сервера, даже несмотря на то, что это можно сделать вручную с помощью Dockerfile.

Для получения дополнительной информации о плагине вы можете прочитать нашу документацию [здесь](broken://pages/8f2a97be56c6cb22e241d0ea675b0c2aafba8497).

Для корректной работы вам потребуется запущенный Docker.
{% endhint %}

### Требования к Unity

Этот проект протестирован на версии Unity `2021.3.16f1`. Вам потребуется установить следующие модули:

* Поддержка сборки WebGL;
* Поддержка сборки Linux Dedicated Server;
* Поддержка сборки Linux (IL2CPP).

### Переключите транспорт

Скачайте Unity-пакет для Bayou на [этом GitHub](https://github.com/FirstGearGames/Bayou/releases). Импортируйте пакет в проект игры через панель инструментов в разделе `Asset/Import Package/Custom Package...`.

Откройте `MainMenu` сцену, расположенную в `Assets/SpaceEdge/Scenes`. В объекте `NetworkManager` удалите компонент транспорта `Tugboat` . Замените его транспортом `Bayou` , расположенным в `Asstes/FishNet/Plugins/Bayou`. Обратите внимание на заданное значение порта, в данном случае `7770`.

Не забудьте включить `Start On Headless` для серверной сборки.

<figure><img src="https://3845012722-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>

### Сборка игрового сервера и контейнеризация

Откройте плагин Edgegap через меню панели инструментов `Tools/Edgegap Hosting` . Проверьте ваш `Edgegap API Token` и либо создайте, либо загрузите приложение для игры. Убедитесь, что значение `port` совпадает со значением транспорта Bayou. Выберите протокол `WS` затем введите `New Version Tag`.

После того как всё будет правильно настроено, нажмите `Build and Push`, после чего ваш игровой сервер будет автоматически контейнеризирован и через некоторое время на панели Edgegap будет создана новая версия приложения.

### Тестирование клиента

#### В редакторе

Вернувшись в проект, выберите объект `MatchmakingSystem` gameObject и измените следующие поля:

<figure><img src="https://3845012722-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: Укажите здесь «Application name», который вы использовали в плагине Edgegap.
* AppVersion: Укажите здесь «Version name», который вы использовали в плагине Edgegap.
* AuthHeaderValue: Укажите здесь ваш токен Edgegap API, который вы использовали в плагине Edgegap.

{% hint style="info" %}
Удалите слово `token` из токена API, потому что мы задаём это как схему заголовка аутентификации во время метода `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://3845012722-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://3845012722-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` объекте gameObject, поскольку сейчас мы хотим протестировать интеграцию клиента.

После этого нажмите `Play` в редакторе, затем введите имя в текстовое поле и нажмите `Start Game`. Игра проверит наличие доступного сервера или автоматически развернёт его, если таковых нет, прежде чем подключиться к нему.

{% hint style="warning" %}
Если на стороне клиента возникает `ConnectionFailed` ошибка, это может быть связано с тем, что `Start On Headless` опция не была включена в `серверной сборке`, что означает, что развёртывание находится не в состоянии принимать подключения, поскольку сервер так и не был корректно запущен. Перед новой попыткой убедитесь, что опция включена, создав новый образ контейнера и новую версию приложения.

Это также может быть потому, что `имя порта` в версии приложения не совпадает с `MatchmakingSystem` скриптом. Убедитесь, что у обоих одинаковое имя, в данном случае `"Game Port"`, прежде чем попробовать снова.
{% endhint %}

#### На Itch.io

После того как вы подтвердите, что игровой клиент работает в редакторе, он должен также работать в Itch.io. Чтобы загрузить туда свою игру, вам потребуется собрать клиентскую версию на экране `Build` в Unity Editor, в разделе `File -> Build Settings`. Выберите следующие параметры:

* Установите `Platform` чтобы `WebGL`;
* Откройте `Player Settings`. В разделе `Player -> Publishing Settings`установите `Compression Format` чтобы `Gzip` и убедитесь, что `Decompression Fallback` опция выбрана. Сохраните эти настройки и закройте окно.

<figure><img src="https://3845012722-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` в качестве папки назначения для файлов. Сожмите файлы этой `build` папки в zip-архив, убедившись, что они находятся в его корне. Затем вам нужно просто загрузить zip-архив в ваш проект Itch и обязательно выбрать опцию запуска файла в браузере. После этого игра должна работать так же, как и в редакторе.