WebForm SignalR 实时消息推送

原文：https://www.jianshu.com/p/ae25d0d77011

官方文档：https://docs.microsoft.com/zh-cn/aspnet/signalr/

实现效果

WebFrom + SignalR 实时消息，聊天室，即时消息

代码示例

动态链接库

添加基础动态链接库

1 Microsoft.AspNet.SignalR.Core.dll
2 Microsoft.AspNet.SignalR.Owin.dll
3 Microsoft.AspNet.SignalR.SystemWeb.dll
4 Microsoft.Owin.Host.SystemWeb.dll
5 Owin.dll
6 Newtonsoft.Json.dll

Global.asax

应用程序文件添加MapHubs

1 public class Global : System.Web.HttpApplication
2 {
3 
4     protected void Application_Start(object sender, EventArgs e)
5     {
6        RouteTable.Routes.MapHubs();
7     }
8 }

继承 Hub

编写集成类

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using Microsoft.AspNet.SignalR;
 6 
 7 /// <summary>
 8 /// PushHub 的摘要说明
 9 /// </summary>
10 public class PushHub : Hub
11 {
12     public PushHub()
13     {
14         //
15         // TODO: 在此处添加构造函数逻辑
16         //
17     }
18 }

聊天室页面

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChatRoom.aspx.cs" Inherits="WebApp.CustomApp.Message.ChatRoom" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <!-- 新 Bootstrap 核心 CSS 文件 -->
10     <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
11 
12     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
13     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
14 
15     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
16     <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
17 
18     <script src="../../Plugins/jquery.signalR-1.1.4.js" type="text/javascript"></script>
19     <script src="/Signalr/Hubs"></script>
20     <script>
21         function SendMsg() {
22             var data = { name: $("#txtName").val(), msg: $("#txtMessage").val() };
23             $.post("ChatRoom.aspx", data, function (msg) { });
24         }
25 
26         var pushHub = $.connection.pushHub;
27 
28         pushHub.client.sendMessage = function (name, message, time) {
29             var flag = time + " " + name + " 说：" + message + "
";
30             $("#txtChatLog").val($("#txtChatLog").val() + flag);
31         }
32 
33         $.connection.hub.logging = true;
34         $.connection.hub.start();
35     </script>
36 
37 </head>
38 <body>
39 
40     <form>
41         <div class="container">
42             <div class="row">
43                 <br />
44                 <div class="form-group">
45                     <label for="txtName">用户名</label>
46                     <input type="text" class="form-control" id="txtName" placeholder="用户名" />
47                 </div>
48                 <div class="form-group">
49                     <label for="txtMessage">消息内容</label>
50                     <input type="text" class="form-control" id="txtMessage" placeholder="消息内容" />
51                 </div>
52                 <button type="button" class="btn btn-default" onclick="SendMsg()">发送</button>
53                 <br />
54                 <div class="form-group">
55                     <label for="txtMessage">聊天记录</label>
56                     <textarea id="txtChatLog" class="form-control" cols="100" rows="10"></textarea>
57                 </div>
58 
59             </div>
60         </div>
61     </form>
62 
63 
64 </body>
65 </html>

聊天室后台

 1 using Microsoft.AspNet.SignalR;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Web;
 6 using System.Web.UI;
 7 using System.Web.UI.WebControls;
 8 
 9 namespace WebApp.CustomApp.Message
10 {
11     public partial class ChatRoom : System.Web.UI.Page
12     {
13         protected void Page_Load(object sender, EventArgs e)
14         {
15             if (!IsPostBack)
16             {
17                 if (Request.Form["name"] != null)
18                 {
19                     SendMsg(Request.Form["name"].ToString(), Request.Form["msg"].ToString());
20                 }
21             }
22         }
23 
24         private void SendMsg(string name,string msg)
25         {
26             IHubContext chat = GlobalHost.ConnectionManager.GetHubContext<PushHub>();
27             chat.Clients.All.sendMessage(name, msg, DateTime.Now.ToString());
28         }
29 
30     }
31 }

注意事项

未生成 /Signalr/Hubs 脚本文件

如果通过浏览器查看时无法浏览 /Signalr/Hubs，可能是 Global.asax 未初始化 RouteTable.Routes.MapHubs();

Global.asax 中 RouteTable.Routes 找不到 MapHubs()

方式一

导入 System.Web.Routing

1 <%@ Import Namespace="System.Web.Routing" %>

方式二

或在 App_Code 文件夹下新建 Global.aspx.cs 文件，同时将原始 Global.aspx 修改如下

<%@ Application Codebehind="App_CodeGlobal.asax.cs" Inherits="Global" Language="C#" %>