# Fishnet WebGL

This guide will help you use [FishNet](https://github.com/FirstGearGames/FishNet)'s Websocket Transport, [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou), and create a headless server on Edgegap for a Unity project.

You can find the final sample project on our [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet), under the `Fishnet_v4.1.6R_WebGL` folder. This guide should work with any version of Fishnet, so long as you use the appropriate version of Bayou for it.

{% hint style="info" %}
Since FishNet version 4.1.6R comes with the Edgegap plugin included, we will use it to automatically build and containerize our game server, even if it is possible to do so manually using a Dockerfile.

For more information on the plugin, you can read our documentation [here](https://docs.edgegap.com/docs/sample-projects/unity-netcodes/broken-reference).

You will need to have Docker running for it to work properly.
{% endhint %}

### Unity requirements

This project is tested on Unity version `2021.3.16f1`. You will need the following modules to be installed with it:

* WebGL Build Support;
* Linux Dedicated Server Build Support;
* Linux Build Support (IL2CPP).

### Switch the transport

Download the Unity package for Bayou on [this GitHub](https://github.com/FirstGearGames/Bayou/releases). Import the package in the game project with the toolbar under `Asset/Import Package/Custom Package...`.

Open the `MainMenu` scene located under `Assets/SpaceEdge/Scenes`. In the `NetworkManager` gameObject, remove the `Tugboat` transport component. Replace it with the `Bayou` transport, located under `Asstes/FishNet/Plugins/Bayou`. Take note of the port value that's set, in this case `7770`.

Make sure to enable the `Start On Headless` option for the server build.

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

### Build the game server & Containerizing

Open the Edgegap plugin with the `Edgegap/Edgegap Hosting` toolbar menu. Verify your `Edgegap API Token` and either create or load an application for the game. Make sure the `port` value matches that of the Bayou transport. Select the `WS` protocol, then enter a `New Version Tag`.

Once this is properly set up, click on `Build and Push`, which will automatically containerize your game server and create a new application version on the Edgegap dashboard after a short waiting period.

### Testing the client

#### In the editor

Back in the project, select the `MatchmakingSystem` gameObject and change the following fields:

<figure><img src="https://3027732442-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: Set it to the “Application name” you used with the Edgegap plugin.
* AppVersion: Set it to the “Version name” you used with the Edgegap plugin.
* AuthHeaderValue: Set it to your Edgegap API token that you used with the Edgegap plugin.

{% hint style="info" %}
Remove the `token` word from the API token because we are setting this as the Authentication Header schema during the `Awake()` method of the `MatchmakingSystem`.
{% endhint %}

Open the `MatchmakingSystem` script, located under `Assets/SpaceEdge/Scripts/Systems`, where you may also update those same values. Search for `"UDP_PORT"` and replace it with `"Game Port"`.

{% hint style="info" %}
Previous versions of this sample would manually create the application via the Edgegap dashboard, and the name `UDP_PORT` would be used for the port used by the server.

The Edgegap plugin automatically names the port `Game Port` instead, which is why we must make sure to update the script. The game will not work otherwise.
{% endhint %}

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

Make sure that you uncheck the `Start On Headless` option in the `NetworkManager` gameObject as well.

Once this is done, click `Play` in the editor, then enter a name in the text box and click on `Start Game`. The game will check for any available server, or automatically have one get deployed if none exist, before connecting to it.

{% hint style="warning" %}
If there is a `ConnectionFailed` error on the client side, it may be because the `Start On Headless` option was not enabled in the `server build`, which means the deployment is not in a state to accept connections since the server never properly started. Make sure the option is enabled before trying again by creating a new container image and app version.

It may also be because app version's `port name` is not the same as in the `MatchmakingSystem` script. Make sure that both have the same name, in this case `"Game Port"`, before trying again.
{% endhint %}

#### On Itch.io

Once you've confirmed the game client works in the editor, it should also work in Itch.io. To upload your game there, you will need to make a client build in the `Build` screen of the Unity Editor, under `File -> Build Settings`. Select the following options:

* Set `Platform` to `WebGL`;
* Open up the `Player Settings`. Under `Player -> Publishing Settings`, set the `Compression Format` to `Gzip` and make sure the `Decompression Fallback` option is selected. Save these settings, and close the window.

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

Then press build and select a new empty folder named `build` as the file destination. Compress the files of this `build` folder into a zip folder, making sure that they are at the root of it. Then you simply need to upload the zip folder to your Itch project, and make sure to select the option for the file to play in the browser. The game should then work the same way as in the editor.