1.新建一個Web應用程序，然后下載并安裝到vs的NuGet包中。
2、右鍵項目-》New Item，選擇hub類，然后編寫代碼，記得將類名改為實際的類名
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.右鍵項目，新建 class.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();
}
}
}
這時候可以先測試一下，運行項目，在網頁中輸入地址：8120//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 = "{{name}}:{{content}} ";
//var html = txtTemplate.replace('{{name}}', name).replace('{{content}}', txt);
//$("#msgList").append(html);
var txtHtml = '' + htmlEncode(name)
+ ': ' + htmlEncode(txt) + '';
$("#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 = $('').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>
注意頭部引用的腳本，前兩個是你項目中實際的腳本文件，最后一個是運行時動態生成的，前兩個需要修改才能實際使用。
5、打開兩個網頁進行測試
網頁的邏輯是：
1. 首先輸入登錄名，然后單擊“登錄”。 如果輸入不為空，則取消發送按鈕的屬性
2、輸入相應信息，點擊發送信息，兩個網頁都會看到發送的信息，即實現了簡單的實時聊天。
參考：
MVC實現簡單的實時消息推送
微軟官方教程：教程：Live Chat 2 和 MVC 5
