Sanntidsmeldinger for meteor med meteorstrømmer

Dette er 2013. Hvis du skal bygge en webapp, må du legge til sanntidsmuligheter til appen. Det er standarden. Meteor gjør en ganske god jobb på å hjelpe deg med å raskt bygge og lage apps i sanntid. Men meteor er tett kombinert med MongoDB, og det er den eneste måten å legge til sanntidskapasiteter. Noen ganger er dette overkill.

MongoDB er en perfekt match for Meteor. Men vi trenger ikke å bruke MongoDB for alle våre sanntidsaktiviteter. For noen problemer fungerer meldingsbaserte løsninger veldig bra. Det er det samme problemet at pubnub og real-time.co også adresserer.

Det ville være flott hvis vi kunne ha en hybrid tilnærming til sanntid, i Meteor, kombinere MongoDB Collection-basert tilnærming og en Meldingbasert tilnærming. Således ble Meteor Streams født for å legge til denne meldingsbaserte, sanntids kommunikasjonen til Meteor.

Innføring av meteorstrømmer

En Stream er den grunnleggende byggestenen til Meteor-strømmer. Det er en real-time EventEmitter. Med en Stream kan du sende meldinger frem og tilbake mellom tilkoblede klienter. Det er svært overkommelig og har en veldig god sikkerhetsmodell.

La oss gi det en sjanse

La oss lage et veldig enkelt, nettleserkonsollbasert chatprogram med Meteor Streams. Vi lager først et nytt Meteor-program:

meteor lage hei-stream

Deretter installerer vi Meteor-strømmer fra atmosfæren:

Legg til strømmer

Da må vi opprette en fil som heter chat.js og plasser i følgende kode:

 chatStream = ny Meteor.Stream ('chat'); hvis (Meteor.isClient) sendChat = funksjon (melding) chatStream.emit ('melding', melding); console.log ('meg:' + melding); ; chatStream.on ('message', funksjon (melding) console.log ('user:' + message););

Start appen din med:

meteor

Appen din kjører nå - http: // localhost: 3000.

Nå har du en fullt fungerende chat-app. For å begynne å chatte, åpne nettleserkonsollen og bruk Sendchat metode som vist nedenfor.

La oss dykke videre

Det er litt vanskelig å forstå Meteor Streams med bare et enkelt konsollbasert eksempel, som den vi nettopp har bygget over. Så la oss bygge et fullverdig chatprogram for å bli mer kjent med Meteor Streams.

App

Appen vi lager er et nettbasert chat-program. Alle kan chatte anonymt. Brukerne kan også registrere og chatte med sin identitet (brukernavn). Det har også et filtreringssystem, som filtrerer ut dårlige ord (profanity).

På slutten vil det se noe ut som dette. Du kan ta tak i kildekoden fra github for å se det endelige resultatet.

La oss lage appen

La oss lage en standard Meteor app og installere Meteor Streams fra atmosfæren. Vi vil også legge til støtte for bootstrap og Meteor Accounts.

meteor lage awesome-chat-app cd awesome-chat-app meteor fjerne usikker autopublish meteor legg til bootstrap kontoer-passord kontoer-ui mrt legg til strømmer rm awesome-chat-app. * // fjerne filer lagt til automatisk

La oss bygge brukergrensesnittet

Brukergrensesnittet for vår app vil være ganske enkelt. Vi har en div viser chatmeldingene og en inngang boks for å legge inn nye chatmeldinger. Se nedenfor for den komplette HTML av brukergrensesnittet vårt. Ta en titt på kommentarene i kommentarfeltet hvis du trenger hjelp med å forstå koden.

Legg til følgende innhold i klient / home.html:

 Awesome Chat App    > mainBox

Tilkobling av vår chat

Meteor reaktivitet er et fantastisk konsept og veldig nyttig. Nå er Meteor Streams ikke en reaktiv datakilde. Men det kan fungere godt med lokale eneste samlinger for å gi reaktivitet.

Som navnet antyder, synkroniseres ikke lokale eneste samlinger dataene med serveren. Dens data er bare tilgjengelig inne i klienten (nettleserfliken).

Legg til følgende innhold i lib / namespace.js å lage vår lokale eneste samling:

hvis (Meteor.isClient) chatCollection = ny Meteor.Collection (null);

Nå er det på tide å koble opp våre maler med samlingen. La oss gjøre følgende:

Tilordne samlingen til meldinger hjelper i Chatbox mal.
Generer en verdi for bruker hjelper i chatMessage mal.
Når Send chat knappen er klikket, legg til den skrevet chatmeldingen i samlingen.

Legg til følgende innhold til klient / ui.js:

// tilordne samling til "meldinger" hjelper i "chatbox" -malen Template.chatBox.helpers ("meldinger": funksjon () return chatCollection.find ();); // generere en verdi for brukerbrukeren i "chatMessage" -malen Template.chatMessage.helpers ("user": function () return this.userId;); // når 'Send Chat' klikket, legger du inn meldt chatmelding i samlingen Template.chatBox.events ("klikk #send": funksjon () var melding = $ ('# chat-melding'). ; chatCollection.insert (userId: 'me', melding: melding); $ ('# chat-melding') .val ("););

Med de ovennevnte endringene kan du chatte, men meldinger vises bare på klienten din. Så la oss overlevere resten av jobben til Meteor Streams.

La oss lage strømmen

