Comment créer une application de vote en temps réel avec .NET et C#
Published: 2024-03-05 04:07:58

Vous pouvez facilement créer une application de vote en temps réel dans le navigateur avec C# et .NET, permettant aux utilisateurs de voter et de voir les résultats, mis à jour en temps réel. Il s'agit d'une application web qui intègre les fonctionnalités d'un système de vote en temps réel. Étant donné la rapidité des avancées technologiques, il est essentiel de suivre le rythme et pour cela, je voudrais mentionner que tout au long de ce tutoriel, nous utilisons C# 9, ASP.NET 5.0, et PubNub C# SDK version 4.4.0.

Dans ce tutoriel, nous montrons comment créer une application web de vote en temps réel en utilisant l'[API PubNub C#](https://github.com/pubnub/c-sharp) et ASP.NET MCV4, une partie de l'API web ASP.NET Core de Microsoft. Cette application permettra aux utilisateurs de voter, et les résultats seront automatiquement comptabilisés et affichés en temps réel, grâce au SDK PubNub C#. Nous nous appuierons spécifiquement sur les méthodes \`publish()\`, \`Subscribe()\` et \`DetailedHistory\` pour faire fonctionner notre application de vote en temps réel. Vous pouvez trouver le code source sur GitHub.

Dans toute application en temps réel, nous envisageons que la question et le choix des réponses proviennent d'un backend tel qu'une base de données SQL Server utilisant le framework entity. Pour réduire notre objectif dans ce tutoriel, je vais coder en dur les questions et les options de réponse dans la méthode \`GetActivePollQuestion()\` de la classe \`SampleData\`, en les rendant sous forme de chaînes xml. Dans un scénario réel, vous voudriez retourner des données dynamiques sous forme de chaînes xml.

### Schémas pour une application de vote en temps réel

Dans ce contexte, les schémas ouvrent la voie à un stockage de données organisé et structuré, permettant des opérations de traitement de données efficaces. Pour atteindre nos objectifs, deux [schémas](https://gist.github.com/stephenlb/a3fce3a43e1fba4564b6#schemas), PollQuestion.xsd et PollUserAnswer.xsd, ont été créés. Ils fournissent un schéma directeur pour nos données, décrivant la structure et le type d'informations stockées.

Les fichiers de classe correspondants, PollQuestion.cs et PollUserAnswer.cs, ont été générés à l'aide des commandes suivantes dans le terminal Visual Studio via l'outil xsd.exe :

```js
XSD.EXE PollQuestion.xsd /c /l:cs /n:ePoll.Types

XSD.EXE PollUserAnswer.xsd /c /l:cs /n:ePoll.Types
```

Jetez un coup d'œil aux formats de ces schémas :

```js
<xs:schema id="PollQuestion"
    targetNamespace="pubnub-csharp-demo-epoll-1.0"
    elementFormDefault="qualified"
    xmlns="pubnub-csharp-demo-epoll-1.0"
    xmlns:mstns="pubnub-csharp-demo-epoll-1.0"
    xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="PollQuestion">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="ID" type="xs:string"></xs:element>
        <xs:element name="Question" type="xs:string"></xs:element>
        <xs:element name="Active" type="xs:boolean"></xs:element>
        <xs:element name="AnswerGroup">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="Answer" type="xs:string" maxOccurs="unbounded" minOccurs="2"></xs:element>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>
```

```js
<xs:schema id="PollUserAnswer"
    targetNamespace="pubnub-csharp-demo-epoll-1.0"
    elementFormDefault="qualified"
    xmlns="pubnub-csharp-demo-epoll-1.0"
    xmlns:mstns="pubnub-csharp-demo-epoll-1.0"
    xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="PollUserAnswer">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="QuestionID" type="xs:string"></xs:element>
        <xs:element name="Question" type="xs:string"></xs:element>
        <xs:element name="UserAnswer" type="xs:string"></xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>
```

### Publication de messages via WebSockets pour le vote en temps réel

La méthode \`Publish()\` joue un rôle crucial dans notre application de vote en temps réel car elle est utilisée pour envoyer les réponses au sondage à un canal PubNub spécifié. Ce message est ensuite reçu par toutes les instances abonnées à ce canal en temps réel, facilitant ainsi une expérience de vote interactive. Vous pouvez facilement configurer cette opération avec le segment de code C# suivant.

```js
public bool SaveAnswer(PollUserAnswer answer)
{
    bool ret = false;

    string pubnubChannel = answer.QuestionID;
    mrePublish.AddOrUpdate(pubnubChannel, new ManualResetEvent(false), (key, oldState) => new ManualResetEvent(false));
    messagePublished[pubnubChannel] = false;

    pubnub.Publish().Channel(pubnubChannel).Message(answer.UserAnswer)
        .Execute(new PNPublishResultExt(
            (result, status) => {
                if (!status.Error && result != null)
                {
                    messagePublished[pubnubChannel] = true;
                    mrePublish[pubnubChannel].Set();
                }
            }));

    mrePublish[pubnubChannel].WaitOne(TimeSpan.FromSeconds(10));

    return messagePublished[pubnubChannel];
}
```

### Abonnement aux soumissions d'utilisateurs pour le vote en temps réel par l'intermédiaire de WebSockets

De l'autre côté de l'équation, la méthode \`Subscribe()\` est utilisée pour recevoir les réponses au sondage en temps réel. Cela permet à notre application de fournir des mises à jour en temps réel. Le SDK PubNub peut récupérer automatiquement n'importe quel message/lien qui est abandonné en utilisant un long polling parmi d'autres protocoles. Pour obtenir cette fonctionnalité dans votre code C#, vous pouvez ajouter l'extrait de code suivant.

```js
pubnub.Subscribe<string>()
    .Channels(new List<string> { pubnubChannel })
    .WithPresence() // If you need presence feature
    .Execute();

