服务器推送消息到客户端 SignalR 弹出消息

1.先来看一下成果：

打开多个客户端，输入不同的用户名：

用xuanwuziyou用户给pet用户发送消息，点击发送之后，pet用户即收到新消息弹出提示：

2.技术：Asp.NET的SignalR,详情见官网  http://www.asp.Net/signalr
http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20
使用环境：VS2013 WebForm项目。
3.新建一个WebApplication的空项目，项目结构：

4.步骤1：添加ChatHub.cs类，如下：

ChatHub.cs代码：

 

[csharp] view plain copy
 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using Microsoft.AspNet.SignalR;  
  6.   
  7. namespace SignalRChat  
  8. {  
  9.     public class ChatHub : Hub  
  10.     {  
  11.   
  12.         public void SendEmail(string receiver, string sender, string message)  
  13.         {  
  14.             //调用广播方法推送消息到客户端  
  15.             Clients.All.broadcastMessage(receiver, sender, message);  
  16.         }  
  17.     }  
  18. }  

步骤2：添加Startup.cs类，如下：

 

Startup.cs代码：

 

[csharp] view plain copy
 
  1. using System;  
  2. using System.Threading.Tasks;  
  3. using Microsoft.Owin;  
  4. using Owin;  
  5.   
  6. [assembly: OwinStartup(typeof(SignalRChat.Startup))]  
  7.   
  8. namespace SignalRChat  
  9. {  
  10.     public class Startup  
  11.     {  
  12.         public void Configuration(IAppBuilder app)  
  13.         {  
  14.             // Any connection or hub wire up and configuration should go here  
  15.             app.MapSignalR();  
  16.         }  
  17.     }  
  18. }  


添加上这两个类，那么项目所需要的Scripts文件和引用就会自动添加进来。

 

步骤3：添加一个Html页叫做“邮件通知.html”，内容如下：

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>邮件通知</title>  
  6.     <script src="Scripts/jquery-1.10.2.min.js"></script>  
  7.     <script src="/Scripts/jquery.signalR-2.0.0.js"></script>  
  8.     <script src="/signalr/hubs"></script>  
  9.     <script>  
  10.         var username;  
  11.         $(function () {  
  12.             $("#notify").hide();  
  13.   
  14.             $("#submit").click(function () {  
  15.                 username = $("#username").val();  
  16.                 $("#tishi").html("当前用户： " + username);  
  17.                 $("#shuru").hide();  
  18.                 $("#username").hide();  
  19.                 $("#submit").hide();  
  20.             });  
  21.   
  22.             var chat = $.connection.chatHub;  
  23.             chat.client.broadcastMessage = function (receiver, sender, message) {//显示从服务端收到的信息  
  24.                 if (username == receiver) {  
  25.                     $("#sender").text(sender);  
  26.                     $("#receiveMsg").text(message);  
  27.                     $("#notify").slideDown();  
  28.                 }  
  29.             };  
  30.   
  31.             $.connection.hub.start().done(function () {//发送信息到服务端  
  32.   
  33.                 $('#sendmsg').click(function () {  
  34.                     chat.server.sendEmail($("#receiver").val(), username, $("#msg").val());  
  35.                 });  
  36.   
  37.             });  
  38.   
  39.             $("#cancle").click(function () {  
  40.                 $("#notify").slideUp();  
  41.             });  
  42.         });  
  43.     </script>  
  44. </head>  
  45. <body>  
  46.     <h1>邮件通知</h1>  
  47.     <label id="shuru">请输入用户名：</label>  
  48.     <input type="text" id="username" />  
  49.     <input type="button" id="submit" value="确定" />  
  50.     <br /><label id="tishi"></label>  
  51.     <hr />  
  52. <div>  
  53.     收件人：<input type="text" id="receiver" />  
  54.     <br />内容：<input type="text" id="msg" />  
  55.     <br /><br /><input type="button" id="sendmsg" value="发送"/>  
  56. </div>  
  57.   
  58.     <p></p>  
  59.     <div id="notify" style="width:300px;height:140px;float:right;margin-bottom:10px;border:solid;background-color:yellow;">  
  60.         <br />  
  61.         <br />  
  62.         新消息来自:  <span id="sender"></span><br />  
  63.         内容：<span id="receiveMsg"></span>  
  64.         <br /><br /><br />  
  65.         <input type="button" id="cancle" value="我知道啦" style="float:right"/>  
  66.     </div>  
  67.   
  68. </body>  
  69. </html>  

5.然后就可以生成项目并运行了。

 

6.讲解：ChatHub.cs中的SendEmail(string receiver, string sender, string message)方法由我们自己编写，

这个方法在前端的JavaScript中被调用了：

[html] view plain copy
 
  1. $.connection.hub.start().done(function () {//发送信息到服务端  
  2.   
  3.                 $('#sendmsg').click(function () {  
  4.                     chat.server.sendEmail($("#receiver").val(), username, $("#msg").val());  
  5.                 });  
  6.   
  7.             });  

只是把SendEmail调用时写作sendEmail,即第一个字母小写。这个方法在当singalr准备好之后，
在前端调用后台的方法把数据广播出去。

[html] view plain copy
 
  1. chat.client.broadcastMessage = function (receiver, sender, message) {//显示从服务端收到的信息  
  2.                 if (username == receiver) {  
  3.                     $("#sender").text(sender);  
  4.                     $("#receiveMsg").text(message);  
  5.                     $("#notify").slideDown();  
  6.                 }  
  7.             };  

这个方法，正是客户端收到了服务器广播发来的数据之后调用的方法，收到的参数正是我们在
SendEmail中规定传送的参数。本程序中把收到的信息弹出给相应的用户。

 

就这样，实现了信息的实时推送，也就是服务器端主动向客户端推送消息的方式。结束。

posted on 2017-06-08 15:53  alex5211314  阅读(675)  评论(0)    收藏  举报

导航