SimpleWebChat/SimpleWebChat.BlazorWasm/App.razor

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

    private string message;
    private string messageClass => string.IsNullOrWhiteSpace(message) ? "border-warning border-4 form-control" : "form-control";

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

<h2>Simple Web Chat</h2>

@if (connState == 0)
{
    <div class="input-group mb-3">
        <InputText class="@nickNameClass" placeholder="Nick name" type="search" onsearch="@Connect" @oninput="NickNameChanged" ValueExpression="()=>nickName"></InputText>
        <button @onclick="@Connect" class="btn btn-outline-secondary" type="button">Connect</button>
    </div>
}
else if (connState == 1)
{
    <span>Conecting...</span>
}
else if (connState == 2)
{
    <div class="input-group mb-3">
        <InputText class="@messageClass" placeholder="Message to send" type="search" onsearch="@Send" @oninput="MessageChanged" Value="@message" ValueExpression="()=>message"></InputText>
        <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>
}

@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();
    }
}