GithubHelp home page GithubHelp logo

blazor.whereamirunning's Introduction

BLAZOR: Where Am I Running?

This is a simple service for identifying which mode Blazor is running in. Either Server or Wasm.

The sample project is built with .Net 8.0 RC1 for a Blazor Web App, however the UtilityService class in the Blazor.Utilitieslibrary is multi-targeting and supports versions .Net 6.0+. The UtilityService library can also be used for a Blazor Server App or Blazor WebAssembly App.

How to Use

To use, register the UtilityService class with the Dependency Injection system:

builder.Services.AddScoped<IUtilityService, UtilityService>();

Then inject into a page or component:

@inject IUtilityService UtilityService

Now we can query using 1 of 3 methods:

<div>Execution Mode? @(UtilityService.GetIsServerMode() ? "Server" : "Web Assembly (WASM)")</div>
<div>Server Mode? @(UtilityService.GetIsServerMode()</div>
<div>WebAssembly Mode? @(UtilityService.GetIsWasmMode()</div>
<div>Where am I running?? @(UtilityService.WhereAmIRunning()</div>

Below are sample screenshots of the UtilityService class in action:

Static Blazor Page

RenderModeAuto Page

According to ASP.NET Core Blazor render modes, RenderModeAuto is...

Interactive client rendering using Blazor Server initially and then WebAssembly on subsequent visits after the Blazor bundle is downloaded

Running on Server

counter_server_rendered_page.png

Above we can see the WebSocket connection _blazor?id-... to the server for the Interactivity. The UtilityService class shows the Blazor app running in Server mode.

Running on Client (Wasm)

counter_wasm_rendered_page.png

After we refresh the page, and all the WebAssembly files are cached on the client, we ca see the WebSocket connection _blazor?id-... is no longer open and now running in the client (Wasm). The UtilityService class shows the Blazor app running in Wasm mode.

NOTE: In the coming .Net 8.0 RC2, it was mentioned in a recent Microsoft ASP.NET Community Standup that the connection should automatically close and switch to Wasm without refreshing the page. How that will work and under what conditions is still to be documented. This project will be updated once .Net 8.0 RC 2 is released.

Support

If you find this library and sample project useful, then please consider buying me a coffee โ˜•.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.