Comment implémenter des données en temps réel pour une page Web

SignalR

C'est la réponse que je suis le plus heureux de le partager, parce qu'il représente un beaucoup plus propre mise en œuvre, qui est léger et fonctionne bien aujourd'hui dans le mobile de données (comprimé) de l'environnement.

Il y a eu plusieurs méthodes au fil des ans afin de fournir "en temps réel" en poussant de données à partir du serveur vers le client (ou l'apparition de l'envoi de données). Rapide Interrogation Court (semblable à mon AJAX basé sur les réponses), Le Temps D'InterrogationForever CadreServeur A Envoyé Des Événementset Les WebSockets sont différents mécanismes de transport utilisés à cette fin. SignalR est une couche d'abstraction capable de choisi le bon mécanisme de transport basé sur le client et le serveur. La meilleure partie de SignalR est que c'est simple. Vous n'avez pas à vous soucier de le mécanisme de transport, et le modèle de programmation est facile à comprendre.

Je vais définir un SignalR hub, mais il suffit de laisser vide.

public class GameHub : Hub
    {
    }

Quand j'ai ajouter des données à la "base de données", je vais courir le morceau de code ci-dessous. Si vous lisez la question, vous verrez que je l'a mentionné dans la section "créer". Vous aurez envie de décommenter la.

var context = GlobalHost.ConnectionManager.GetHubContext<GameHub>();
context.Clients.All.addGame(game);

Voici mon code de la page:

<h1>SignalR</h1>
<asp:Repeater runat="server" ID="BoardGameRepeater" ItemType="RealTimeDemo.Models.BoardGame">
<HeaderTemplate>
<table border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="BoardGameTblBody">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#: Item.Id %></td>
<td><%#: Item.Name %></td>
<td><%#: Item.Description %></td>
<td><%#: Item.Quantity %></td>
<td><%#: Item.Price %></td>
</tr>
</ItemTemplate>
<FooterTemplate></tbody></table></FooterTemplate>
</asp:Repeater>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Scripts/jQuery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.1.min.js"></script>
<script src="signalr/hubs"></script>
<script type="text/javascript">
var hub = $.connection.gameHub;
hub.client.addGame = function (game) {
$("#BoardGameTblBody").append("<tr><td>" + game.Id + "</td><td>" + game.Name + "</td><td>" + game.Description + "</td><td>" + game.Quantity + "</td><td>" + game.Price + "</td></tr>");
};
$.connection.hub.start();
</script>

Et le code-behind:

protected void Page_Load(object sender, EventArgs e)
{
BoardGameRepeater.DataSource = Application["BoardGameDatabase"];
BoardGameRepeater.DataBind();
}

Avis ce qui se passe ici. Lorsque le serveur d'appels context.Clients.All.addGame(game); c'est l'exécution de la fonction qui a été assignée à hub.client.addGame pour chaque client qui est connecté à la GameHub. SignalR est de prendre soin de câblage des événements pour moi, et en les convertissant automatiquement mon game objet sur le serveur de la game objet sur le client. Et le meilleur de tous, il n'y a aucun trafic réseau et en arrière de quelques secondes, il est donc incroyablement léger.

Avantages:

• Très clair sur le réseau de trafic
• Facile à développer, mais encore souple
• Ne pas envoyer de viewstate avec la demande
• Ne pas interroger le serveur en permanence.

Note, vous pouvez ajouter une fonction sur le client pour editedGame pour pousser changé de données sur le client facilement (même pour les supprimer).

AJAX d'Interrogation, une meilleure mise en œuvre

Semblable à l'autre basé sur AJAX réponse, vous pouvez toujours interroger le serveur. Mais cette fois, au lieu de répondre avec les données à afficher, nous allons répondre avec une liste des ID des données. Le côté client va garder une trace des données déjà récupérées dans un tableau, puis il va faire un autre requête GET au serveur de données lorsqu'il voit un nouveau code a été ajouté.

Voici notre code de la page:

<h1>Board Games (AJAX Polling Good)</h1>
<table id="BoardGameTbl" border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="BoardGameTblBody">
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var loadedGames = [];
function getListOfGames() {
$.ajax({
type: "GET",
url: "api/GamesApi/GetGameIds",
dataType: "json"
})
.done(function (data) {
for (i = 0; i < data.length; i++) {
if (loadedGames.indexOf(data[i]) == -1) {
loadedGames[loadedGames.length] = data[i];
getGame(data[i]);
}
}
setTimeout(getListOfGames, 5000);
});
}
function getGame(id) {
$.ajax({
type: "GET",
url: "api/GamesApi/GetGame/" + id,
dataType: "json"
})
.done(function (game) {
$("#BoardGameTblBody").append("<tr><td>" + game.Id + "</td><td>" + game.Name + "</td><td>" + game.Description + "</td><td>" + game.Quantity + "</td><td>" + game.Price + "</td></tr>");
});
}
getListOfGames();
</script>

Voici les Web API Contrôleur:

namespace RealTimeDemo.Controllers
{
public class GamesApiController : ApiController
{
[Route("api/GamesApi/GetGameIds")]
public IEnumerable<int> GetGameIds()
{
var data = HttpContext.Current.Application["BoardGameDatabase"] as List<BoardGame>;
var IDs = data.Select(x => x.Id);
return IDs;
}
[Route("api/GamesApi/GetGame/{id}")]
public BoardGame GetGame(int id)
{
var data = HttpContext.Current.Application["BoardGameDatabase"] as List<BoardGame>;
return data.Where(x => x.Id == id).SingleOrDefault();
}
}

Maintenant, c'est une bien meilleure mise en œuvre que mes autres AJAX basé sur la réponse et la Minuterie/UpdatePanel réponse. Puisque nous ne sommes qu'à l'envoi de l'ID à travers toutes les 5 secondes, c'est beaucoup plus légère pression sur les ressources réseau. Il faudrait aussi être assez trivial pour gérer absence de connexion au réseau, ou à exécuter une sorte de notification lorsque de nouvelles données ont été chargées, comme lancer un noty.

Avantages

• Ne pas envoyer de viewstate avec la demande.
• Ne pas exécuter une page entière du cycle de vie
• Seulement ID sont envoyés à travers le fil (qui pourrait être amélioré si vous avez envoyé un timestamp avec la demande, et ne me répondit avec les données modifiées depuis la date) dans le cadre de l'interrogation. Seuls les nouveaux objets sont extraites de la base de données.

Inconvénients
- Nous sommes toujours en interrogation, en générant une demande toutes les quelques secondes. Si les données ne changent pas très souvent, vous êtes inutilement à l'aide de la bande passante.