Managing State (Part 4)

By Ashwin Venugopal -

 





Using An In-Memory State Container Service

In the context of in-memory state containers, we utilize dependency injection to maintain the service instance in memory for a specified duration (scoped, singleton, transient). To show how in-memory state works, we will have to implement it a bit differently depending on hosting.

Implementing Real-Time Updates On Blazor Server

  • In the MyBlog.Shared project, select the Interfaces folder and press Shift + F2. Name the file IBlogNotificationService.cs.

  • In the MyBlogServerSide project, select the Services folder and press Shift+ F2. Name the file BlazorServerBlogNotificationService.cs. It might seem unnecessary to give the class a name that includes BlazorServer, but it makes sure we can easily tell the classes apart.

  • In Startup.cs at the end of ConfigureServices, add the dependency injection-

Services.AddSingleton<IBlogNotificationService, BlazorServerBlogNottificationService> ();

  • We add this dependency injection as a Singleton. When using Blazor Server, this will be the same instance for ALL users, so we must be careful when we use Singleton. In this case, we want the service to notify all the visitors of our blog that the blog post has changed.

  • In the MyBlog.Shared project, open Post.razor.

  • Add the following code at the top (or close to the top) of the page-

@using MyBlog.Shared.Interfaces

@inject IBlogNotificationService notificationService

@implements IDisposable

  • Open the Pages/Admin/BlogPostEdit.Razor file.

  • When we make changes to our blog post, we need to send a notification as well. At the top of the file, add the following-

@using MyBlog.Shared.Interfaces

@inject IBlogNotificationService notificationService

  • In the UpdateHTMLAsync method, add the following just under the Post. Text!=null if statement-

await notificationService.SendNotification(Post);

  • Right-click on MyBlogServerSide, select Set as Startup Project, and run the project by pressing Ctrl+ F5.

  • Copy the URL and open another web browser. We should now have two web browser windows open showing us the blog. In the first window, open a blog post (doesn't matter which one), and in the second window, log in and edit the same blog post.

  • When we change the text of the blog post in the second window, the change should be reflected in real time in the first window.

Implementing Real-Time Updates On Blazor WebAssembly

  • Right-click on the MyBlogWebAssembly.Server project, select Add new folder, and name the folder Hubs.

  • Select the Hubs folder and press Shift+ F2. Name the file BlogNotificationHub.cs.

  • Replace the code.

  • In the Startup.cs file at the top of the ConfigureService method, add SignalR and configure the JSON serialization to handle the entity framework.

  • Add the following namespace:

using MyBlogWebAssembly.Server.Hubs;

  • In app.UseEndpoints, just above endpoints. MapFallbackToFile("index.html");, add the following-

endpoints.MapHub<BlogNotificationHub>("/ BlogNotificationHub");

Here we configure what URL BlogNotificationHub should use. In this case, we are using the same URL as the name of the hub.

  • In the MyBlogWebAssembly.Client project, right-click on the Dependencies node and select Manage NuGet Packages.

  • Search for Microsoft.AspNetCore.SignalR.Client and click Install. Select the Services folder and press Shift+ F2. Name the file BlazorWebAssemblyBlogNotificationService.cs. In this file, we will implement the SignalR communication.

  • Add the following namespaces-

using Microsoft.AspNetCore.Components;

using Microsoft.AspNetCore.SignalR.Client;

using Microsoft.Extensions.DependencyInjection;

using MyBlog.Data.Models;

using MyBlog.Shared.Interfaces;

using System;

using System.Threading.Tasks;

  • In the Program.cs file, we need to configure dependency injection. Just above awaitbuilder.Build().RunAsync();, add the following-

builder.Services.AddSingleton();

  • Add the following namespace-

MyBlogWebAssembly.Client.Services;

  • Now it's time to carry out testing. Right-click on MyBlogWebAssembly.Server, select Set as Startup Project, and run the project by pressing Ctrl+F5.

  • Copy the URL and open another web browser. We should now have two web browser windows open showing us the blog. In the first window, open a blog post (it doesn't matter which one), and in the second window, log in and edit the same blog post.

  • When we change the text of the blog post in the second window, the change should be reflected in real time in the first window.

Conclusion

We effectively discovered methods for managing state within our application and utilizing local storage for data storage, whether encrypted or not. We explored various approaches to accomplish this and also ensured the integration of SignalR for enabling real-time communication with the server.








































Comments

Post a Comment

Popular posts from this blog

Information Protection Scanner: Resolve Issues with Information Protection Scanner Deployment

By Ashwin Venugopal -
Image
  About If you are experiencing problems with the Microsoft Purview Information Protection scanner, check the health of your deployment by utilizing the Start-ScannerDiagnosticsPowerShell cmdlet to start the scanner diagnostic tool. The diagnostics tool checks the following details and then creates a log files with the results: Whether the database is up to date. Whether network URLs are accessible. Whether there's a valid authentication token and policy can be acquired. Whether the profile is defined in the Azure portal. Whether offline/online configuration exists and can be acquired. Whether the rules configured are valid.  The Start-ScannerDiagnostics command does not perform a comprehensive check of prerequisites. If you encounter problems with the scanner, you need to verify that your system meets the scanner's requirements, and that your scanner's configuration and installation are finished.  Verify Scanning Details Per Scanner Node and Repository Run the Get-ScanSt...
Read more

How AMI Store & Restore Works?

By Ashwin Venugopal -
Image
  CreateStoreImageTask The CreateStoreImageTask API stores an AMI as a single object in an S3 bucket. The API initiates a task that collects all the data from the AMI and its associated snapshots, subsequently using an S3 multipart upload to store this data in an S3 object. It gathers all elements of the AMI, including most of the non-Region-specific metadata and all EBS snapshots included in the AMI, and consolidates them into a single object in S3. During the upload process, the data is compressed to minimize the space utilized in S3, which means that the S3 object could be smaller than the total sizes of the snapshots in the AMI. If the account making this API call has access to AMI and snapshot tags, they will be retained. The S3 object shares the same ID as the AMI, except it has a .bin extension. Additionally, the S3 metadata tags for the object include the AMI name, AMI description, AMI registration date, AMI owner account, and a timestamp indicating when the store operation...
Read more

Create A Store Image Task

By Ashwin Venugopal -
Image
  Introduction When you save an AMI in an S3 bucket, a task for storing the image is initiated. This store image task allows you to track the progress and result of the procedure. Securing your AMIs It is crucial to verify that the S3 bucket is set up with adequate security to protect the content of the AMI and that this security is upheld for the entire duration that the AMI objects are stored in the bucket. If this cannot be achieved, it is advisable to refrain from using these APIs. Make sure that public access to the S3 bucket is prohibited. It is suggested to activate Server-side encryption for the S3 buckets where you keep the AMIs, even though it’s not mandatory. When AMI snapshots are transferred to the S3 object, they are sent over TLS connections. It is possible to save AMIs that contain encrypted snapshots; however, the snapshots will be decrypted during the storing process. Identify the source AMI used to create a new Amazon EC2 AMI You can determine the AMI that was us...
Read more