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.
Mirror with SimpleWebTransport provides robust WebSocket support for WebGL builds, making it easy to deploy multiplayer games to web browsers.

​
Before We Begin

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

​
Setup Steps

1

Install SimpleWebTransport

Mirror comes with SimpleWebTransport included by default. If you don’t have it:
  1. Ensure you have the latest version of Mirror
  2. SimpleWebTransport should be in your project automatically
SimpleWebTransport is Mirror’s official WebSocket transport for WebGL builds.
2

Add SimpleWebTransport to NetworkManager

  1. Select your NetworkManager in the scene
  2. Add the SimpleWebTransport component to it
  3. Remove or disable KCP Transport (not needed for WebGL) SimpleWebTransport Settings
3

Configure SimpleWebTransport

In the SimpleWebTransport component:Client settings:
  1. Enable “Client Use Wss” ✓ (WebSocket Secure)
  2. Set Client Port Option to “Use Custom Port”
  3. Set Client Port to match your PlayFlow external port (you’ll get this later)
Server settings:
  • Keep Port as 7778 (default)
The “Client Use Wss” option is critical for secure WebGL connections through PlayFlow.
4

Configure NetworkManager

Ensure Auto Start Server Build is checked in your NetworkManager - this will automatically start the server in headless builds.
5

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 automatically builds a headless Linux server optimized for dedicated hosting.
6

Configure PlayFlow Port Protocol

In the PlayFlow dashboard:
  1. Navigate to Configuration tab
  2. Add a new port or edit existing
  3. Port Name: mirror_webgl
  4. Port Number: 7778 (SimpleWebTransport default)
  5. Protocol: TCP
  6. Enable TLS ✓ (Critical for WebGL)
  7. Save configuration
Why TCP + TLS? WebGL requires secure WebSocket connections. PlayFlow handles the SSL certificates automatically when you enable TLS.
7

Start a PlayFlow Server

  1. Go to the Servers tab in PlayFlow
  2. Click Create Server
  3. Select your uploaded build
  4. Choose your configuration
  5. Launch the server
8

Configure Your Client

  1. Click on your server instance’s Details
  2. Look for the TLS Connection information
  3. In Unity, configure your client:
In NetworkManager:
  • Set Network Address to the TLS hostname (e.g., connect.playflowcloud.com)
In SimpleWebTransport:
  • Set Client Port to the External Port from PlayFlow
  • Ensure Client Use Wss is checked ✓
  • Ensure Client Port Option is set to Use Custom Port
Important: For TLS/WSS connections, use the hostname (like connect.playflowcloud.com) not the IP address. PlayFlow provides this in the server details.
9

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, PlayFlow’s built-in hosting)
Popular WebGL hosting options include itch.io, GitHub Pages, and PlayFlow’s integrated WebGL deployment.

​
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 Use Wss” is enabled in SimpleWebTransport
  • Ensure “Client Port Option” is set to “Use Custom Port”
  • Verify client is using the TLS hostname (not IP address)
  • Confirm the correct external port is configured
If you have both KCP and SimpleWebTransport on your NetworkManager, make sure only SimpleWebTransport is active for WebGL builds. You can use platform-specific code to switch transports.
Don’t modify the SSL settings in SimpleWebTransport - PlayFlow handles all certificates automatically when TLS is enabled in the port configuration.
Remember that the server listens on the port you set in SimpleWebTransport (default 7778), but clients connect through PlayFlow’s external port. Always use the external port for client connections.

​
Resources

WebGL Deployments

Advanced WebGL deployment strategies

Mirror Standard

Standard Mirror setup for desktop/mobile

Lobby System

Add lobbies to your WebGL game
⌘I