Share
Dit is 2013. Als je een webapp gaat bouwen, moet je real-time mogelijkheden toevoegen aan de app. Het is de standaard. Meteor helpt je heel goed om snel te bouwen en apps realtime te maken. Maar meteor is nauw gekoppeld aan MongoDB en het is de enige manier om real-time mogelijkheden toe te voegen. Soms is dit overdreven.
MongoDB is een perfecte match voor Meteor. Maar we hoeven MongoDB niet te gebruiken voor al onze realtime-activiteiten. Voor sommige problemen werken op messaging gebaseerde oplossingen heel goed. Het is hetzelfde probleem dat pubnub en real-time.co ook aanpakken.
Het zou geweldig zijn als we een hybride benadering van realtime konden gebruiken, in Meteor, waarbij we de op de MongoDB Collection gebaseerde aanpak en een op berichten gebaseerde aanpak combineren. Zo is Meteor Streams geboren om deze op berichten gebaseerde, real-time communicatie aan Meteor toe te voegen.
Een stream is de basisbouwsteen van Meteor Streams. Het is een real-time EventEmitter. Met een Stream kunt u berichten heen en weer sturen tussen verbonden clients. Het is zeer beheersbaar en heeft een zeer goed beveiligingsmodel.
Laten we een heel eenvoudige, chatconsole gebaseerde chat-applicatie maken met Meteor Streams. We zullen eerst een nieuwe Meteor-applicatie maken:
meteor maak een hello-stream
Vervolgens installeren we Meteor Streams uit de atmosfeer:
mrt stromen toevoegen
Dan moeten we een bestand met de naam maken chat.js en plaats in de volgende code:
Accentsconagua
chatStream = nieuwe Meteor.Stream ('chat'); if (Meteor.isClient) sendChat = function (message) chatStream.emit ('message', message); console.log ('ik:' + bericht); ; chatStream.on ('message', function (message) console.log ('user:' + message);); Start uw app met:
meteoor
Je app zal nu worden uitgevoerd - http: // localhost: 3000.
Nu heb je een volledig werkende chat-app. Om te beginnen met chatten, opent u de browserconsole en gebruikt u de sendChat methode zoals hieronder getoond.
Het is nogal moeilijk om Meteor Streams te begrijpen met slechts een eenvoudig op een console gebaseerd voorbeeld, zoals het exemplaar dat we zojuist hierboven hebben gebouwd. Laten we dus een chatapp met volledige functionaliteit bouwen om bekend te raken met Meteor Streams.
De app die we maken, is een webgebaseerde chattoepassing. Iedereen kan anoniem chatten. Gebruikers kunnen zich ook registreren en chatten met hun identiteit (gebruikersnaam). Het heeft ook een filtersysteem, dat slechte woorden filtert (godslastering).
Aan het einde ziet het er ongeveer zo uit. Je kunt de broncode van github halen om het eindresultaat te zien.
Laten we een standaard Meteor-app maken en Meteor Streams uit de atmosfeer installeren. We zullen ook ondersteuning voor bootstrap en meteorekeningen toevoegen.
meteor maak geweldige-chat-app cd geweldige-chat-app meteoor verwijder onveilige autopublish meteor voeg bootstrap accounts toe-wachtwoord accounts-ui mrt voeg streams toe rm awesome-chat-app. * // verwijder automatisch toegevoegde bestanden
De gebruikersinterface voor onze app zal vrij eenvoudig zijn. We hebben een div toont de chatberichten en een invoer vak om nieuwe chatberichten in te voeren. Zie hieronder voor de volledige HTML van onze gebruikersinterface. Bekijk de inline opmerkingen als je hulp nodig hebt bij het begrijpen van de code.
Voeg de volgende inhoud toe aan client / home.html:
Geweldige chat-app > mainBoxGeweldige chat-app
loginButtons > chatBox#each messages > chatMessage / each
gebruiker: bericht
Meteor's reactiviteit is een geweldig concept en zeer nuttig. Nu is Meteor Streams geen reactieve gegevensbron. Maar het kan goed werken met alleen lokale collecties om reactiviteit te bieden.
Zoals de naam al aangeeft, synchroniseren alleen lokale collecties de gegevens niet met de server. De gegevens zijn alleen beschikbaar in de client (browsertabblad).
Voeg de volgende inhoud toe aan lib / namespace.js om onze lokale enige verzameling te maken:
if (Meteor.isClient) chatCollection = new Meteor.Collection (null);
Nu is het tijd om onze sjablonen met de collectie te verbinden. Laten we het volgende doen:
berichten helper in de chatbox sjabloon.gebruiker helper in de chatMessage sjabloon.Chat verzenden op de knop is geklikt, voeg het getypte chatbericht toe aan de verzameling.Voeg de volgende inhoud toe aan client / ui.js:
/ / collectie toewijzen aan de 'berichten' helper in 'chatbox' sjabloon Template.chatBox.helpers ("messages": function () return chatCollection.find ();); // genereer een waarde voor de hulp 'gebruiker' in de sjabloon 'chatMessage' Template.chatMessage.helpers ("user": function () return this.userId;); // klik op 'Chat verzenden' en voeg het getypte chatbericht toe aan de verzameling Template.chatBox.events ("click #send": function () var message = $ ('# chat-bericht'). val () ; chatCollection.insert (userId: 'me', message: message); $ ('# chat-bericht'). val (");); Met de bovenstaande wijzigingen kun je chatten, maar berichten worden alleen weergegeven op je client. Dus laten we de rest van de klus overhandigen aan Meteor Streams.
We maken de stream op zowel de client als de server (met dezelfde naam) en voegen de benodigde rechten toe.
Voeg de volgende code toe aan lib / namespace.js om de stream te maken:
chatStream = nieuwe Meteor.Stream ('chat-stream'); Alleen al het maken van de stream is niet genoeg; we moeten de nodige machtigingen geven, zodat klanten er via communicatie mee kunnen communiceren. Er zijn twee soorten machtigingen (lezen en schrijven). We moeten rekening houden met de gebeurtenis, het gebruikers-ID en het subscriptionId wanneer we de toestemming maken.
gebruikersnaam is de gebruikers-id van de client verbonden met de stream.subscriptionId is de unieke ID die is gemaakt voor elke client die is verbonden met de stream.Voor onze chat-app moeten we iedereen die de app gebruikt volledige lees- en schrijftoegang tot de app geven babbelen evenement. Op deze manier kunnen clients het gebruiken voor het verzenden en ontvangen van chatberichten.
Voeg de volgende code toe aan server / permissions.js:
chatStream.permissions.read (function (eventName) return eventName == 'chat';); chatStream.permissions.write (function (eventName) return eventName == 'chat';);
Nu we een volledig functionerende stream hebben, laten we deze verbinden met de gebruikersinterface zodat anderen de berichten kunnen zien die u verzendt.
Het eerste wat we moeten doen is onze chatberichten aan de stream toevoegen, wanneer we op de Chat verzenden knop. Daarvoor moeten we de code met betrekking tot de Chat verzenden kliksevent op de knop (klik op #send), als volgt (in client / ui.js):
Template.chatBox.events ("click #send": function () var message = $ ('# chat-bericht'). Val (); chatCollection.insert (userId: 'me', message: message) ; $ ('# chat-bericht'). val ("); // == HIER KOMT DE VERANDERING == // voeg het bericht toe aan de stream chatStream.emit ('chat', bericht);); Dan moeten we naar de stream luisteren voor de babbelen evenement en voeg het bericht toe aan de chatCollection die wordt weergegeven in de gebruikersinterface, reactief. Voeg de volgende code toe aan de client / ui.js het dossier:
chatStream.on ('chat', functie (bericht) chatCollection.insert (userId: this.userId, // dit is de userId van de zender subscriptionId: this.subscriptionId, // dit is de subscriptionId van het bericht van de afzender: bericht);); Nu moeten we de logica aanpassen die de waarde genereert voor de gebruiker helper in de chatMessage sjabloon als volgt:
gebruiker- anoniem- Wijzig de code voor de gebruiker helper in de chatMessage sjabloon om de bovenstaande wijzigingen te weerspiegelen (in client / ui.js):
Template.chatMessage.helpers ("user": function () var nickname = (this.userId)? 'User-' + this.userId: 'anonymous-' + this.subscriptionId; return bijnaam;); gebruikersnaam Alleen de gebruikersnaam is niet erg handig. Dus laten we het veranderen om de daadwerkelijke gebruikersnaam weer te geven. Hier gebruiken we Meteor Pub / Sub om de gebruikersnaam voor een bepaald gebruikers-ID te krijgen.
Allereerst kunnen we Meteor-accounts configureren om de gebruikersnaam te accepteren bij het maken van de gebruiker. Voeg de volgende code toe aan client / users.js:
Accounts.ui.config (passwordSignupFields: "USERNAME_ONLY");
Laten we dan de publicatie maken om de gebruiker te krijgen. Voeg de volgende code toe aan server / users.js. Het geeft gewoon de gebruikersnaam voor een bepaald gebruikers-ID.
Meteor.publish ("user-info", functie (id) return Meteor.users.find (_ id: id, fields: username: 1);); Nu moeten we een abonnement op de client maken voor elke gebruiker waarin we geïnteresseerd zijn. We doen dit binnen een methode. Nadat de gebruikersnaam is ingevoerd, moet deze bovendien aan een sessievariabele worden toegewezen. Dan kunnen we de sessievariabele binnen de gebruiker helper om de gebruikersnaam reactief te krijgen.
Voeg de volgende code toe aan client / users.js:
getUsername = function (id) Meteor.subscribe ('user-info', id); Deps.autorun (function () var user = Meteor.users.findOne (id); if (gebruiker) Session.set ('user-' + id, user.username);); Laten we tot slot de gebruiker helper in de chatMessage sjabloon om de gebruikersnaam van de sessie te krijgen (in client / ui.js):
Template.chatMessage.helpers ("user": function () if (this.userId == 'me') return this.userId; else if (this.userId) getUsername (this.userId); return-sessie .get ('user-' + this.userId); else return 'anonymous-' + this.subscriptionId;); Onze chat-app zorgt ervoor dat alle godslastering wordt verborgen. Als iemand probeert een bericht met een aantal slechte woorden te verzenden, moeten we die filteren. Meteor Stream heeft een functie genaamd filters, die hiervoor is ontworpen. Laten we eens kijken hoe we het woord kunnen filteren dwaas vanuit elk chatbericht.
Voeg de volgende code toe in server / filters.js:
chatStream.addFilter (function (eventName, args) if (eventName == 'chat') var message = args [0]; if (bericht) message = message.replace (/ fool / ig, '**** '); return [message]; else return args;);
Voeg gerust uw eigen filters toe.
Onze chat-app is nu voltooid. Je kunt een live versie van de app zien op http://streams-chat.meteor.com. Bovendien is de broncode voor de app beschikbaar op Github.
In deze zelfstudie hebben we een chattoepassing gemaakt met lokale enige collecties voor het toevoegen van reactiviteit en gebruikte Meteor Pub / Sub voor het verkrijgen van de gebruikersnaam van een gebruiker. Hopelijk kun je zien hoe mooi Meteor Streams kan werken met de bestaande Meteor-functionaliteit. Toch is dit slechts een inleiding tot Meteor Streams, voor extra bronnen, bekijk de volgende links:
