Messaggi in tempo reale per meteore con flussi di meteore

Questo è il 2013. Se stai per costruire una webapp, devi aggiungere funzionalità in tempo reale all'app. È lo standard. Meteor fa un buon lavoro aiutandoti a creare rapidamente e realizzare app in tempo reale. Ma la meteora è strettamente accoppiata con MongoDB ed è l'unico modo per aggiungere funzionalità in tempo reale. A volte, questo è eccessivo.

MongoDB è una partita perfetta per Meteor. Ma non abbiamo bisogno di usare MongoDB per tutte le nostre attività in tempo reale. Per alcuni problemi, le soluzioni basate su messaggi funzionano molto bene. È lo stesso problema che stanno affrontando anche pubnub e realtime.co..

Sarebbe bello se potessimo avere un approccio ibrido in tempo reale, in Meteor, combinando l'approccio basato su Raccolta MongoDB e un approccio basato su Messaging. Così Meteor Streams è nato per aggiungere questa comunicazione basata su messaggi in tempo reale a Meteor.

Presentazione dei flussi di meteoriti

Un flusso è il componente base di Meteor Streams. È un EventEmitter in tempo reale. Con un flusso, è possibile passare i messaggi avanti e indietro tra i client connessi. È altamente gestibile e ha un ottimo modello di sicurezza.

Proviamolo

Creiamo una semplice applicazione di chat basata su console browser con Meteor Streams. Per prima cosa creeremo una nuova applicazione Meteor:

meteora crea ciao-stream

Successivamente installiamo i flussi di Meteor dall'atmosfera:

aggiungere i flussi

Quindi dobbiamo creare un file chiamato Chat.js e inserire il seguente codice:

 chatStream = new Meteor.Stream ('chat'); if (Meteor.isClient) sendChat = function (message) chatStream.emit ('message', message); console.log ('me:' + messaggio); ; chatStream.on ('message', function (message) console.log ('user:' + message););

Inizia la tua app con:

meteora

La tua app sarà ora in esecuzione - http: // localhost: 3000.

Ora hai un'app di chat completamente funzionante. Per iniziare a chattare, apri la console del browser e usa il sendChat metodo come mostrato di seguito.

Let's Dive In Further

È piuttosto difficile capire i flussi di Meteor con un semplice esempio basato su console, come quello appena creato. Quindi, costruiamo un'applicazione di chat completa per familiarizzare con Meteor Streams.

L'applicazione

L'app che stiamo creando è un'applicazione di chat basata sul Web. Chiunque può chattare in modo anonimo. Inoltre, gli utenti possono registrarsi e chattare con la loro identità (username). Ha anche un sistema di filtraggio, che filtra le parolacce (parolacce).

Alla fine, assomiglierà a qualcosa del genere. Puoi prendere il codice sorgente da github per vedere il risultato finale.

Creiamo l'app

Creiamo un'app Meteor standard e installiamo i flussi di Meteor dall'atmosfera. Aggiungeremo anche il supporto per Bootstrap e Meteor Accounts.

meteor creare awesome-chat-app cd awesome-chat-app meteor rimuovi insecure autopublish meteor aggiungi account bootstrap-account password-ui mrt aggiungi stream rm awesome-chat-app. * // rimuovi i file aggiunti automaticamente

Costruiamo l'interfaccia utente

L'interfaccia utente per la nostra app sarà piuttosto semplice. Noi abbiamo un div mostrando i messaggi di chat e un ingresso casella per inserire nuovi messaggi di chat. Vedi sotto per l'HTML completo della nostra interfaccia utente. Controlla i commenti in linea se hai bisogno di aiuto per capire il codice.

Aggiungi il seguente contenuto in client / home.html:

 Impressionante app di chat    > mainBox

Collegare la nostra chat

La reattività di Meteor è un concetto fantastico e molto utile. Ora, Meteor Streams non è una fonte di dati reattiva. Ma può funzionare bene con le sole raccolte locali per fornire reattività.

Come suggerisce il nome, le raccolte solo locali non sincronizzano i propri dati con il server. I suoi dati sono disponibili solo all'interno del client (scheda del browser).

Aggiungi il seguente contenuto in lib / namespace.js per creare la nostra unica raccolta locale:

if (Meteor.isClient) chatCollection = new Meteor.Collection (null);

Ora è il momento di cablare i nostri modelli con la collezione. Facciamo quanto segue:

Assegna la collezione al messaggi aiuto in Chatbox modello.
Genera un valore per il utente aiuto in chatMessage modello.
Quando il Invia chat viene cliccato il pulsante, aggiungi il messaggio di chat digitato nella raccolta.

Aggiungi il seguente contenuto a client / ui.js:

// assegna la raccolta al helper 'messages' nel template 'chatBox' Template.chatBox.helpers ("messages": function () return chatCollection.find ();); // genera un valore per l'helper 'utente' nel modello 'chatMessage' Template.chatMessage.helpers ("utente": function () return this.userId;); // quando si fa clic su "Invia chat", aggiungi il messaggio di chat digitato nella raccolta Template.chatBox.events ("fai clic su #send": function () var message = $ ('# chat-message'). val () ; chatCollection.insert (userId: 'me', message: message); $ ('# chat-message'). val ("););

Con le suddette modifiche sarete in grado di chattare, ma i messaggi vengono visualizzati solo sul client. Quindi passiamo il resto del lavoro a Meteor Streams.

Creiamo il flusso

Creeremo lo stream sia sul client che sul server (con lo stesso nome) e aggiungendo le autorizzazioni necessarie.

Aggiungere il seguente codice in lib / namespace.js per creare lo stream:

chatStream = new Meteor.Stream ('chat-stream');

Basta creare il flusso da solo non è abbastanza; dobbiamo dare le autorizzazioni necessarie, che consentono ai clienti di comunicare attraverso di essa. Esistono due tipi di permessi (lettura e scrittura). Dobbiamo prendere in considerazione l'evento, l'ID utente e l'abbonamentoId quando stiamo creando l'autorizzazione.

ID utente è l'ID utente del client connesso allo stream.
subscriptionId è l'identificativo univoco creato per ogni client connesso allo stream.

Per la nostra app di chat, dobbiamo dare a chiunque usi l'app l'accesso completo in lettura e scrittura al Chiacchierare evento. In questo modo, i client possono usarlo per inviare e ricevere messaggi di chat.

Aggiungere il seguente codice a server / permissions.js:

chatStream.permissions.read (function (eventName) return eventName == 'chat';); chatStream.permissions.write (function (eventName) return eventName == 'chat';);

Collegamento del flusso con l'interfaccia utente

Ora che abbiamo uno stream completamente funzionante, collegalo all'interfaccia utente in modo che altri possano vedere i messaggi che stai inviando.

La prima cosa che dobbiamo fare è aggiungere i nostri messaggi di chat allo stream, quando clicchiamo su Invia chat pulsante. Per questo, abbiamo bisogno di modificare il codice relativo al Invia chat evento clic del pulsante (fai clic su #send), come segue (in client / ui.js):

Template.chatBox.events ("click #send": function () var message = $ ('# chat-message'). Val (); chatCollection.insert (userId: 'me', messaggio: messaggio) ; $ ('# chat-message'). val ("); // == ECCO IL CAMBIAMENTO == // aggiungi il messaggio allo stream chatStream.emit ('chat', messaggio););

Quindi abbiamo bisogno di ascoltare il flusso per il Chiacchierare evento e aggiungere il messaggio al chatCollection che viene reso nell'interfaccia utente, in modo reattivo. Aggiungere il seguente codice al client / ui.js file:

chatStream.on ('chat', funzione (messaggio) chatCollection.insert (userId: this.userId, // questo è il userId del mittente subscriptionId: this.subscriptionId, // this is the subscriptionId del messaggio mittente: Messaggio ); );

Ora abbiamo bisogno di modificare la logica che genera il valore per il utente aiuto in chatMessage modello come segue:

Utente connesso - utente-
Utente anonimo - anonimo-

Modifica il codice per utente aiuto in chatMessage modello per riflettere i cambiamenti di cui sopra (in client / ui.js):

Template.chatMessage.helpers ("utente": function () var nickname = (this.userId)? 'User-' + this.userId: 'anonymous-' + this.subscriptionId; return nickname;);

Visualizzazione del nome utente invece del `ID utente`

Mostrando solo il ID utente non è molto utile Quindi cambiamo per visualizzare il nome utente effettivo. Qui, utilizzeremo Meteor Pub / Sub per ottenere il nome utente per un dato ID utente.

Prima di tutto, consente di configurare Meteor Accounts per accettare il nome utente durante la creazione dell'utente. Aggiungere il seguente codice a client / users.js:

Accounts.ui.config (passwordSignupFields: "USERNAME_ONLY");

Quindi creiamo la pubblicazione per ottenere l'utente. Aggiungere il seguente codice a server / users.js. Restituisce semplicemente il nome utente per un dato ID utente.

Meteor.publish ("user-info", function (id) return Meteor.users.find (_ id: id, fields: username: 1););

Ora dobbiamo creare un abbonamento sul client per ogni utente a cui siamo interessati. Lo faremo all'interno di un metodo. Inoltre, dopo aver ottenuto il nome utente, deve essere assegnato a una variabile di sessione. Quindi possiamo usare la variabile di sessione all'interno di utente aiuto per ottenere il nome utente in modo reattivo.

Aggiungere il seguente codice in client / users.js:

getUsername = function (id) Meteor.subscribe ('user-info', id); Deps.autorun (function () var user = Meteor.users.findOne (id); if (utente) Session.set ('user-' + id, user.username););

Infine, modifichiamo il utente aiuto in chatMessage modello per ottenere il nome utente dalla sessione (in client / ui.js):

Template.chatMessage.helpers ("utente": function () if (this.userId == 'me') return this.userId; else if (this.userId) getUsername (this.userId); sessione di ritorno .get ('user-' + this.userId); else return 'anonymous-' + this.subscriptionId;);

Filtrare le parole sbagliate

La nostra app di chat farà in modo di nascondere qualsiasi volgarità. Se qualcuno tenta di inviare un messaggio con alcune parolacce, dobbiamo filtrarle. Meteor Stream ha una funzione chiamata filtri, progettata per questo. Vediamo come possiamo filtrare la parola scemo da qualsiasi messaggio di chat.

Aggiungi il seguente codice in server / filters.js:

chatStream.addFilter (function (eventName, args) if (eventName == 'chat') var message = args [0]; if (message) message = message.replace (/ fool / ig, '**** '); return [messaggio]; else return args;);

Sentiti libero di aggiungere i tuoi filtri.

La nostra app di chat è ora completa. Puoi vedere una versione live dell'app all'indirizzo http://streams-chat.meteor.com. Inoltre, il codice sorgente per l'app è disponibile su Github.

Conclusione

In questo tutorial abbiamo creato un'applicazione di chat usando raccolte solo locali per aggiungere reattività e usare Meteor Pub / Sub per ottenere il nome utente di un utente. Speriamo che possiate vedere quanto bene i flussi di Meteor possono funzionare con le funzionalità Meteor esistenti. Tuttavia, questa è solo un'introduzione a Meteor Streams, per risorse aggiuntive, controlla i seguenti link:

Presentazione di Meteor Streams: un articolo su MeteorHacks.
Documentazione sui flussi di meteoriti.
App di esempio.

Codice