Vi lager strømmen på både klienten og serveren (med samme navn) og legger til nødvendige tillatelser.

Legg til følgende kode i lib / namespace.js å lage strømmen:

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

Bare å lage strømmen alene er ikke nok; Vi må gi de nødvendige tillatelsene, som tillater kunder å kommunisere gjennom det. Det finnes to typer tillatelser (les og skriv). Vi må vurdere hendelsen, brukeren og abonnementet når vi lager tillatelsen.

bruker-ID er brukeren av klienten koblet til strømmen.
subscriptionId er den unike identifikatoren opprettet for hver klient som er koblet til strømmen.

For vår chat-app, må vi gi alle som bruker appen full lese og skrive tilgang til chatte begivenhet. På denne måten kan klienter bruke den til å sende og motta chatmeldinger.

Legg til følgende kode til server / permissions.js:

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

Koble strømmen med brukergrensesnittet

Nå som vi har en fullt fungerende strøm, la oss koble den til brukergrensesnittet slik at andre kan se meldingene du sender.

Det første vi må gjøre er å legge til våre chatmeldinger til strømmen, når vi klikker på Send chat knapp. For det må vi endre koden knyttet til Send chat knappens klikkhendelse (klikk #send), som følger (i klient / ui.js):

Template.chatBox.events ("click #send": funksjon () var melding = $ ('# chat-melding') .val (); chatCollection.insert (userId: 'me', melding: melding) ; $ ('# chat-melding') .val ("); // == HER KOMMER FORNYTTET == // legg til meldingen til strømmen chatStream.emit (" chat ", melding););

Da må vi lytte til strømmen for chatte hendelse og legg til meldingen til chatCollection som blir gjengitt i brukergrensesnittet, reaktivt. Legg til følgende kode i klient / ui.js fil:

chatStream.on (chat), funksjon (melding) chatCollection.insert (userId: this.userId, // dette er brukeren av avsenderens abonnementId: this.subscriptionId, // dette er abonnementet til avsendermeldingen: budskap ); );

Nå må vi endre logikken som genererer verdien for bruker hjelper i chatMessage mal som følger:

Loggført bruker - bruker-
Anonym bruker - anonym-

Endre koden for bruker hjelper i chatMessage mal for å reflektere de ovennevnte endringene (i klient / ui.js):

Template.chatMessage.helpers ("bruker": funksjon () var nickname = (this.userId)? 'User-' + this.userId: 'anonym-' + this.subscriptionId; return nickname;);

Viser brukernavnet i stedet for `bruker-ID`

Viser bare bruker-ID er ikke veldig nyttig. Så la oss endre den for å vise det faktiske brukernavnet. Her bruker vi Meteor Pub / Sub for å få brukernavnet for en gitt brukerId.

Først av alt lar vi konfigurere meteorkontoer for å godta brukernavnet når du oppretter brukeren. Legg til følgende kode til klient / users.js:

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

La oss da lage publikasjonen for å få brukeren. Legg til følgende kode til server / users.js. Den returnerer bare brukernavnet for en gitt brukerId.

Meteor.publish ("brukerinfo", funksjon (id) return Meteor.users.find (_ id: id, felt: brukernavn: 1;;

Nå må vi opprette et abonnement på klienten for hver bruker vi er interessert i. Vi gjør dette innenfor en metode. I tillegg, etter at vi har fått brukernavnet, må det tildeles en sesjonsvariabel. Så kan vi bruke sesjonsvariabelen inne i bruker hjelper til å få brukernavnet reaktivt.

Legg til følgende kode i klient / users.js:

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

Endelig, la oss endre bruker hjelper i chatMessage mal for å få brukernavnet fra økten (i klient / ui.js):

Template.chatMessage.helpers ("bruker": funksjon () hvis (this.userId == 'me') return this.userId; annet hvis (dette.brukerId) getUsername (this.userId); returnere sesjon .get ('user-' + this.userId); else return 'anonymous' '+ this.subscriptionId;);

Filtrere ut dårlige ord

Vår chat app vil sørge for å skjule noen profanity. Hvis noen prøver å sende en melding med noen dårlige ord, må vi filtrere dem ut. Meteor Stream har en funksjon som kalles filtre, som er designet for dette. La oss se hvordan vi kan filtrere ut ordet lure fra en hvilken som helst chatmelding.

Legg til følgende kode i server / filters.js:

chatStream.addFilter (funksjon (eventName, args) if (eventName == 'chat') var melding = args [0]; hvis (melding) message = message.replace (/ idiot / ig, '**** '); returnere [melding]; else return args;);

Ta gjerne med i dine egne filtre.

Vår chat-app er nå fullført. Du kan se en liveversjon av appen på http://streams-chat.meteor.com. I tillegg er kildekoden for appen tilgjengelig på Github.

Konklusjon

I denne opplæringen bygget vi et chatprogram ved hjelp av lokale eneste samlinger for å legge til reaktivitet og brukt meteor Pub / Sub for å få brukernavnet til en bruker. Forhåpentligvis kan du se hvor fint Meteor Streams kan fungere med eksisterende Meteor-funksjonalitet. Likevel, dette er bare en introduksjon til Meteor Streams, for ekstra ressurser, sjekk ut de følgende linkene:

Innføring av Meteor Streams - En artikkel om MeteorHacks.
Meteor Streams Dokumentasjon.
Eksempelprogrammer.

Kode