This guide walks you through setting up EzyFox Server WebGL client in Unity

Install Web Build Support

In order to build our game into WebGL, the Web Build Support is required to be installed via Unity Hub.

Open Unity Hub → Installs → Select your Unity version → Add Modules → WebGL Build Support

Create a new Unity project or open an existing one

Clone the EzyFox Client SDK

In your project directory:

cd Assets
mkdir Extensions
cd Extensions
git clone https://github.com/youngmonkeys/ezyfox-server-csharp-client.git
cd ezyfox-server-csharp-client
git checkout unity-client

Create and set up EntryScene

EntryScene is blank scene where we preload some of our assets/resources before actually openning any other scene.

Create a new scene named EntryScene
Save it in Assets/Scenes/
Create an empty GameObject: LoggerInitialiser
Attach a new MonoBehaviour script LoggerInitialiser.cs to it and add the following logic into its Start method:

EzyLoggerFactory.setLoggerLevel(EzyLoggerLevel.DEBUG);
EzyWSClient.setJsDebug(true);
EzyLoggerFactory.setLoggerSupply(type => new EzyUnityLogger(type));

Create LoginScene & Socket Manager

- Create a new scene LoginScene

Save it in Assets/Scenes/
Create SocketEventLoopManager.cs:

using com.tvd12.ezyfoxserver.client.unity;

public class SocketEventLoopManager : EzyAbstractEventProcessor
{
    protected override string GetZoneName()
    {
        return "ezysmashers";
    }
}

- Create an empty GameObject and attach this script.

Create Default Socket Controller

- Create DefaultController.cs inside Assets/Scripts/controllers/

using com.tvd12.ezyfoxserver.client.binding;
using com.tvd12.ezyfoxserver.client.unity;

public class DefaultController : EzyAbstractController
{
    protected override EzySocketConfig GetSocketConfig()
    {
        return EzySocketConfig.GetBuilder()
            .ZoneName("game")
            .AppName("ezysmashers")
            .WebSocketUrl("ws://127.0.0.1:2208/ws")
            .TcpUrl("127.0.0.1:3005")
            .UdpPort(2611)
            .UdpUsage(true)
            .EnableSSL(false)
            .Build();
    }

    protected override EzyBinding CreateBinding()
    {
        return EzyBinding.builder()
            .addReflectionMapConverter<JoinedLobbyResponse>()
            // Add other converters here
            .build();
    }
}

Create Login Controller

Create LoginSocketController.cs inside Assets/Scripts/controllers/:

using System;
using System.Collections.Generic;
using com.tvd12.ezyfoxserver.client.request;
using com.tvd12.ezyfoxserver.client.support;
using UnityEngine.SceneManagement;

public class LoginSocketController : DefaultController
{
    public void AddJoinLobbyHandler(Action<JoinedLobbyModel> handler)
    {
        AddHandler<JoinedLobbyResponse>(
            Commands.JOIN_LOBBY,
            (proxy, response) => {
                string myPlayerName = socketProxy.getClient().getMe().getName();  
                handler.Invoke(SocketResponseToModelConverter.ToModel(response, myPlayerName));
            });
    }

    public void SendSocketLoginRequest(string accessToken)
    {
        var socketConfig = GetSocketConfig();
        OnLoginSuccess<object>(OnLoginSuccessResponse);
        OnAppAccessed<object>(OnAppAccessedResponse);

        socketProxy.setLoginData(new Dictionary<string, object> {
            { "accessToken", accessToken }
        });

#if UNITY_WEBGL && !UNITY_EDITOR
        socketProxy.setUrl(socketConfig.WebSocketUrl);
#else
        socketProxy.setUrl(socketConfig.TcpUrl);
        socketProxy.setUdpPort(socketConfig.UdpPort);
        socketProxy.setDefaultAppName(socketConfig.AppName);
        OnUdpHandshake<object>(OnUdpHandshakeResponse);
#endif

        socketProxy.connect();
    }

    private void OnLoginSuccessResponse(EzySocketProxy proxy, object data)
    {
        LOGGER.debug("Log in successfully");

#if UNITY_WEBGL && !UNITY_EDITOR
        socketProxy.send(new EzyAppAccessRequest(GetSocketConfig().AppName));
#endif
    }

    private void OnUdpHandshakeResponse(EzySocketProxy proxy, object data)
    {
        LOGGER.debug("Udp handshake successfully");
        socketProxy.send(new EzyAppAccessRequest(GetSocketConfig().AppName));
    }

    private void OnAppAccessedResponse(EzyAppProxy proxy, object data)
    {
        LOGGER.debug("App access successfully");

        if (SceneManager.GetActiveScene().name == "LoginScene")
        {
            appProxy.send(Commands.JOIN_LOBBY);
        }
    }
}

Create an empty GameObject (e.g. LoginSocketManager) and attach this component.

Next step is to design a UI to trigger SendSocketLoginRequest().

How to integrate EzyFox Server WebGL client into unity project