最近业务中需要实现服务器端与客户端的实时通信功能,对Signalr做了一点总结和整理。
SignalR 作为 ASP.NET 的一个库,能够简单方便地为应用提供实时的服务器端与客户端双向通信功能。
SignalR 在客户端方面有两种API:Connections 和 Hubs。
在特殊情况下,比如发送消息的格式是特定不变时,使用Connections API。
大多数情况下使用Hubs,因为它是 Connections API 更高级的一种实现,允许客户端与服务端相互直接调用方法。一个实际应用的具体场景,比如服务端获取到新订单时,调用客户端的打印方法,客户端打印完成后,调用服务端的订单状态更新方法。
下面介绍 Hubs 在前端的 API
generated proxy
当使用generated proxy的时候,在语法层面上可以更加简单地调用服务端方法,就像在服务端直接调用。
如下面是服务端的代码,表示新增一条聊天信息到列表
rush:java;">
public class DemoChatHub : Hub
{
public void NewChatMessage(string name,string message)
{
Clients.All.addMessagetoList(name,message);
}
}
客户端调用的时候:
rush:js;">
var demoChatHubProxy = $.connection.DemoChatHub;
demoChatHubProxy.client.addMessagetoList = function (name,message) {
console.log(name + ' ' + message);
};
$.connection.hub.start().done(function () {
$('#newChatMessage').click(function () {
demoChatHubProxy.server.newChatMessage($('#displayname').val(),$('#message').val());
});
});
不使用 generated proxy 时,客户端调用的时候则是
rush:js;">
var connection = $.hubConnection();
var demoChatHubProxy = connection.createHubProxy('demoChatHub');
demoChatHubProxy.on('addMessagetoList',function(name,message) {
console.log(name + ' ' + message);
});
connection.start().done(function() {
$('#newChatMessage').click(function () {
demoChatHubProxy.invoke('newChatMessage',$('#displayname').val(),$('#message').val());
});
});
但是在Vue项目里面,如果前后端分离,不会这样引用:
rush:js;">