Multiplayer Servers for WebGL client

Question

question

Rohan Mayya asked Jan 25, '22

Multiplayer Servers for WebGL client

I'm trying to get my WebGL client written in Unity to connect to my PlayFab multiplayer server.

However, it's not as straightforward as the other clients connecting (We already have our game in production where other devices connect using IP + port).

The problem is that a WebGL client requires me to connect to a domain and not directly to an IP.

This is a problem because PlayFab keeps giving me servers with different IPs (a problem only in this case), so I can't map an IP to a domain of my choice.

Any suggestions on how I can solve this will be more than welcome. I've gone through a handful of solutions I don't mind discussing and plan on exhausting the topic because we really need this in production soon, and also a lot of people I know want PlayFab Multiplayer to work with WebGL clients!

multiplayer

1

10 |1200

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Rohan Mayya commented · Jan 26, 2022 at 05:56 AM

Come on folks, only question that hasn't been answered so far.

I know it's tricky, but we only need to figure this out once.

0 ·

Answer 1 · 2022-01-28T04:23:16Z

Austin Brunkhorst answered Jan 28, '22

Thank you for taking the time to raise these questions, I understand your frustration around integrating a WebGL game.

We recently published a repository that contains a sample reverse proxy. This addresses the issue where your WebGL client can't connect to the server's FQDN over a https domain. The flow you described on @Made Wang's reply is accurate, and similar to the flow of the project in the repository.

Consider this flow for an Azure Function

The function retrieves the build ID, session ID, and region for an active server. This is typically taken from the result of a call to Request Multiplayer Server.
Your game's browser client initiates a web socket connection with the server details
- If you owned the domain my-reverse-proxy.com the FQDN might look something like wss://my-reverse-proxy.com/{buildId}/{sessionId}/{region}
The reverse proxy looks up the server details and forwards the request to the server's fully qualified domain name - a subdomain of azure.com.

Also, how will a proxy work if the *.azure.com endpoint is not SSL certified? If any part of the chain has an insecure URL, then it's considered "mixed" by all browsers and throws a warning to the client, leading to a timeout.

As far as the browser is concerned, wss://my-reverse-proxy.com is a secure connection - it doesn't know about the non https requests sent from your reverse proxy server.

Servers allocated by Matchmaking

The previous flow could be modified to use the Matchmaking API. Build ID, session ID, and region would be replaced with the the match ID and queue name returned from Create Matchmaking Ticket.

7

10 |1200

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Rohan Mayya commented · Jan 31, 2022 at 01:56 PM

Thanks for the response @Austin Brunkhorst
With regard to this url:

wss://my-reverse-proxy.com/{buildId}/{sessionId}/{region}

My url looks more like this:

wss://my-reverse-proxy.com:PORT

(This is the connection string that Mirror, my networking library, expects).

Does anything change, bearing this in mind?

If I hit:

wss://my-reverse-proxy.com/{buildId}/{sessionId}/{region

Then I guess you are expecting me to internally hit:
`ws://IP:PORT`` after fetching IP+Port from Playfab's API.

0 ·

Austin Brunkhorst Rohan Mayya commented · Jan 31, 2022 at 06:42 PM

Nothing should change, the connection string will accept any Uri with wss:// scheme. To give a more concrete example, you can deploy the sample repository to an Azure App Service and your connection string would look more like

wss://{appServiceId}.azurewebsites.net/{buildId}/{sessionId}/{region}

The repo has a ServerEndpointFactory that handles building the Uri from PlayFab's API to your game server. Let me know if this clarifies your question.

1 ·

Rohan Mayya Austin Brunkhorst commented · Feb 01, 2022 at 11:13 AM

Yeah makes sense. I just have to connect to port 443 on my Unity client (it isn't shown in your url because that's the default and you don't have to specify it, but Mirror explcitly requires a port).

This is all fine and I got it to work, but I am concerned about 1 more thing: scaling.

Every client hitting this reverse proxy and then talking to your servers is bound to give me performance issues reverse proxy.
I'm using Nginx right now, but I'm sure the Azure App service or whatever service I use will end up being a bottleneck, right?

2 ·

Show more comments

Answer 2 · 2022-01-26T06:18:24Z

Made Wang answered Jan 26, '22

You can try setting up a reverse proxy that forwards connections to the corresponding server and port via the url.

Referring to Unity - Manual: WebGL Networking (unity3d.com), Unity provides some solutions for cross-domain connection and connection IP for WebGL.

Also to clarify, the PlayFab multiplayer server can support web services, but the model will be different, refer to Hosting WebSocket game server - Playfab Community, there is currently no out-of-the-box solution. You can try using Azure App Service to run your web services directly.

2

10 |1200

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Rohan Mayya commented · Jan 26, 2022 at 10:24 AM

The WebGL Networking link is irrelevant I think, because UNet is deprecated.

I am using Mirror for my networking needs. A relevant link is here:
https://mirror-networking.gitbook.io/docs/transports/websockets-transport

I'm going to paste a flow here, let me know if this makes sense:

1) Client calls Azure Function to fetch a multiplayer server

2) Azure function talks to PlayFab's API to either create or get multiplayer server

4) At this point on my Azure Function, I have IP, port and FQDN. I'm assuming here is where I hit my proxy.

6) Now what? How do I map my server.xyz domain to the IP I want? Do I have to consider creating a subdomain? (Since subdomains can have different IPs.) How do I setup the proxy to get the client to connect to an IP and port? According to Mirror's docs above, I need to connect to a domain.

I would really like it if we can trace out an explicit flow here, if a reverse proxy is being used.

To clarify, I don't intend to run PlayFab multiplayer server as a web service. I just need it on when players are in, and off when the game ends (i.e the win condition is hit). Also, my networking library already handles making my game server a websocket server.

0 ·

Rohan Mayya commented · Jan 26, 2022 at 10:40 AM

Also, how will a proxy work if the *.azure.com endpoint is not SSL certified? If any part of the chain has an insecure URL, then it's considered "mixed" by all browsers and throws a warning to the client, leading to a timeout, right?

0 ·

question