Complete the message push code in Signair and Push.js

The ASP. NET SignalR is a library for ASP. NET developers that simplifies the process of adding real-time WEB functionality to applications by developers. Interested to know.

I. Use of the background

1. What is SIGNALR?

The ASP. NET SignalR is a library for ASP. NET developers that simplifies the process of adding real-time WEB functionality to applications by developers. Real-time WEB functionality refers to the ability for server code to push content immediately when a connected client becomes available, rather than having the server wait for the client to request new data.

What is 2.push.js? "Requires browser support H5notifications"

Notifications translation comes in the notice. So what is the notice of Push.js, see: Most appear in the lower right corner of the screen.

Need permission OH:

3. There are many times when we can only use polling for updates and message pushes for data presentation. So I thought there was a way to complete a solution that updates the client synchronously when the server-side data is updated.

Two. Start deploying a SIGNALR project "using MVC"

1. Create a new MVC project

.....................

2. Import Package "Vs2015"

Tool->nuget Package Manager, package management Console->install-package microsoft.aspnet.signalr-> wait for installation to succeed

3. New Hub Class

New Item->SIGNALR->SIGNALR, add-on, item-right---"take MyConnection1 as an example" MyConnection1

 public class Myconnection1:persistentconnection {//<summary>////</summary>//&L T;param name= "Request" ></param>//<param name= "ConnectionID" ></param>//<returns>< /returns> protected override Task onconnected (irequest request, String ConnectionID) {Debug.WriteLine (Conne      Ctionid); Return Connection.send (ConnectionID, "welcome!");     /single Tweet}///<summary>//////////<param name= "Request" ></param> <param name= "ConnectionID" ></param>//<param name= "Data" ></param>//<returns& gt;</returns> protected override Task onreceived (irequest request, String ConnectionID, String data) {De Bug.      WriteLine (data); return Connection.broadcast (data);//broadcast}///<summary>/////</summary>//<param name = "Request" ></param>///<param name= "conNectionid "></param>//<param name=" stopcalled "></param>//<returns></returns> protected override Task ondisconnected (irequest request, String ConnectionID, bool stopcalled) {Debug.WriteLine      ("Drop Line"); Return base.    ondisconnected (Request, ConnectionID, stopcalled); }///<summary>//<param name= "Request" ></param>///&LT;PA Ram Name= "ConnectionID" ></param>///<returns></returns> protected override Task onreconnected (      Irequest request, String ConnectionID) {Debug.WriteLine ("re-connected"); Return base.    onreconnected (Request, ConnectionID); }  }

4. New Owin Startup class "SIGNALR follow the Owin standard, startup is the start of the component, the default is the startup class, just modify it"

We add the following code to the configuration

public void Configuration (Iappbuilder app)    {      app. Mapsignalr<myconnection1> ("/myconnection");    }

Explanation: When accessing myconnection, trigger MyConnection1

5. Add Client "h5"

@{  viewbag.title = "Home page";  Layout = null;} <! DOCTYPE html>
6. Start the project open the browser console and you will see that this means that you have completed the first step.


7. Below we need to prepare push.js

Download Address Github.com/nickersoft/push.js

8. Quoting JS

<script src= ". /js/push.js "></script>
9. New JS Push Demo

  function push (data, URL, img) {    var Imgurl = img! = ""? IMG: ". /images/icon.png ";    Push.create ("new notice", {      body:data,      icon:imgurl,      requireinteraction:true,      onclick:function () {        Window.focus ();        This.close ();        Window.location.href =url;}}    );  }
Explanation: Data: For message content

URL: A link to enter for a click notification

IMG: The image address for the notification display

Requireinteraction: When set to true, the notification is not closed unless the user manually closes or clicks the notification. You need to set the vanishing time to replace this property for timeout:5000 unit milliseconds

Other events please read: Www.npmjs.com/package/push.js

10. Combine both

  Real-time push  var conn = $.connection ("/myconnection");  Conn.start (). Done (function (data) {    Console.log ("Connected server, current GUID is" + data.id);  });  Accept the server's push  conn.received (function (msg) {    console.log ("Server return message:" + msg);    if (msg! = "") {      push (msg, "#", "")    }  });
11. The effect is as follows:


12. Implement proactive server push. Only the broadcast is now introduced. The single-push principle is consistent.

It is divided into two modes: Broadcast and single push.

Broadcasting:

var context = globalhost.connectionmanager.getconnectioncontext<myconnection1> ();//Get your current connection connection  Context. Connection.broadcast ("I am a new push message! ");//Broadcast push
Single push:

var context = globalhost.connectionmanager.getconnectioncontext<myconnection1> ();//Get your current connection connection Context. Connection.send (ConnectionID, "welcome!"); /Single Push Event column
ConnectionID: Is the GUID assigned to each client by the server side


13. The effect is as follows:


In this way, when a task is processed by our server, we can call the broadcast to realize the active push to the client, make the real-time update of the data and push the message.

"Recommended"

1. asp free Video Tutorial

2. asp Tutorials

3. Eon the ASP Basic video tutorial