Skip to main content

​
Easy WebGL Hosting with PlayFlow

​
How PlayFlow Makes WebGL Hosting Easy

For seamless WebGL gaming experiences in web browsers, secure WebSocket connections are crucial, but configuring them can be complex. Often, developers end up managing certificates and networking issues, which can be time-consuming. With PlayFlow, however, you only need to enable a simple option to handle these concerns effortlessly.
This guide is based on the official Fish-Net WebGL tutorial. Visit their guide for additional screenshots and details.

​
Before We Begin

This tutorial assumes you’ve already completed the standard Fish-Net setup. In the following steps, we’ll convert your project to support WebGL.

​
Setup Steps

1

Install Bayou

For Fish-Net connections on WebGL, we need a web-supported transport. This tutorial uses Bayou.
  1. Download the latest unitypackage from Bayou GitHub Releases
  2. Import it into your Unity project Bayou Latest Release
2

Add Bayou to NetworkManager

  1. Select your NetworkManager in the scene
  2. Add the Bayou component to it Bayou Added to NetworkManager
If you have multiple transports (like Tugboat), add the TransportManager component and drag Bayou into its Transport field to set it as active.
3

Enable WSS

In the Bayou component:
  1. Enable the “Use WSS” option (Web Socket Secure)
  2. SSL Configuration options will appear below - don’t modify these for PlayFlow Bayou WSS Enabled
PlayFlow handles all SSL configuration automatically when you enable TLS.
4

Build Your PlayFlow Server

Open the PlayFlow Cloud window from Unity toolbar (PlayFlow → PlayFlow Cloud).Click Upload Server to build and upload your Unity server.PlayFlow Uploading Server
5

Configure PlayFlow Port Protocol

In the PlayFlow dashboard:
  1. Navigate to Configuration tab
  2. Add or edit your port
  3. Choose TCP protocol
  4. Enable TLS ✓ (Critical for WebGL)
  5. Save configuration PlayFlow TCP TLS Configuration
Why TCP with TLS? WebGL requires secure WebSocket connections. PlayFlow handles the SSL certificates automatically when you enable TLS. TLS is a separate checkbox that can only be enabled on TCP ports, so choose TCP first, then tick TLS.
6

Start a PlayFlow Server

  1. Go to the Servers tab in PlayFlow
  2. Create your server instance
  3. Select your uploaded build
  4. Launch the server PlayFlow Create WebGL Server
7

Prepare Your Client Build

  1. Click on your server instance’s Details
  2. Look for the TLS Connection information (this maps to the host and external_port of the TCP entry in the server’s network_ports array from the API)
  3. In Unity, select the Bayou component
  4. Enter the TLS host into the Client Address field
  5. Enter the external port into the Port field
Read the host and port from your server, never hardcode them. The TLS host and the external port are shown in the server’s TLS Connection details (and returned in the network_ports[] array from the API). The external port is allocated per server and differs from your internal port, so copy the exact values PlayFlow gives you rather than assuming a fixed hostname or port.
PlayFlow Server DetailsBayou Configuration
8

Build Your WebGL Client

  1. In Unity, switch to WebGL platform in Build Settings
  2. Build your game
  3. Zip the built files
  4. Upload to your chosen hosting platform (e.g., itch.io, GitHub Pages) Zipped WebGL Files
The example below shows hosting on itch.io:
itch.io WebGL Game

​
Success!

Just like that, you’ve created a server and have your clients in the web browser securely connecting to it!

​
Troubleshooting

  • Verify TLS is enabled in PlayFlow port settings
  • Check that the client is using the TLS host copied from the server details (not an IP address)
  • Ensure “Use WSS” is enabled in Bayou
  • Confirm the external port matches the value from your server’s network_ports (it is allocated per server and differs from the internal port)
If you have both Tugboat and Bayou on your NetworkManager, make sure to add TransportManager component and set Bayou as the active transport.
Don’t modify the SSL Configuration settings in Bayou - PlayFlow handles all certificates automatically when TLS is enabled.

​
Resources

WebGL Deployments

Advanced WebGL deployment strategies

Fish-Net Standard

Standard Fish-Net setup for desktop/mobile

Lobby System

Add lobbies to your WebGL game