Online Multiplayer Word Game With Blazor and SignalR on .NetCore

We do not stop playing because we grow old. We grow old because we stop playing.
— Benjamin Franklin

Let’s Create Blazor Server App

dotnet new blazorserver -o blazorWords

Add .Net Core SignalR.Client

dotnet add package Microsoft.AspNetCore.SignalR.Client

Add MongoDB Driver

dotnet add package MongoDB.Driver

Hot Reload Settings For Blazor

<environment include="Development">
<script>
//For Hot Reload
//dotnet watch run debug
window.Blazor.defaultReconnectionHandler.onConnectionDown = function ()
{
setTimeout(function () {
location.reload();
}, 5000);
};
</script>
</environment>
dotnet watch run debug

Game Rules

Life is a game. Money is how we keep score.
— Ted Turner

.Net Core Blazor Applicaton BlazorWord (Client Side):

.
.
<li class="nav-item px-3">
<NavLink class="nav-link" href="wordgame">
<span class="oi oi-list-rich" aria-hidden="true"></span> WordGame
</NavLink>
</li>
</ul>
@page "/wordgame"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IDisposable
@inject IJSRuntime JSRuntime

Pages/Words.razor(2):

@if(!isFullRoom) {
<span style="display: flex; justify-content: flex-end">
<div><h3><b><font color="#46CB18">Total Win Match: @globalScore</font></b></h3></div>
</span>
}

You never win any games you don’t play.
— Mark Cuban

Pages/Words.razor(3):

Pages/Words.razor(4):

<div class="form-group">
@if(_otherUser!=null) {
<label><h2><b>Other User :</b> @_otherUser</h2></label> <br>
<label><h2><b>Other User's Money :</b> @_otherMoney ₺</h2> </label>
}
</div>

Pages/Words.razor(5)

This part is the code base of the Blazor (Server Side)

Pages/Words.razor(6):

hubConnection = new HubConnectionBuilder()            .WithUrl(NavigationManager.ToAbsoluteUri("/wordhub"))            .Build();

Pages/Words.razor(7)

Pages/Words.razor(8)

hubConnection.On<string, string, int>("ReceiveWord", (_wordText, _userName, _money) =>
{
if (userName != _userName)
{
_otherUser = _userName;
_otherMoney = _money;
}
else
{
money = _money;
isLogin = true;
}
word = _wordText;
StateHasChanged();
});

Pages/Words.razor(9)

hubConnection.On<string>("RefreshWord", async (_wordText) =>
{
for (int i = 0; i < word.Length; i++)
{
if (word[i] != ' ')
{
string imgId = "image-" + @i;
string lblId = "label-" + @i;
await JSRuntime.InvokeVoidAsync("applyStyleForElement",
new { id = imgId, attrib = "display", value = "inline" });
await JSRuntime.InvokeVoidAsync("applyStyleForElement",
new { id = lblId, attrib = "display", value = "none" },
new { id = lblId, attrib = "font-size", value = "65px" });
}
}
word = _wordText;answer = "";
StateHasChanged();
});

Pages/Words.razor(10)

Task Send() =>
hubConnection.SendAsync("LoginUser", userName, connectionID);

Pages/Words.razor(11)

public bool IsConnected =>hubConnection.State == HubConnectionState.Connected;

Pages/Words.razor(12)

bool IsRenderUI = false;
protected override void OnAfterRender(bool firstRender)
{
IsRenderUI = true;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await JSRuntime.InvokeVoidAsync("FocusScript.setFocus", ReferenceToLoginControl);
}

_Host.cshtml(JavaScript):

WordHub.cs SignalR Hub Class WordHub

static ConcurrentDictionary<string, string> clientList = new ConcurrentDictionary<string, string>();
private IWordService _service;
static List<Words> words;
public WordHub(IWordService service)
{
_service = service;
}

WordHub.cs/OnConnectedAsync:

WordHub.cs/SendUserInformation:

WordHub.cs/Refresh:

WordHub.cs/AddList:

WordHub.cs/OpenClient:

WordHub.cs/sendAnswer:

WordHub.cs/OnDisconnectedAsync:

Models/Words:

Data/WordService:

Conclusion:

THE END & GOOD BYE

I have been coding since 1993. I am computer and civil engineer. Microsoft MVP. Senior Software Architect. Ride motorcycle. Gamer. Have two daughters.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store