跳至正文
首页 » 博客 » Building Real time application with SignalR – Part 1

Building Real time application with SignalR – Part 1

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控件的强大功能。

</p