Add the magic of realtime to

 

 

Applications

Add the magic of realtime to

 

 

Applications

In a nutshell

Communities

Social Developer

Recognitions

Cloud Solution Architect @Microsoft

GDE,MCT and former MVP from SL

Top stackoverflow contributor

 

I'm Sajeetharan Sinnathurai

@sajeetharan
@kokkisajee
@sajeetharan
@sajeetharan

About this Session

👍Not a core concept of “Angular" but to quickly spin up real time apps 

 

👍It won’t teach you everything,  But it will help you learn what you need to know to get started

 

👍Be prepared to  ask questions

THE CHALLENGE

"Build a RealTime Voting App"

Let me tell you a F5 story

Real Time Apps

Applications Should Must be

Responsive

Customer Focused

User Experience / RealTime

What is SignalR ?

  • Introduced in ASP Net 4.5 in 2012 with an intent to add "real-time" web functionality to your ASP.NET application.
  • Persistent Connections and Hubs.
  • Web Sockets
  • Long Polling

Traditional App

RealTime app with SignalR

Core Concepts

Transports

Hubs

Azure SignalR Service

  • Fully managed service—without worrying about capacity provisioning, scaling or managing connections
  • Native ASP.NET Core SignalR development support
  • New possibilities when integrating with other Azure services
  • Available in growing global regions

Serverless

Full Abstraction of servers

Instant, event driven scalability

Pay-per use

Focus

Efficiency

Flexibility

FaaS - center of serverless

Single Responsibility

Short lived

Single Responsibility

Stateless

Event Driven

& Scalable

Azure Functions

An event-based, serverless compute experience that accelerates app development

Events 

Code

Outputs

Architecture for REST API with Azure SignalR

Http Request

Azure Functions/WebApp

SignalR

Service

Rest API

Negotiate

WS connection

Create Polling App App

sajeetharan/ngHivePollApp (github.com)

Access code from:

"Give your apps a realtime effect"

  1. Angular
  2. Azure SignalR
  3. Azure Functions
  4. Cosmosdb

 

Create

API

With AzFn

Triggers

Create the

Client App

Initiate

the

connection

Notify

Action

Create

SignalR

Service

Demo Time

PreRequisites

  • A valid Microsoft Azure Subscription (https://azure.microsoft.com/free/)
  • An Azure SignalR resource
  • Nodejs
  • Angular CLI latest
  • Functions Core Tools

Let's fight together

Hope things go smoothly..

Steps to Create the App

Step 1: Create an Azure SignalR service

          

 

 

Step 2: Create Azure Function REST API (Serverless)

az signalr create \
  --name ngHive \
  --resource-group $myResourceGroupName \
  --sku Standard_S1 \
  --unit-count 1 \
  --service-mode Serverless
func new --name ngHivePollingApp --template 
"HTTP trigger" --authlevel "anonymous"

Steps to Create the App

Step 3: Create a cosmosdb instance to save votes

          

 

 

Step 4: Create an Angular 11 App

An Azure CosmosDB resource with a 
Database "Votes" and a container 
"Votes" with the partition key "/eventName"
ng new ngHive

Step 5: Create the Azure Function Triggers / endPoints

CreateVote
GetVotes
AddVote

Steps to Create the App

Step 6:  Create the Hub Connection

          

 

 

Step 7: Setup Action when created or updated

const hubConnection = new signalR.HubConnectionBuilder()
.withUrl(`${this.appSettings.apiUrl}`)
.configureLogging(signalR.LogLevel.Information).build();
  
  
 hubConnection.on('votesUpdated', (votes: Vote[]) => {

Q&A

I'm not google!

Please don't ask any!

Where to go from here?

Thank you!

 

Add the magic of realtime angular

By Sajeetharan Sinnathurai

Made with Slides.com

Add the magic of realtime angular

ngHive Talk

  • 1,033

More from Sajeetharan Sinnathurai