1.新建asp.net web应用程序，然后在vs的NuGet包中下载安装Microsoft.AspNet.SignalR
2.右键项目-》新建项，选择signalr集线器类，并写入代码，namespace与类名记得改成实际类名
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
namespace SignalRWebMvcTest
{
[HubName("msgHub")]//客户端调用，首字母要小写
public class MsgHub : Hub
{
//在hub中编写的方法，都是要被客户端调用的方法
[HubMethodName("sendMsg")]//客户端调用，首字母要小写
public void SendMsg(string name, string txt)
{
//服务器主动调用客户端的方法，即客户端必须有getMsg方法
Clients.All.getMsg(name,txt);
}
}
}
3.右键项目，新建普通类Startup.cs
using Owin;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
[assembly: OwinStartup(typeof(SignalRWebMvcTest.Startup))]
namespace SignalRWebMvcTest
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.MapSignalR();
}
}
}
这时可以先测试一下，运行项目，在网页中输入地址http://localhost:8120/signalr/hubs，注意填入实际端口号。网页显示部分内容如下：
加深部分为在hub中编写的方法，如果显示没问题，代表hub上线成功。
4.编写html页面，代码如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.signalR-2.4.1.js"></script>
<script src="/signalr/hubs"></script>
<script>
//绑定登录按钮的事件
$(function () {
$("#btnLogin").click(function () {
login();
});
});
function login() {
if ($("#txtName").val().length > 0)
sessionStorage.setItem("user", $("#txtName").val());
else {
alert("登录失败");
return;
}
$("#sendBtn").removeAttr("disabled");
serverClient();
}
//服务器连接操作
function serverClient() {
//注册服务器连接
var msgHub = $.connection.msgHub;
//2.给客户端注册方法，被服务器调用的方法,
//服务器主动调用给txt内容，客户端被动接收
//接收到之后做什么
msgHub.client.getMsg = function (name, txt) {
//var txtTemplate = "<div><span>{{name}}</span>:<span>{{content}}</span></div> ";
//var html = txtTemplate.replace('{{name}}', name).replace('{{content}}', txt);
//$("#msgList").append(html);
var txtHtml = '<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(txt) + '</li>';
$("#msgList").append(txtHtml);
//alert(txt);
}
//3.启动连接并绑定处理事件
$.connection.hub.start().done(function () {
$("#sendBtn").click(function () {
msgHub.server.sendMsg(sessionStorage.getItem("user"), $("#txtMsg").val());
$('#txtMsg').val('').focus();
})
}).fail(function () {
});
}
// 将发来的信息转化为html标签以便添加到页面
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
</head>
<body>
<div id="msgList">
</div>
<input type="text" id="txtName" name="name" value="" />
<button id="btnLogin">登录</button>
<input type="text" id="txtMsg" name="name" value="" />
<button id="sendBtn" disabled="disabled">发送消息</button>
</body>
</html>
注意头部引用的<script src="Scripts/jquery-1.6.4.js"></script> <script src="Scripts/jquery.signalR-2.4.1.js"></script> <script src="/signalr/hubs"></script>脚本，前两个是你的项目中的实际脚本文件，最后一个是在运行时动态生成的，实际使用时需要修改前两个。
5.打开两个网页进行测试
网页的逻辑是：
1.先输入登录名，然后点击登录，如果输入不为空，则解除发送按钮的disabled属性
2.输入相应的信息，点击发送信息，两个网页都会看到发送的信息，即实现了简单的实时聊天。
参考：
asp.net mvc 实现简单的实时消息推送
微软官方教程：教程： SignalR 2 和 MVC 5 的实时聊天