// Handling messages, presence, and status within the subscription listener
pubnub.AddListener(new SubscribeCallbackExt(
    (pubnubObj, message) => {
        if (message != null)
        {
            Console.WriteLine("VOTE RECEIVED!");
            Console.WriteLine(message.Message);
            Console.WriteLine();
        }
    },
    (pubnubObj, presence) => {
        // Handle presence event if needed
    },
    (pubnubObj, status) => {
        if (status != null)
        {
            if (status.Category == PNStatusCategory.PNConnectedCategory)
            {
                Console.WriteLine("SUBSCRIBE CONNECT CALLBACK:");
                Console.WriteLine(status.Category.ToString());
                Console.WriteLine();
            }
            else if (status.Error)
            {
                Console.WriteLine();
                Console.WriteLine(status.ErrorData.Information);
                Console.WriteLine();
            }
        }
    }
));
```

### Chargement de l'historique des messages via WebSockets pour le tableau de bord du vote en temps réel

La méthode \`DetailedHistory\` récupère les messages historiques d'un canal. Cette méthode récupère ces messages de manière asynchrone, ce qui nous permet de voir l'historique des données de vote d'un canal PubNub spécifié. Voici le segment de code démontrant cette méthode :

```js
public async Task<List<string>> GetPollResultsAsync(string questionID)
{
    List<string> ret = new List<string>();

    string pubnubChannel = questionID;
    long startTimetoken = 0; // For fetching all messages. Adjust as needed.

    try
    {
        PNHistoryResult result = await pubnub.History()
            .Channel(pubnubChannel)
            .Start(startTimetoken)
            .Count(100) // Adjust based on how many messages you expect to fetch. Max usually 100.
            .IncludeTimetoken(true)
            .ExecuteAsync();

        if (result != null && result.Messages != null)
        {
            foreach (var message in result.Messages)
            {
                // Assuming the messages are strings. Adjust as necessary for your data format.
                ret.Add(message.Entry.ToString());
            }
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"An error occurred: {ex.Message}");
        // Handle errors or exceptions as necessary.
    }

    return ret;
}
```

Conclusion
----------

À ce stade, vous devriez avoir une bonne compréhension de la manière de construire une application de vote en temps réel en utilisant C#, .NET et le SDK PubNub C#. Si vous avez suivi ce tutoriel de manière approfondie, vous aurez remarqué à quel point il est simple d'intégrer des fonctionnalités en temps réel dans vos applications en utilisant PubNub.

Dans le prochain article de blog, nous irons un cran plus loin en incorporant des fonctionnalités supplémentaires telles qu'Angular sur le front-end, en ajoutant l'authentification de l'utilisateur, en configurant le cryptage des données, et bien d'autres choses encore. Restez à l'écoute de notre playlist de tutoriels sur le développement web !

Commencer
---------

Notre plateforme aide les développeurs à construire, fournir et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT. Elle est particulièrement utile pour créer une application de vote en temps réel comme celle dont nous allons parler dans ce tutoriel.

Notre plateforme repose sur le réseau de messagerie périphérique en temps réel le plus vaste et le plus évolutif du secteur. Vous pouvez compter sur nous pour des solutions robustes et performantes.

### Découvrez PubNub

[Visite guid](https://www.pubnub.com/tour/introduction/) ée

### S'installer

Pour commencer à créer vos propres applications en temps réel, créez un [compte PubNub](https://admin.pubnub.com/#/login).

### Démarrer

La [documentation PubNub](https://www.pubnub.com/docs) est là pour vous aider, quel que soit votre projet. Nous proposons des guides complets pour différents cas d'utilisation et SDKs, y compris [C#](https://www.pubnub.com/docs/sdks/c-sharp) que nous avons utilisé dans ce tutoriel.

#### Contenu

[Schémas pour une application de vote en temps réelPublier des](#h-0)[messages sur WebSockets pour le vote en temps réelS'abonner à](#h-1)[des soumissions d'utilisateurs pour le vote en temps réel sur WebSocketsCharger l'](#h-2)[historique des messages sur WebSockets pour le tableau de bord du vote en temps](#h-3)[réelRembourrerPour](#h-4)[commencerExpérience](#h-5)[PubNubS'](#h-6)[installerPour](#h-7)[commencer](#h-8)

Comment PubNub peut-il vous aider ?
===================================

Cet article a été publié à l'origine sur [PubNub.com](https://www.pubnub.com/blog/how-to-build-a-realtime-voting-app-with-net-and-c/)

Notre plateforme aide les développeurs à construire, fournir et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub
----------------

Découvrez le [Live Tour](https://www.pubnub.com/tour/introduction/) pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer
-----------

Créez un [compte PubNub](https://admin.pubnub.com/signup/) pour un accès immédiat et gratuit aux clés PubNub.

Commencer
---------

La [documentation PubNub](https://www.pubnub.com/docs) vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre [SDK](https://www.pubnub.com/docs).