What is PUSH Notifications and how it works

What is Server PUSH?

• Internet-based communication

• Initiated by a cental server (pusher)

– Contrasted with pull/get – initiated by a client

• Publish/Subscribe interaction model

– A client subscribes to channels provided by the server.

• Examples: instant messaging, notifications, SMTP, auctions, sport results…

• Can be emulated by the periodic polling.

Server PUSH Examples

• HTTP Server Push

– WebSocket (HTML 5 API)

• Pushlet

– server never closes the response – HTTP Streaming

– server sends periodically snippets of JS to a client

throught the live channel.

• Long polling

– When a real push is not feasible due to certain

security constraints.

SignalR

• It is a library for ASP.NET

– for adding real-time functionality to web apps

• Server side code pushes content to connected clients in real-time

• Free software

• Distributed under the Apache License

SignalR – protocols

• Relies on several transport protocols

• Auto selection of the best protocol between a client and server.

• Uses WebSocket

– Bidirectional client-server communication

• Gracefully falls back to other protocols if WebSocket is not available

– App code remains unchanged!

• API for Server-to-Client RPC

– Call a JS function browser from server-side .NET code!

– Connection management hooks.

SignalR Dev Tasks

• Adding the SignalR library to an MVC5 app

– Install-package Microsoft.AspNet.SignalR

• Creating hub and OWIN startup classes

– to push content to clients

• Using the SignalR jQuery library in a web page

– send messages and display updates from the hub

Install SignalR Library

• First create an MVC5 Web app in Visual Studio

Tools > Library Package Manager > Package Manager Console

• Type:

– install-package Microsoft.AspNet.SignalR

• In Solution Explorer,

expand the Scripts folder.

Note that script libraries for SignalR

have been added to the project.

Add a SignalR Hub Class

• (1) In Solution Explorer, right-click the project, select Add | New Folder, and add a new folder named Hubs.

• (2) Right-click the Hubs folder, click Add | New Item,

• (3) Select the Visual C# | Web | SignalR node in the Installed pane,

• (4) Select SignalR Hub Class (v2) from the center pane,

• (5) Create a new hub named ChatHub.cs.

• This class will be used as a SignalR server hub that

sends messages to all clients.

Add a SignalR Hub Class (cont.)

9 out of 22

Customize ChatHub Class

10 out of 22

Add/Change Startup.cs class

11 out of 22

Add a View

• Right-click the Views/Home folder, and

select Add… | View.

• In the Add View dialog, name the new view Chat.

View page (Chat.cshtml)

A simple chat form.

Referenced scripts

Declares proxy ref.

Defines a callback function

Starts connection with the hub

Invokes the hub’s server-side method

Run…

14 out of 22

SignalR Code Examination

• Two basic SignalR development tasks:

– creating a hub as the main coordination object on the server

– using the SignalR jQuery library to send and

receive messages

SignalR Hub Class (e.g. ChatHub)

• Derives from Microsoft.AspNet.SignalR.Hub

• Define your own public methods (e.g. Send)

• The methods are called from JQuery scripts in a web page

• Clients call ChatHub.Send to send a message

• The hub sends the message to all subscribed clients by calling Clients.All.addNewMessageToPage

ChatHub.Send

• Demonstrates several hub concepts:

– Declare public methods on a hub so that clients can call them

– Use Microsoft.AspNet.SignalR.Hub.Clients

property to access all clients connected to the hub

– Call a function (e.g. addNewMessageToPage)on the client to update clients

SignalR and JQuery

• Essential tasks on the view page:

– creating a reference to the auto-generated proxy for the hub,

– declaring a function that the server can call to

push content to clients, and

– starting a connection to send messages to the hub.

• In JavaScript the reference to the server class

and its members is in camel case

(ChatHub -> chatHub).

• Can be redefined by annotating the hub class

with [HubName(“ChatHub”)].

Create a callback function (script)

• The hub class on the server calls this function

to push content updates to each client.

The htmlEncode function shows a way to HTML encode

the message content before displaying it in the page, as

a way to prevent script injection.

Open a connection with the hub

• The code starts the connection and then passes it

ِِA function to handle the click event on the Send button in the Chat page.

• This approach ensures that the connection is

established before the event handler executes.

 

Reply