Shulou(Shulou.com)06/03 Report--

This article is about how to use SignaiR and Push.js to push messages in asp.net. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

one。 Use background

1. What is SignalR?

ASP.NET SignalR is a library for ASP.NET developers that simplifies the process for developers to add real-time Web functionality to their applications. Real-time Web functionality refers to the ability for server code to push content to a connected client as soon as it becomes available, rather than having the server wait for the client to request new data.

What is 2.Push.js? [browser support for H5Notifications is required]

Notifications translates to be a notice. So what the Push.js notification looks like, see the following figure: most of them appear in the lower right corner of the screen.

Permission is required:

3. Most of the time, we can only use polling to update the data display and push messages. So I think of a solution that can synchronously update the client when the server data is updated.

two。 Start deploying a SignalR project [using mvc]

1. Create a new mvc project

.

two。 Import package [Vs2015]

Tools-> NuGet package Manager-> package Management console-> Install-Package Microsoft.AspNet.SignalR- > wait for successful installation

3. Create a new hub class

Project-> right-click-> add-> New item-> SignalR- > SignalR permanent Link Class-> Save-> [take MyConnection1 as an example] MyConnection1

Public class MyConnection1: PersistentConnection {/ send message / protected override Task OnConnected (IRequest request, string connectionId) {Debug.WriteLine (connectionId); return Connection.Send (connectionId, "Welcome!") / / single push column} / accept client messages / protected override Task OnReceived (IRequest request, string connectionId, string data) {Debug.WriteLine (data); return Connection.Broadcast (data) / / broadcast} / dropped / protected override Task OnDisconnected (IRequest request, string connectionId, bool stopCalled) {Debug.WriteLine ("dropped"); return base.OnDisconnected (request, connectionId, stopCalled) } / reconnect / protected override Task OnReconnected (IRequest request, string connectionId) {Debug.WriteLine ("reconnect"); return base.OnReconnected (request, connectionId);}}

4. Create a new Owin Startup class [SignalR follows the Owin standard, and Startup is the startup of the component. By default, there will be a Startup class, which can be modified]

We append the following code to Configuration

Public void Configuration (IAppBuilder app) {app.MapSignalR ("/ myconnection");}

Explanation: MyConnection1 is triggered when accessing myconnection

5. Add clients [H6]

@ {ViewBag.Title = "Home Page"; Layout = null;} var conn = $.connection ("/ myconnection"); conn.start () .done (function (data) {console.log ("connected server, current GUID is" + data.id "); conn.send (" To Admin "); / / send to server}) / / accept the push conn.received from the server (function (data) {console.log ("Server return message:" + data);})

6. Start the project and open the browser console, and you will find that you have completed the first step as shown in the following figure.

7. Next, we need to prepare push.js.

Download address github.com/Nickersoft/push.js

8. Quote js

9. Create a new js push demo

Function push (data, url, img) {var imgurl = img! = ""? Img: ".. / Images/icon.png"; Push.create ("New Notification", {body: data, icon: imgurl, requireInteraction: true, onClick: function () {window.focus (); this.close (); _ window.location.href = url;}});}

Interpretation: data: for message content

Url: a link to click on the notification

Img: the address of the picture displayed for the notification

RequireInteraction: when set to true, the notification will not be closed unless the user manually closes or clicks the notification. If you need to set the vanishing time, please replace this property with timeout: 5000 unit milliseconds

For other events, please read: www.npmjs.com/package/push.js

10. Combine the two

/ / Real-time push var conn = $.connection ("/ myconnection"); conn.start () .done (function (data) {console.log ("connected server, current GUID is" + data.id);}); / / accept the push conn.received of the server (function (msg) {console.log ("Server return message:" + msg)) If (msg! = ") {push (msg," # ",")}})

11. The effect is as follows:

twelve。 Realize the active push of the server. Now we will only introduce the broadcast. The principle of single push is the same.

It is divided into two modes: broadcast mode and single push mode.

Broadcast:

Var context = GlobalHost.ConnectionManager.GetConnectionContext (); / / get your current Connection connection context.Connection.Broadcast ("I am a new push message!") ; / / broadcast push

Single push:

Var context = GlobalHost.ConnectionManager.GetConnectionContext (); / / get your current Connection connection context.Connection.Send (connectionId, "Welcome!"); / / single referee list

ConnectionId: the GUID assigned by the server to each client

13. The effect is as follows:

In this way, when our server handles a task, we can call the broadcast to actively push to the client to update the data and push the message.

Thank you for reading! This is the end of the article on "how to use SignaiR and Push.js to complete message push in asp.net". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.