​
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 + TLS? WebGL requires secure WebSocket connections. PlayFlow handles the SSL certificates automatically when you enable 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
  3. In Unity, select the Bayou component
  4. Enter the TLS hostname (e.g., connect.playflowcloud.com) into Client Address field
  5. Enter the External Port into Port field
Important: For TLS/WSS connections, use the hostname (like connect.playflowcloud.com) not the IP address. PlayFlow provides this in the server details.
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 client is using the TLS hostname (not IP address)
  • Ensure “Use WSS” is enabled in Bayou
  • Confirm the correct external port is configured
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