2014-10-10 17 views
22

Ho appena letto questo post e capisco qual è la differenza. Ma ancora nella mia testa ho la domanda. Posso/devo usarlo nella stessa app/sito web? Diciamo che voglio che AngularJs recuperi i contenuti e aggiorni la mia pagina, connettendomi a un'API REST e tutte quelle cose importanti. Ma oltre a questo voglio anche una chat in tempo reale, o per attivare eventi su altri client quando c'è un aggiornamento o un messaggio ricevuto.AngularJS e WebSockets oltre

Il supporto angolare lo supporta? O devo usare qualcosa come Socket.io per attivare quegli eventi? Ha senso usare entrambi? Se qualcuno potrebbe aiutarmi o indicarmi qualche buona lettura a riguardo se c'è uno scopo per usarli entrambi insieme.

Spero di essere abbastanza chiaro. Grazie per tutto l'aiuto.

risposta

16

Javascript supporta WebSocket, in modo da non avete bisogno di un quadro lato client aggiuntivo di usarlo. Si prega di dare un'occhiata a questo $connection service dichiarato in questo WebSocket based AngularJS application.

Fondamentalmente si può ascoltare i messaggi:

$connection.listen(function (msg) { return msg.type == "CreatedTerminalEvent"; }, 
     function (msg) { 
      addTerminal(msg); 
      $scope.$$phase || $scope.$apply(); 
    }); 

Ascoltare una volta (ottimo per richiesta/risposta):

$connection.listenOnce(function (data) { 
     return data.correlationId && data.correlationId == crrId; 
    }).then(function (data) { 
     $rootScope.addAlert({ msg: "Console " + data.terminalType + " created", type: "success" }); 
    }); 

e inviare messaggi:

$connection.send({ 
     type: "TerminalInputRequest", 
     input: cmd, 
     terminalId: $scope.terminalId, 
     correlationId: $connection.nextCorrelationId() 
    }); 

Di solito, dal momento che un La connessione WebSocket è bidirezionale e has a good support, è anche possibile utilizzarlo per ottenere i dati da om il server nel modello richiesta/risposta.Si possono avere i due modelli:

  • Editore/Subscriber: messaggi quando si Quando il cliente dichiara il suo interesse per alcuni argomenti e impostare i gestori per i messaggi con questo argomento, e quindi il server pubblicare (o spinta) vede in forma.

  • Richiesta/risposta: dove il client invia un messaggio con un ID di richiesta (o un oggetto di correlazione) e ascolta una singola risposta per tale ID di richiesta.

Ancora, è possibile avere entrambi se si desidera, e utilizzare REST per ottenere dati e WebSocket per ottenere aggiornamenti.

Sul lato server, potrebbe essere necessario utilizzare Socket.io o qualsiasi framework lato server per disporre di un back-end con supporto WebSocket.

+1

Bel esempio, ma si noti che $ connection non fa parte di angular, i servizi che iniziano con $ devono essere riservati per api angolari. – pdem

7

Come indicato nello answer nel post collegato, Angular non dispone attualmente del supporto integrato per Websockets. Pertanto, è necessario utilizzare direttamente l'API Websockets o utilizzare una libreria aggiuntiva come Socket.io.

Tuttavia, per rispondere alla domanda se è necessario utilizzare sia un'API REST che Websockets in una singola applicazione Angolare, non vi è alcun motivo per cui non si possano avere richieste XmlHttpRequest standard per l'interazione con un API REST, utilizzando $ http o un'altra libreria di livello dati come BreezeJS, per determinate funzionalità incluse in varie parti dell'applicazione e anche Wesockets per un'altra parte (ad es. chat in tempo reale).

Angolare è progettato per facilitare la gestione di questo tipo di scenario. Una soluzione tipica sarebbe quella di creare uno o più controller per gestire la funzionalità dell'applicazione e aggiornare la pagina e quindi creare servizi o fabbriche separate che incapsulino la gestione dei dati di ciascuno dei tuoi endpoint di dati (ad esempio REST api e il server di chat in tempo reale), che vengono poi iniettati nei controller.

C'è una grande quantità di informazioni disponibili sull'utilizzo di servizi/fabbriche angolari per la gestione delle connessioni dati. Se stai cercando una risorsa che ti aiuti a guidare come costruire un'applicazione Angolare e dove i servizi dati si adatterebbero, ti consiglio di controllare John Papa AngularJS Styleguide, che include una sezione su Data Services.

Per ulteriori informazioni su fabbriche e servizi, è possibile controllare AngularJS : When to use service instead of factory