MVC5使用Signal进行双向通信（1）

配置Signal

1. 在NuGet中通过 install-package Microsoft.AspNet.SignalR 命令进行安装
2. 在Scripts文件夹中会添加 jquery.signalR-2.2.0.js 和 jquery.signalR-2.2.0.min.js

3. 在startup的configuration方法中加入app.MapSignalR();

   app.MapSignalR()是把Signal Hub 映射到 /signal

      
        
   
       
         
   using Owin;
       
         
   using Microsoft.Owin;
       
         
   [assembly: OwinStartup(typeof(SignalRChat.Startup))]
       
         
   namespace SignalRChat
       
         
   {
       
         
    public class Startup
       
         
    {
       
         
    public void Configuration(IAppBuilder app)
       
         
    {
       
         
    // Any connection or hub wire up and configuration should go here
       
         
    app.MapSignalR();
       
         
    }
       
         
    }
       
         
   }
      
        

后台代码

1. 在Model文件夹中新建一个ChatHub继承自Hub，写一个send方法,用户接受客户端的请求

      
        
   
       
         
   public class ChatHub:Hub
       
         
   { 
       
         
    /// <summary>
       
         
    /// 发送信息给所有用户
       
         
    /// </summary>
       
         
    /// <param name="message"></param>
       
         
    public void SendAll(string name,string message)
       
         
    {
       
         
    //发送给所有客户端
       
         
    Clients.All.sendAll(name,message);
       
         
    }
       
         
   }
      
        

前台代码

1. 新建一个视图名为Chat.cshtml
2. 加入如下代码

 
   

  
    
@{
  
    
 ViewBag.Title = "Chat";
  
    
}
  
    
<h2>Chat</h2>
  
    
<div class="container">
  
    
 <input type="text" id="message" />
  
    
 <input type="button" id="sendmessage" value="Send" />
  
    
 <input type="hidden" id="displayname" />
  
    
 <ul id="discussion">
  
    
 </ul>
  
    
</div>
  
    
//在Layout.cshtml 中定义了名为 scripts 的section
  
    
@section scripts {
  
    
 <!--Script 引用. -->
  
    
 <!--jquery 在 _Layout.cshtml 中已经被引用. -->
  
    
 <!--引用 SignalR. -->
  
    
 <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
  
    
 <!--该script会自动生成,添加到引用中 -->
  
    
 <script src="~/signalr/hubs"></script>
  
    
 <!--SignalR 关键js语句块.--> 
  
    
 <script>
  
    
 $(function () {
  
    
 // 引用hub委托 
  
    
 var chat = $.connection.chatHub;
  
    
 // 添加一个方法供hub回调
  
    
 chat.client.sendAll = function (name,message) {
  
    
 // 处理返回的数据到页面
  
    
 $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: '+ message +'</li>');
  
    
 };
  
    
 // 弹出一个框存储姓名
  
    
 $('#displayname').val(prompt('输入你的名字:', ''));
  
    

  
    
 $('#message').focus();
  
    
 // 打开连接
  
    
 $.connection.hub.start().done(function () {
  
    
 $('#sendmessage').click(function () {
  
    
 // 按钮点击时发送给服务器信息,服务器进行转发. 
  
    
 chat.server.send($('#displayname').val(), $('#message').val());
  
    
 // 清楚输入框并添加焦点
  
    
 $('#message').val('').focus();
  
    
 });
  
    
 });
  
    
 });
  
    
 // 编码化
  
    
 function htmlEncode(value) {
  
    
 var encodedValue = $('<div />').text(value).html();
  
    
 return encodedValue;
  
    
 }
  
    
 </script>
  
    
}
 
   

对Signal 工作原理进行下分析：
1. 页面加载是弹出一个框输入姓名
2. 在页面加载的时候,先创建一个hub引用var chat = $.connection.chatHub
3. 通过 $.connection.hub.start()初始化连接
初始化连接后通过$.connection.hub.start().done()调用回调函数。
在这个回调函数中绑定了个点击事件当按钮点击时向ChatHub中的send方法发出请求，后台则会通过Clients.All.sendAll(name,message)向所有在线客户端发送信息客户端会调用在js中定义的sendAll方法,通过在sendAll方法进行数据处理实时的显示

Signal MVC