为了防止踩坑先在这里说明要注意的几点
1、客户端调用服务端方法,方法名首字母要小写
2、客户端需要写一个方法,随便创建一个客户端方法即可,如下面提到的
systemHub.client.showMsg = function (name, msg) {
$('#showMsg').append('<li><span style="color:red">' + name + ':</span>' + msg + '</li>')
}
如果不写这个方法的话无法触发客户端连接断开方法。即服务端的方法如下,具体原因不知道
public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
我们实现一个简单的消息通知的Demo
在NuGet中添加SignalR引用
install-package Microsoft.AspNet.SignalR
然后我们创建一个类来引用Hub类
namespace SignalRDemo.Hubs
{
public class ServerHub:Hub
{
}
}
或者直接在添加项中添加SignalR添加SignalR
然后我们在ServerHub类中创建一个发送信息方法
/// <summary>
/// 服务器发送方法
/// </summary>
/// <param name="msg"></param>
public void SendMsg(string msg)
{
//调用客户端的showMsg方法
Clients.All.showMsg(Context.ConnectionId, msg);
}
这个方法由客户端进行调用,方法中Clients代表客户端对象,这段话表示调用客户端的showMsg方法.而All代表是给所有人发送通知
All:调用所有人方法
Others:调用除去自己所有人方法
Caller:调用自己方法
Group:调用组内所有人方法
Client(string connectionId):调用指定连接编号的方法
Context.ConnectionId是当前连接用户的标志,是一个GuId
然后我们创建一个Start类来注册SignalR
namespace SignalRDemo
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
注意,此处是一个约定,类名与方法名必须为Startup和Configuration。该类还必须在网站根目录,否则运行时就会出错
接下来我们就可以创建页面了
创建一个Home控制器Index页面。
在页面中引用JQuery类库与SignalR类库
然后我们再手动添加一个类库引用
<script src="~/SignalR/Hubs"></script>
这个js类库在目录下是找不到的,它是在运行时自动创建
我们可以启动项目来查看下这个路径
如果出现此页面则表示我们SignalR配置OK。
下面我们就可以写客户端了
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<input type="text" id="msg"/>
<button id="sendMsg">发送消息</button>
</div>
<ol id="showMsg">
</ol>
<script src="~/Scripts/jquery-1.6.4.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.2.js"></script>
<script src="~/SignalR/Hubs"></script>
<script>
$(function () {
//获取服务端连接对象
var hub = $.connection.serverHub;
//创建服务端所调用的客户端方法
hub.client.showMsg=function(name, msg){
$('#showMsg').append('<li><span style="color:red">'+name+':</span>'+msg+'</li>')
}
//开始连接服务器
$.connection.hub.start().done(function () {
//连接成功
$('#sendMsg').bind('click', function () {
//调用服务端发送方法
hub.server.sendMsg($('#msg').val());
})
}).fail(function () {
//连接失败
alert("连接失败");
});
})
</script>
</body>
</html>
然后就可以简单进行消息通知了