Share
Esto es 2013. Si va a crear una aplicación web, debe agregar capacidades en tiempo real a la aplicación. Es el estándar. Meteor hace un buen trabajo ayudándote a construir rápidamente y hacer aplicaciones en tiempo real. Pero meteoro está estrechamente relacionado con MongoDB y es la única forma de agregar capacidades en tiempo real. A veces, esto es una exageración..
MongoDB es una combinación perfecta para Meteor. Pero no necesitamos usar MongoDB para todas nuestras actividades en tiempo real. Para algunos problemas, las soluciones basadas en mensajería funcionan realmente bien. Es el mismo problema que pubnub y real-time.co también están abordando.
Sería genial si pudiéramos tener un enfoque híbrido en tiempo real, en Meteor, combinando el enfoque basado en la Colección MongoDB y un enfoque basado en la Mensajería. Así nació Meteor Streams para agregar esta comunicación en tiempo real basada en mensajería a Meteor.
A Stream es el bloque de construcción básico de Meteor Streams. Es un EventEmitter en tiempo real. Con un Stream, puede pasar mensajes de ida y vuelta entre los clientes conectados. Es altamente manejable y tiene un muy buen modelo de seguridad..
Vamos a crear una aplicación de chat basada en consola de navegador muy simple con Meteor Streams. Primero crearemos una nueva aplicación Meteor:
meteorito crea hola-stream
A continuación instalamos Meteor Streams desde la atmósfera:
mrt añadir arroyos
Entonces necesitamos crear un archivo llamado chat.js y colocar en el siguiente código:
Accentsconagua
chatStream = nuevo Meteor.Stream ('chat'); if (Meteor.isClient) sendChat = function (message) chatStream.emit ('message', message); console.log ('yo:' + mensaje); ; chatStream.on ('mensaje', función (mensaje) console.log ('usuario:' + mensaje);); Comience su aplicación con:
meteorito
Tu aplicación ahora se ejecutará en - http: // localhost: 3000.
Ahora tienes una aplicación de chat completamente funcional. Para comenzar a chatear, abra la consola del navegador y use la sendChat método como se muestra a continuación.
Es un poco difícil de entender Meteor Streams con un simple ejemplo basado en consola, como el que acabamos de construir arriba. Entonces, construyamos una aplicación de chat con todas las funciones para familiarizarnos con Meteor Streams.
La aplicación que estamos creando es una aplicación de chat basada en la web. Cualquiera puede chatear anónimamente. Además, los usuarios pueden registrarse y chatear con su identidad (nombre de usuario). También tiene un sistema de filtrado, que filtra las malas palabras (blasfemias).
Al final, se verá algo así. Puede obtener el código fuente de github para ver el resultado final.
Vamos a crear una aplicación estándar de Meteor e instalar Meteor Streams desde la atmósfera. También agregaremos soporte para bootstrap y cuentas Meteor.
meteor crear una aplicación de chat impresionante cd awesome-chat-app eliminar de meteoros inseguro autopublish meteor agregar bootstrap cuentas-contraseña cuentas-ui mrt agregar transmisiones rm awesome-chat-app. * // eliminar archivos agregados automáticamente
La interfaz de usuario para nuestra aplicación será bastante simple. Tenemos una div mostrando los mensajes de chat y una entrada casilla para entrar en nuevos mensajes de chat. Vea a continuación el HTML completo de nuestra interfaz de usuario. Echa un vistazo a los comentarios en línea si necesitas ayuda para entender el código.
Agrega el siguiente contenido en cliente / home.html:
Aplicación de chat impresionante > mainBoxAplicación de chat impresionante
loginButtons > chatBox# mensajes > chatMessage / each
usuario: mensaje
La reactividad de Meteor es un concepto impresionante y muy útil. Ahora, Meteor Streams no es una fuente de datos reactiva. Pero puede funcionar bien con colecciones solo locales para proporcionar reactividad.
Como su nombre lo indica, las colecciones solo locales no sincronizan sus datos con el servidor. Sus datos solo están disponibles dentro del cliente (pestaña navegador).
Agrega el siguiente contenido en lib / namespace.js para crear nuestra colección solo local:
if (Meteor.isClient) chatCollection = new Meteor.Collection (null);
Ahora es el momento de conectar nuestras plantillas con la colección. Hagamos lo siguiente:
mensajes ayudante en el ventana de chat modelo.usuario ayudante en el mensaje de chat modelo.Enviar chat al hacer clic en el botón, agregue el mensaje de chat escrito en la colección.Agrega el siguiente contenido a cliente / ui.js:
// asigne la colección al ayudante de 'mensajes' en la plantilla Template.chatBox.helpers 'chatBox' ("messages": function () return chatCollection.find ();); // generar un valor para el ayudante 'usuario' en la plantilla 'chatMessage' Template.chatMessage.helpers ("user": function () return this.userId;); // cuando haga clic en 'Enviar chat', agregue el mensaje de chat escrito en la colección Template.chatBox.events ("click #send": function () var message = $ ('# chat-message'). val () ; chatCollection.insert (userId: 'me', mensaje: mensaje); $ ('# chat-message'). val (");); Con los cambios anteriores podrá chatear, pero los mensajes solo se muestran en su cliente. Así que vamos a entregar el resto del trabajo a Meteor Streams.
Crearemos la transmisión tanto en el cliente como en el servidor (con el mismo nombre) y agregaremos los permisos necesarios.
Agregue el siguiente código en lib / namespace.js para crear la corriente:
chatStream = nuevo Meteor.Stream ('chat-stream'); Solo crear la corriente solo no es suficiente; necesitamos dar los permisos necesarios, que permitan a los clientes comunicarse a través de él. Hay dos tipos de permisos (lectura y escritura). Necesitamos considerar el evento, el ID de usuario y el ID de suscripción cuando estamos creando el permiso.
ID de usuario es el ID de usuario del cliente conectado al flujo.ID de suscripción es el identificador único creado para cada cliente conectado al flujo.Para nuestra aplicación de chat, debemos dar a cualquier persona que use la aplicación el acceso completo de lectura y escritura al charla evento. De esta manera, los clientes pueden usarlo para enviar y recibir mensajes de chat..
Agregue el siguiente código a server / permissions.js:
chatStream.permissions.read (function (eventName) return eventName == 'chat';); chatStream.permissions.write (function (eventName) return eventName == 'chat';);
Ahora que tenemos un flujo totalmente funcional, conectémoslo a la interfaz de usuario para que otros puedan ver los mensajes que está enviando..
Lo primero que debemos hacer es agregar nuestros mensajes de chat a la secuencia, cuando hacemos clic en el Enviar chat botón. Para eso, necesitamos modificar el código relacionado con el Enviar chat evento de clic del botón (haga clic en # enviar), como sigue (en cliente / ui.js):
Template.chatBox.events ("click #send": function () var message = $ ('# chat-message'). Val (); chatCollection.insert (userId: 'me', message: message) ; $ ('# chat-message'). val ("); // == AQUÍ VIENE EL CAMBIO == // agregue el mensaje a la secuencia chatStream.emit ('chat', mensaje);); Entonces tenemos que escuchar la corriente de la charla evento y añadir el mensaje a la chatCollection que se está prestando en la interfaz de usuario, de forma reactiva. Adjunte el siguiente código al cliente / ui.js expediente:
chatStream.on ('chat', function (message) chatCollection.insert (userId: this.userId, // este es el userId del remitente SubscribeId: this.subscriptionId, // este es el suscriptor del mensaje del remitente: mensaje);); Ahora necesitamos modificar la lógica que genera el valor para el usuario ayudante en el mensaje de chat plantilla de la siguiente manera:
usuario- anónimo- Modificar el código para el usuario ayudante en el mensaje de chat plantilla para reflejar los cambios anteriores (en cliente / ui.js):
Template.chatMessage.helpers ("user": function () var nickname = (this.userId)? 'User-' + this.userId: 'anonymous-' + this.subscriptionId; return nickname;); ID de usuario Mostrando sólo el ID de usuario no es muy util Así que vamos a cambiarlo para mostrar el nombre de usuario real. Aquí, usaremos Meteor Pub / Sub para obtener el nombre de usuario de un ID de usuario determinado.
En primer lugar, configuremos las cuentas de Meteor para que acepten el nombre de usuario al crear el usuario. Agregue el siguiente código a cliente / users.js:
Accounts.ui.config (passwordSignupFields: "USERNAME_ONLY");
Entonces vamos a crear la publicación para obtener el usuario. Agregue el siguiente código a servidor / usuarios.js. Simplemente devuelve el nombre de usuario para un ID de usuario dado.
Meteor.publish ("user-info", function (id) return Meteor.users.find (_ id: id, fields: username: 1);); Ahora necesitamos crear una suscripción en el cliente para cada usuario que nos interese. Haremos esto dentro de un método. Además, después de obtener el nombre de usuario, debe asignarse a una variable de sesión. Entonces podemos usar la variable de sesión dentro de la usuario ayudante para obtener el nombre de usuario reactivamente.
Agregue el siguiente código en cliente / users.js:
getUsername = function (id) Meteor.subscribe ('user-info', id); Deps.autorun (function () var user = Meteor.users.findOne (id); if (user) Session.set ('user-' + id, user.username);); Finalmente, modifiquemos la usuario ayudante en el mensaje de chat Plantilla para obtener el nombre de usuario de la sesión (en cliente / ui.js):
Template.chatMessage.helpers ("user": function () if (this.userId == 'me') return this.userId; else if (this.userId) getUsername (this.userId); return Session .get ('user-' + this.userId); else return 'anonymous-' + this.subscriptionId;); Nuestra aplicación de chat se asegurará de ocultar cualquier blasfemia. Si alguien intenta enviar un mensaje con malas palabras, debemos filtrarlos. Meteor Stream tiene una característica llamada filtros, que está diseñada para esto. Veamos cómo podemos filtrar la palabra. tonto desde cualquier mensaje de chat.
Agregue el siguiente código en servidor / filters.js:
chatStream.addFilter (función (eventName, args) if (eventName == 'chat') var message = args [0]; if (message) message = message.replace (/ fool / ig, '**** '); return [mensaje]; else return args;);
Siéntete libre de añadir tus propios filtros..
Nuestra aplicación de chat ahora está completa. Puede ver una versión en vivo de la aplicación en http://streams-chat.meteor.com. Además, el código fuente de la aplicación está disponible en Github.
En este tutorial construimos una aplicación de chat usando colecciones locales únicas Para añadir reactividad y usar Meteor. Pub / Sub para obtener el nombre de usuario de un usuario. Esperamos que pueda ver cuán bien Meteor Streams puede funcionar con la funcionalidad existente de Meteor. Aún así, esto es solo una introducción a Meteor Streams, para recursos adicionales, echa un vistazo a los siguientes enlaces:
