SimpleWebChat/SimpleWebChat.BlazorWasm/App.razor

@inject HttpClient http
@code {
    private string nickName;
    private string nickNameClass => string.IsNullOrWhiteSpace(nickName) ? "is-invalid form-control" : "form-control";

    private string message;
    private string messageClass => string.IsNullOrWhiteSpace(message) ? "is-invalid form-control" : "form-control";

    private int connState = 0;
    private const int maxDisplayMessage = 1000;
    private List<string> displayingMessages = new List<string>(maxDisplayMessage);
}

<div class="container">
    <h2>Simple Web Chat</h2>

    @if (connState == 0)
    {
        <div class="input-group mb-3">
            <div class="form-floating">
                <InputText class="@nickNameClass" placeholder="Nick name" type="search" onsearch="@Connect" @oninput="NickNameChanged" ValueExpression="()=>nickName"></InputText>
                @if (string.IsNullOrEmpty(nickName))
                {
                    <label>Please enter nick name</label>
                }
                else
                {
                    <label>Nick name</label>
                }
            </div>
            <button @onclick="@Connect" class="btn btn-outline-primary" type="button">Connect</button>
        </div>
    }
    else if (connState == 1)
    {
        <span>Conecting...</span>
    }
    else if (connState == 2)
    {
        <div class="input-group mb-3">
            <div class="form-floating">
                <InputText class="@messageClass" placeholder="Message to send" type="search" onsearch="@Send" @oninput="MessageChanged" Value="@message" ValueExpression="()=>message"></InputText>
                @if (string.IsNullOrEmpty(message))
                {
                    <label>Please enter message</label>
                }
                else
                {
                    <label>Message to send</label>
                }
            </div>
            <button @onclick="@Send" class="btn btn-outline-secondary" type="button">Send</button>
        </div>

        @foreach (var item in displayingMessages)
        {
            <pre class="font-monospace" style="white-space:pre-wrap">@item</pre>
        }
    }
    else
    {
        <span>Error</span>
    }
</div>

@code {
    private System.Net.WebSockets.ClientWebSocket sck;

    private void NickNameChanged(ChangeEventArgs e)
    {
        nickName = e.Value.ToString().Trim();
        StateHasChanged();
    }

    private void MessageChanged(ChangeEventArgs e)
    {
        message = e.Value.ToString().Trim();
        StateHasChanged();
    }


    private async Task Connect()
    {
        if (string.IsNullOrEmpty(nickName)) return;

        connState = 1;
        StateHasChanged();

        try
        {
            sck = new System.Net.WebSockets.ClientWebSocket();
            sck.Options.AddSubProtocol("swcp");

            var b = http.BaseAddress;

            await sck.ConnectAsync(new Uri($"{(b.Scheme == "https" ? "wss" : "ws")}://{b.Host}:{b.Port}/connect"), default);

            connState = 2;
            StateHasChanged();

            var buf = System.Text.Encoding.UTF8.GetBytes(nickName);
            await sck.SendAsync(buf, System.Net.WebSockets.WebSocketMessageType.Text, true, default);
            while (true)
            {
                buf = new Byte[1024];
                var r = await sck.ReceiveAsync(buf, default);
                displayingMessages.Insert(0, System.Text.Encoding.UTF8.GetString(buf, 0, r.Count));
                while (displayingMessages.Count >= maxDisplayMessage) displayingMessages.RemoveAt(maxDisplayMessage - 1);
                StateHasChanged();
            }
        }
        catch (Exception)
        {
            connState = -1;
        }
    }

    private async Task Send()
    {
        if (string.IsNullOrEmpty(message)) return;
        var msg = $"{nickName}: {message}";
        await sck.SendAsync(System.Text.Encoding.UTF8.GetBytes(msg), System.Net.WebSockets.WebSocketMessageType.Text, true, default);
        message = "";
        StateHasChanged();
    }
}