SignalR 是一个可以与任何ASP.NET应用程序一起使用的库,用于添加实时通信功能。但是,由于实时通信的概念对来说并不完全清晰,而且唯一的示例是一个聊天室,所以暂时将其搁置了。
当开始个人项目时,再次想到了 SignalR。想做的其中一件事是一旦做出更改就刷新日程:如果用户进行修改,它应该对所有其他用户可见。实现类似功能的典型方式是定期调用服务器以获取日程状态,但要实现伪实时更新,必须经常调用服务器。
使用 SignalR,服务器可以在需要更新时自行调用所有客户端上的 JavaScript 方法。该库将处理实现此目的所需的连接:默认情况下使用WebSocket,但如果浏览器中不可用,它将自动回退到较旧的连接类型。JavaScript 也可以调用服务器:这已经可以通过 AJAX 实现,但如果需要双向通信,使用 SignalR 可能会更简单、更清晰。
因此,如果想要构建一个需要用户之间协作的应用程序,使用实时库是正确的选择。常见的用例包括编辑器、社交网络、聊天或像项目这样的日程安排。
开始使用SignalR非常简单。以下是个人项目的一个示例:任何用户都可以修改事件的会话,当会话被修改时,所有当前登录应用程序的用户都可以看到更改。
首先,必须使用 NuGet 将 MicrosoftASP.NETSignalR 包添加到 ASP.NET 应用程序中,如果还没有 jQuery 包,也要一起添加。
之后,必须创建一个从 Hub 类派生的类。Hub 的所有方法都可以从 JavaScript 调用。此外,这些方法也可以在客户端调用 JavaScript 方法。
namespace EventScheduling {
public class SessionsHub : Hub {
public void SessionModified(ScheduledSession scheduledSession) {
// 调用所有客户端的 JavaScript 方法 sendSessionChanged
Clients.All.sendSessionChanged(scheduledSession);
}
}
}
为了启用 Hub 和 JavaScript 之间的通信,还必须在应用程序的 Startup 类的 Configuration 方法中启用SignalR。
namespace EventScheduling {
public class Startup {
public void Configuration(IAppBuilder app) {
app.MapSignalR();
}
}
}
在客户端,必须包含 SignalR 库的 JavaScript 文件 jquery.signalR-2.2.0.js 和包 ~/signalr/hubs。这个包是从 Hub 类自动生成的,包含调用服务器和接收服务器消息所需的所有 JavaScript。
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.signalR-2.2.0.js"></script>
<script src="~/signalr/hubs"></script>
页面加载并准备好后,必须声明服务器端代码调用的 JavaScript 函数。由于 Hub 类被称为 SessionsHub,并且 hub 类的 SessionModified 方法调用 sendSessionChanged 方法,因此这个函数必须在 $.connection.sessionsHub.client.sendSessionChanged 变量中声明。
一旦创建了这个函数,还必须使用 $.connection.hub.start 方法连接到 hubs。还可以添加初始化代码,在连接启动时调用的 done() 回调中。
$(document).ready(function() {
// 创建一个函数,hub 可以调用以广播消息。
$.connection.sessionsHub.client.sendSessionChanged = function(session) {
// 使用从服务器接收到的新数据重新显示会话
};
// 启动连接,并创建一个函数,当 hub 加载时 hub 将调用
$.connection.hub.start().done($("#Sessions").on("click", ".Session", function(event) {
var that = $(this);
var currentSession = that.data("session");
currentSession.Title = currentSession.Title + "Clicked";
// 调用服务器,它将通知所有客户端标题的更改
$.connection.sessionsHub.server.sessionModified(currentSession);
}));
});