web-dev-qa-db-fra.com

Angular 2 TypeScript utilisant SignalR

J'essaie de mettre en place une Angular 2 pour utiliser SignalR de Microsoft. J'ai suivi ce tutoriel , ce qui bien que ce soit bien je ne le fais pas comme le fait que jQuery et SignalR sont chargés dans l'application via des balises de script dans le fichier index.html et également le fait que les deux bibliothèques n'utilisent pas leurs définitions de type respectives.

Donc, avec cela à l'esprit, j'ai essayé d'inclure jQuery et SignalR dans mon application en utilisant des modules de nœuds et les définitions de type respectives. J'ai recherché les fichiers de définition de type corrects à utiliser via Microsoft TypeSearch .

J'inclus uniquement jQuery dans mon application en raison de la dépendance de SignalR à jQuery.

jQuery

J'ai d'abord commencé par installer le module jQuery dans mon application que j'ai également dû ajouter dans la configuration Webpack. Après que ceci a été installé, je suis confronté à un problème de "conflit" à cause de Protractor. Ceci est décrit sur le site web d'Aurelia JS Rocks . Bien qu'il suggère de désinstaller les typages du rapporteur, j'ai essayé notre autre solution pour l'instant décrite dans cette réponse . Je ne sais pas si c'est la meilleure solution.

SignalR

En ce qui concerne SignalR, je suis un peu coincé - jusqu'à présent, il semble qu'aucun module de nœud "officiel" ne soit fourni pour SignalR. Je ne sais pas si je dois inclure la bibliothèque Javascript SignalR de Microsoft en téléchargeant le fichier et en l'incluant dans mon application.

Le problème est que j'ai installé les définitions de type pour SignalR. Mais maintenant, je ne sais pas comment utiliser réellement SignalR depuis que je tape $ ou jQuery Je ne suis pas suggéré .connections par exemple - ce qui est logique car cela ne fait pas partie de la bibliothèque jQuery.

Je suis sûr que je pourrais mal comprendre quelque chose en ce qui concerne la mise en place. Quelle est la meilleure façon d’utiliser SignalR dans une application Angular2 TypeScript?

jqueryangulartypescriptwebpacksignalr
11
Daniel Grima

Voici un code de démarrage que vous pouvez utiliser.

C #

//create an interface that contains definition of client side methods
public interface IClient
{
    void messageReceived(string msg);
}

//create your Hub class that contains implementation of client methods
public class ChatHub : Hub<IClient>
{
    public void sendMessage(string msg)
    {
        //log the incoming message here to confirm that its received

        //send back same message with DateTime
        Clients.All.messageReceived("Message received at: " + DateTime.Now.ToString());
    }
}

HTML

Ajoutez une référence aux fichiers script de jQuery et signalR.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.signalR.min.js"></script>

<!--this is the default path where SignalR generates its JS files so you don't need to change it.-->
<script src="~/signalr/hubs"></script>

JS

Vous devez installer fichier de définition TypeScript pour SignalR et jQuery. Si vous utilisez TypeScript 2, vous n'avez pas besoin d'ajouter de référence à index.d.ts fichier lors de son utilisation. Installez simplement les saisies à l'aide des commandes suivantes.

npm install --save @types/jquery
npm install --save @types/signalr

Une fois la configuration terminée, vous pouvez écrire un simple TypeScript class pour gérer la logique d'envoi et de réception des messages.

export class MessageService {
    //signalR connection reference
    private connection: SignalR;

    //signalR proxy reference
    private proxy: SignalR.Hub.Proxy;


    constructor() {
        //initialize connection
        this.connection = $.connection;

        //to create proxy give your hub class name as parameter. IMPORTANT: notice that I followed camel casing in giving class name
        this.proxy = $.connection.hub.createHubProxy('chatHub');

        //define a callback method for proxy
        this.proxy.on('messageReceived', (latestMsg) => this.onMessageReceived(latestMsg));

        this.connection.hub.start();
    }

    private onMessageReceived(latestMsg: string) {
        console.log('New message received: ' + latestMsg);
    }

    //method for sending message
    broadcastMessage(msg: string) {
        //invoke method by its name using proxy 
        this.proxy.invoke('sendMessage', msg);
    }
}

J'utilise le code ci-dessus, évidemment modifié selon mes besoins, et cela fonctionne très bien.

18
Syed Ali Taqi

tu peux essayer

npm install ng2-signalr --save

vous pouvez lire les instructions de configuration ici ,
Il existe également un lien vers une démonstration de travail .

5
hannes neukermans

La réponse de @Syed ALi Taqi est fondamentalement OK mais pas parfaite (même ne fonctionne pas si vous manquez de configurer le compilateur ts). Voici mes étapes pour le plus récent Angular (version 8 au moment de mon écriture):

  1. Installez les bibliothèques d'exécution jquery et signalr: npm install jquery signalr

  2. Dites à Angular de charger les bibliothèques au moment de l'exécution comme si elles étaient dans le <script></script> tag en configurant angular.json:

    projects:
  <your-app>:
    architect:
      build:
        options:
          ...
          scripts: [
            "./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/signalr/jquery.signalR.min.js"
          ]
      ...
      test:
        options:
          ...
          scripts: [
            "./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/signalr/jquery.signalR.min.js"
          ]

  3. Installez les types pour jquery et signalr afin que le compilateur ts puisse les reconnaître: npm install @types/jquery @types/signalr --save-dev

  4. Indiquez au compilateur ts de charger les types par défaut en modifiant les sections types de tsconfig.app.json et tsconfig.spec.json : 
    compilerOptions:
  types: [..., "jquery", "signalr"]

OK, tout est fait! Bon codage SignalR!

let conn = $.hubConnection("<base-path>");
let proxy = conn.createHubProxy("<some-hub>");
...

Remarque: n'essayez jamais de import ... from jquery explicitement dans votre code, comme dit par https://angular.io/guide/using-libraries#using-runtime-global-libraries-inside-your-app =

Pour plus d'informations sur la configuration angular.json, voir https://angular.io/guide/workspace-config

0
Robert