HTTP协议是web上所有通信的基础,它从早期就满足了我们的需求。HTTP在请求和响应模型中工作,其中需要将请求发送到服务器以从那里获取任何更新。这在处理一些我们需要实时数据的场景时带来了挑战: 当用户打开网页时,它需要更新,当服务器上发生变化时,但根据HTTP架构,必须发送一个新的请求以从服务器获取更新。这给用户带来了糟糕的体验,并且多个请求也可能会限制网络带宽。在许多实时场景中,我们需要向用户显示实时数据 (例如股票市场信息,实时游戏结果,聊天应用程序等)。
为了处理这些场景,我们使用了不同的解决方法,AJAX帮助了很多。AJAX允许我们发送一个请求 (相对非常小),并根据响应更新UI。我们面临的其他挑战包括浏览器在功能和支持方面的不同行为。从性能的角度来看,服务器的资源和网络利用率是其他问题,因此我们不能盲目地向服务器发送多个请求。同样,我们不能让用户在等待更新时等待更多。开发人员有责任使用最佳的可用选项/协议来处理实时通信。
什么是SignalR?
信号是一个高级库,使实时web应用程序的开发变得非常容易。我们可以像上面讨论的那样使用AJAX编写实时web应用程序,或者我们可以使用Forever Frame或其他一些自定义解决方法,但是这些方法非常复杂,不同的场景需要不同的逻辑。SignalR隐藏了所有涉及的复杂性,并在包括不同版本的所有浏览器上无缝工作。它非常强大,允许客户端和服务器之间的双向通信。服务器不需要等待客户端的请求来发送响应,而是可以在新数据可用时逻辑地推送响应。它本身处理连接管理,并使我们能够向连接的客户端广播/单播消息。
运输机制
SignalR使用多种技术之一来建立客户端和服务器之间的通信。HTML5引入的Web Socket提供双向支持,但并非所有浏览器和旧版本都支持。由于我们不能保证用户将使用什么浏览器,我们不能简单地依赖于此,所以必须有一些方法可以跨浏览器实现类似的功能。要做到这一点,SignalR允许您使用多种传输技术,并选择一个最适合的方案。
让我们简单讨论一下上述技术。
Web套接字-这是一种新的通信技术,它通过web上的单个TCP连接提供真正的双向通信。换句话说,如果双方 (客户端和服务器) 都支持web套接字,那么这将在它们之间创建一个持久的连接,客户端或服务器可以使用该连接随时发送数据。因此,这是最有效的,占用较少的内存并显示出最低的延迟。这是SignalR应用程序最优选的协议。
服务器发送的事件(也称为事件源)-这是HTML5引入的另一种技术,它允许服务器在新数据可用时将更新推送到客户端。当不支持Web Socket时使用此技术。除IE外,大多数浏览器都支持它。
永远的框架-这是COMET模型的一部分,并在浏览器上使用隐藏的iframe以增量方式从服务器接收数据。服务器开始以一系列块的形式发送数据,甚至不知道内容的完整长度。它在接收到数据时在客户端上执行。
AJAX长轮询-这是在SignalR中建立客户端和服务器之间的通信的最不优选的方式。而且,它也是最昂贵的!它是COMET模型的一部分,顾名思义,它会不断轮询服务器以检查更新。发送到服务器的请求是基于AJAX的,以最大程度地减少资源使用并提供更好的用户体验。但它仍然很昂贵,因为它会不断轮询服务器是否有任何更新。
在进一步讨论之前,让我们讨论用于在客户端和服务器之间连接的两种不同模型:持久连接和集线器
持久连接-这是一个较低级别的API,它允许我们将原始消息发送到不同的客户端。我们还可以根据不同类型的消息和不同的客户端对此进行自定义,并且还可以将这些详细信息与消息一起发送。简而言之,一方面它让我们对连接和发送不同类型的消息有了更多的控制,而另一方面我们需要编写更多的代码。
集线器-这些是建立在持久连接之上的更高级别的api。集线器向开发人员隐藏了所有的复杂性,并为我们提供了一个简单的RPC样式模型,并定义了独特的功能。
如何使用SignalR
SignalR是相当容易配置和使用。我们可以安装nuget包如下:
,或者我们可以运行以下命令通过包管理器控制台:
安装包Microsoft.AspNet.SignalR
这将安装SignalR的所有必需组件。一旦安装,to开始使用它,我们需要完成以下步骤:
1-首先,我们需要在应用程序中配置.为此,我们需要创建一个名为Startup.cs的类,并将以下代码放在那里:
启动的公共 类 {公共 无效配置 (IAppBuilderapp) {app.MapSignalR(); }
}
2-创建一个Hub类,它应该从Hub类继承为:
公共 类 MySignalRHub:轮毂
{
公共 无效SendMessage (字符串消息)
{
// 调用回叫函数客户端
客户。所有。说你好 (“您好!!您的留言:”+ 消息);
}
}
集线器是任何SignalR应用程序的核心,它是促进客户端和服务器之间通信的集线器。这里的SayHello方法是一个从Hub调用的JavaScript方法 (我们将在下面看到)。的SendMessage方法将从客户端调用。集线器提供了开箱即用的模型绑定和序列化。
3-现在在客户端 (比如在Index.HTML中),我们需要添加流动库:
<脚本 src= “脚本/jquery-1.6.4.min.js”>脚本>
< 脚本 src
= “Scripts/jquery.signalR-2.2.0.js”> 脚本 > >
以上是JavaScript客户端所需的jQuery和SignalR库。jQuery的最低版本是1,6.4。
4-现在客户端如何连接到服务器方法?为此,我们需要包括动态生成的集线器代理。使用这个,通信发生在服务器和客户端之间。它包括:
<脚本 src= “signalr/hubs”>脚本>
注意-该文件的客户端应该是相同的jQuery,jQuery SignalR和集线器代理。
5-我们拥有客户端所需的所有资源。现在我们需要编写用于调用服务器端代码的代码,并提供一个当服务器获得任何更新时将从服务器调用的回叫函数。让我们在代码中看到:
varhubproxy = $.connection。mySignalRHub;
这是代理实例,它将是通信的关键。让我们将回调方法定义为:
hubproxy.client.sayHello = 函数 (message) {/// 处理您的消息
}
,现在调用服务器端方法:
$.connection.hub.start().done (功能() { $( “ # sendmessage’ ”)。单击 (函数 (() { 的 // 调用发送方法的集线器。hubproxy.server.sendMessage($ (‘# tbmessage’).val()); });
});
在上面的代码中,有两个关键的东西。首先,我们启动集线器,当它完成时,我们只添加click方法并调用sendMessage的枢纽。这不能在启动集线器之前调用。
以上是SignalR应用程序的最低设置所需的所有步骤。让我们在这里看到客户端和服务器之间通信的图形表示:
的注意-在客户端,我们需要调用的方法,无论它是写在服务器,否则它不会被调用。
结论
在这篇文章中,我们讨论了编写实时web应用程序的复杂性以及SignalR如何简化该过程。然后,我们讨论了连接模型,传输模型的概念以及如何设置基础架构并开始使用SignalR。请继续关注我的下一篇文章,我们将用一个真实的例子来介绍SignalR的见解。
使用您喜欢的框架为任何场景创建现代Web应用程序。下载Ignite UI今天,体验Infragistics jQuery/HMTL5控件的强大功能。