原文：https://www.jianshu.com/p/ae25d0d77011
实现效果
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 + "\r\n";
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_Code\Global.asax.cs" Inherits="Global" Language="C#" %>