Placa de colaboración AngularJS con Socket.io

Contenido

• 01. El servidor
• 02. Los huesos desnudos
• 03. Declare sus dependencias
• 04. Conectar Socket.io
• 05. ¡Arranque sus motores!
• 06. Algunos pensamientos sinceros antes de seguir adelante
• 07. El cliente
• 08. Los huesos desnudos
• 09. Crear una nota adhesiva
• 10. Visualización de notas adhesivas
• 11.Eliminar una nota adhesiva
• 12. Actualizar una nota adhesiva
• 13. Mover una nota adhesiva
• 14. La bonificación
• 15. Conclusión
• ¿Me gusto esto? ¡Lee esto!

• Conocimientos necesarios: JavaScript intermedio
• Requiere: Node.js, NPM
• Tiempo del proyecto: 2 horas

AngularJS es particularmente adecuado para crear aplicaciones ricas del lado del cliente en el navegador y, cuando agrega un poco de Socket.io a la mezcla, las cosas se ponen realmente interesantes. En este artículo vamos a construir una placa de colaboración en tiempo real que usa AngularJS para la aplicación del lado del cliente y Socket.io para compartir el estado entre todos los clientes conectados.

Cubramos un poco de limpieza antes de comenzar. Supongo que tiene un conocimiento fundamental de HTML y JavaScript, ya que no voy a cubrir todos los rincones del código. Por ejemplo, no voy a mencionar los archivos CSS y JavaScript que he incluido en el encabezado del archivo HTML porque no hay nueva información allí.

Además, te animo a que obtengas el código de mi cuenta de GitHub para seguirlo. Mi buen amigo Brian Ford también tiene una excelente semilla de Socket.io, en la que basé algunas de mis ideas originales.

Las cuatro características principales que queremos en el tablero de colaboración son la capacidad de crear una nota, leer las notas, actualizar una nota, eliminar una nota y, por diversión, mover una nota en el tablero. Sí, es correcto, nos estamos enfocando en las funciones estándar de CRUD. Creo que al enfocarnos en estas características fundamentales, habremos cubierto suficiente código para que surjan patrones para que pueda tomarlos y aplicarlos en otros lugares.

01. El servidor

Primero, comenzaremos con el servidor Node.js, ya que servirá como la base sobre la que construiremos todo lo demás.

Vamos a crear un servidor Node.js con Express y Socket.io. La razón por la que usamos Express es que proporciona un buen mecanismo para configurar un servidor de activos estáticos dentro de Node.js. Express viene con un montón de características realmente asombrosas pero, en este caso, lo usaremos para dividir la aplicación limpiamente entre el servidor y el cliente.

(Estoy operando bajo el supuesto de que tiene Node.js y NPM instalados. Una búsqueda rápida en Google le mostrará cómo instalarlos si no los tiene).

02. Los huesos desnudos

Entonces, para construir lo básico del servidor, necesitamos hacer un par de cosas para ponerlo en funcionamiento.

// app.js

// A.1
var express = require ('express'),
aplicación = express ();
server = require (’http’). createServer (aplicación),
io = require (’socket.io’). listen (servidor);

// A.2
app.configure (function () {
app.use (express.static (__ dirname + ’/ public’));
});

// A.3
servidor.Escuchar (1337);

A.1 Estamos declarando e instanciando nuestros módulos Node.js para que podamos usarlos en nuestra aplicación. Declaramos Express, instanciamos Express y luego creamos un servidor HTTP y enviamos la instancia Express a él. Y a partir de ahí estamos creando una instancia de Socket.io y diciéndole que vigile nuestra instancia de servidor.

A.2 Luego le estamos diciendo a nuestra aplicación Express que use nuestro directorio público para entregar archivos.

A.3 Arrancamos el servidor y le decimos que escuche en el puerto 1337.

Hasta ahora ha sido bastante indoloro y rápido. Creo que tenemos menos de 10 líneas en el código y ya tenemos un servidor Node.js funcional. ¡Adelante!

03. Declare sus dependencias

// paquetes.json
{
"nombre": "tablero-de-colaboración-angular",
"description": "Junta de colaboración de AngularJS",
"versión": "0.0.1-1",
"privado": verdadero,
"dependencias": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Una de las mejores características de NPM es la capacidad de declarar sus dependencias en un packages.json archivo y luego instalarlos automáticamente a través de npm install en la línea de comando.

04. Conectar Socket.io

Ya hemos definido las características principales que queremos en la aplicación y, por lo tanto, necesitamos configurar detectores de eventos Socket.io y un cierre apropiado para manejar el evento para cada operación.

En el código siguiente, notará que se trata esencialmente de una configuración de detectores de eventos y devoluciones de llamada. El primer evento es el conexión event, que usamos para conectar nuestros otros eventos en el cierre.

io.sockets.on ('conexión', función (enchufe) {
socket.on (’createNote’, function (data) {
socket.broadcast.emit ("onNoteCreated", datos);
});

socket.on (’updateNote’, function (data) {
socket.broadcast.emit ("onNoteUpdated", datos);
});

socket.on (’deleteNote’, function (data) {
socket.broadcast.emit (’onNoteDeleted’, data);
});

socket.on (’moveNote’, function (data) {
socket.broadcast.emit ("onNoteMoved", datos);
});
});

Desde aquí agregamos oyentes a createNote, actualizarNota, borrar nota y moveNote. Y en la función de devolución de llamada, simplemente estamos transmitiendo qué evento sucedió para que cualquier cliente que escuche pueda ser notificado de que sucedió el evento.

Hay algunas cosas que vale la pena señalar sobre las funciones de devolución de llamada en los controladores de eventos individuales. Uno, si desea enviar un evento a todos los demás menos al cliente que emitió el evento, inserte transmisión antes de emitir Llamada de función. En segundo lugar, simplemente estamos pasando la carga útil del evento a las partes interesadas para que puedan procesarlo como mejor les parezca.

05. ¡Arranque sus motores!

Ahora que definimos nuestras dependencias y configuramos nuestra aplicación Node.js con los poderes Express y Socket.io, es bastante simple inicializar el servidor Node.js.

Primero instalas tus dependencias de Node.js así:

npm install

Y luego inicias el servidor así:

nodo app.js

¡Y entonces! Accede a esta dirección en tu navegador. ¡Bam!

06. Algunos pensamientos sinceros antes de seguir adelante

Soy principalmente un desarrollador de frontend e inicialmente me sentí un poco intimidado al conectar un servidor Node.js a mi aplicación. La parte de AngularJS fue muy sencilla, pero ¿JavaScript del lado del servidor? Pon en cola la música espeluznante de una película de terror.

Pero, me quedé absolutamente anonadado al descubrir que podía configurar un servidor web estático en solo unas pocas líneas de código y en unas pocas líneas más usar Socket.io para manejar todos los eventos entre los navegadores. ¡Y seguía siendo solo JavaScript! En aras de la puntualidad, solo cubrimos algunas características, pero espero que al final del artículo veas que es fácil nadar y que la parte más profunda de la piscina no da tanto miedo.

07. El cliente

Ahora que tenemos una base sólida en nuestro servidor, pasemos a mi parte favorita: ¡el cliente! Vamos a utilizar AngularJS, jQueryUI para la parte arrastrable y Twitter Bootstrap para una base de estilo.

08. Los huesos desnudos

Como una cuestión de preferencia personal, cuando inicio una nueva aplicación AngularJS, me gusta definir rápidamente lo mínimo que sé que voy a necesitar para comenzar y luego comenzar a repetirlo lo más rápido posible.

Cada aplicación de AngularJS debe iniciarse con al menos un controlador presente, por lo que generalmente es aquí donde siempre comienzo.

Para arrancar automáticamente la aplicación, simplemente debe agregar ng-app al nodo HTML en el que desea que viva la aplicación. La mayoría de las veces, agregarlo a la etiqueta HTML será perfectamente aceptable. También agregué un atributo a ng-app para decirle que quiero usar el aplicación módulo, que definiré en un momento.

// public / index.html
html ng-app = "aplicación">

Sé que voy a necesitar al menos un controlador, así que lo llamaré usando ng-controller y asignándole una propiedad de MainCtrl.

body ng-controller = "MainCtrl"> / body>

Así que ahora estamos pendientes de un módulo llamado aplicación y un controlador llamado MainCtrl. Sigamos adelante y creámoslos ahora.

Crear un módulo es bastante sencillo. Lo defines llamando angular.module y darle un nombre. Para referencia futura, el segundo parámetro de una matriz vacía es donde puede inyectar submódulos para usar en la aplicación. Está fuera del alcance de este tutorial, pero es útil cuando su aplicación comienza a crecer en complejidad y necesidades.

// public / js / collab.js
var app = angular.module (’app’, []);

Vamos a declarar algunos marcadores de posición vacíos en el aplicación módulo comenzando con el MainCtrl debajo.Completaremos todo esto más adelante, pero quería ilustrar la estructura básica desde el principio.

app.controller (’MainCtrl’, function ($ scope) {});

También vamos a envolver la funcionalidad Socket.io en un enchufe service para que podamos encapsular ese objeto y no dejarlo flotando en el espacio de nombres global.

app.factory ('socket', function ($ rootScope) {});

Y mientras estamos en eso, vamos a declarar una directiva llamada nota adhesiva que vamos a utilizar para encapsular la funcionalidad de notas adhesivas en.

app.directive (’stickyNote’, function (socket) {});

Así que repasemos lo que hemos hecho hasta ahora. Hemos arrancado la aplicación usando ng-app y declaró nuestro controlador de aplicación en el HTML. También definimos el módulo de la aplicación y creamos el MainCtrl controlador, el enchufe servicio y el nota adhesiva directiva.

09. Crear una nota adhesiva

Ahora que tenemos el esqueleto de la aplicación AngularJS en su lugar, comenzaremos a desarrollar la función de creación.

app.controller (’MainCtrl’, function ($ scope, socket) {// B.1
$ scope.notes = []; // B.2

// Entrante
socket.on (’onNoteCreated’, function (data) {// B.3
$ scope.notes.push (datos);
});

// Extrovertido
$ scope.createNote = function () {// B.4
var note = {
id: nueva fecha (). getTime (),
título: "Nota nueva",
cuerpo: "Pendiente"
};

$ scope.notes.push (nota);
socket.emit ("createNote", nota);
};

B.1 AngularJS tiene una función de inyección de dependencia incorporada, por lo que estamos inyectando una $ alcance objeto y el enchufe Servicio. La $ alcance El objeto sirve como ViewModel y es básicamente un objeto JavaScript con algunos eventos incorporados para permitir el enlace de datos bidireccional.

B.2 Estamos declarando la matriz en la que usaremos para vincular la vista.

B.3 Estamos agregando un oyente para el onNoteCreated evento en el enchufe servicio y empujar la carga útil del evento en el $ scope.notes formación.

B.4 Hemos declarado un createNote método que crea un valor predeterminado Nota objeto y lo empuja en el $ scope.notes formación. También utiliza el enchufe servicio para emitir el createNote evento y pasar el nueva nota objeto a lo largo.

Entonces, ahora que tenemos un método para crear la nota, ¿cómo lo llamamos? ¡Esa es una buena pregunta! En el archivo HTML, agregamos la directiva AngularJS incorporada ng-clic al botón y luego agregue el createNote llamada al método como valor de atributo.

button id = "createButton" ng-click = "createNote ()"> Crear nota / botón>

Es hora de hacer un repaso rápido de lo que hemos hecho hasta ahora. Agregamos una matriz a la $ alcance objeto en el MainCtrl que va a contener todas las notas de la aplicación. También hemos agregado un createNote método en el $ alcance objeto para crear una nueva nota local y luego transmitir esa nota a los otros clientes a través del enchufe Servicio. También agregamos un detector de eventos en el enchufe servicio para saber cuándo otros clientes han creado una nota para que podamos agregarla a nuestra colección.

10. Visualización de notas adhesivas

Ahora tenemos la capacidad de crear un objeto de nota y compartirlo entre navegadores, pero ¿cómo lo mostramos realmente? Aquí es donde entran las directivas.

Las directivas y sus complejidades es un tema amplio, pero la versión corta es que proporcionan una forma de ampliar elementos y atributos con funciones personalizadas. Las directivas son fácilmente mi parte favorita de AngularJS porque te permite esencialmente crear un DSL (lenguaje específico de dominio) completo alrededor de tu aplicación en HTML.

Es natural que, dado que vamos a crear notas adhesivas para nuestro tablero de colaboración, debamos crear un nota adhesiva directiva. Las directivas se definen llamando al método de directiva en un módulo en el que desea declararlo y pasando un nombre y una función que devuelven un objeto de definición de directiva. El objeto de definición de directiva tiene muchas propiedades posibles que puede definir en él, pero vamos a usar solo algunas para nuestros propósitos aquí.

Le recomiendo que consulte la documentación de AngularJS para ver las listas completas de propiedades que puede definir en el objeto de definición de directiva.

app.directive (’stickyNote’, function (socket) {
var linker = function (alcance, elemento, atributos) {};

var controller = function ($ scope) {};

regreso {
restringir: 'A', // C.1
enlace: enlazador, // C.2
controlador: controlador, // C.3
alcance: {// C.4
nota: ’=’,
ondelete: ’&’
}
};
});

C.1 Puede restringir su directiva a un cierto tipo de elemento HTML. Los dos más comunes son elemento o atributo, que declaras usando mi y A respectivamente. También puede restringirlo a una clase CSS o un comentario, pero estos no son tan comunes.

C.2 La función de enlace es donde pones todo tu código de manipulación DOM. Hay algunas excepciones que he encontrado, pero esto siempre es cierto (al menos el 99 por ciento de las veces). Esta es una regla básica fundamental de AngularJS y es por eso que la he enfatizado.

C.3 La función del controlador funciona igual que el controlador principal que definimos para la aplicación, pero el $ alcance El objeto que estamos pasando es específico del elemento DOM en el que vive la directiva.

C.4 AngularJS tiene un concepto de alcance aislado, que le permite definir explícitamente cómo se comunica el alcance de una directiva con el mundo exterior. Si no hubiéramos declarado el alcance, la directiva se habría heredado implícitamente del alcance principal con una relación padre-hijo. En muchos casos, esto no es óptimo. Al aislar el alcance, mitigamos las posibilidades de que el mundo exterior pueda afectar de manera adversa e inadvertida el estado de su directiva.

He declarado enlace de datos bidireccional para Nota con el = símbolo y una expresión vinculante a ondelete con el & símbolo. Lea la documentación de AngularJS para obtener una explicación completa del alcance aislado, ya que es uno de los temas más complicados del marco.

Así que agreguemos una nota adhesiva al DOM.

Como cualquier buen marco, AngularJS viene con algunas características realmente geniales desde el primer momento. Una de las funciones más útiles es ng-repeat. Esta directiva AngularJS le permite pasar una matriz de objetos y duplica cualquier etiqueta en la que se encuentre tantas veces como elementos haya en la matriz. En el siguiente caso, estamos iterando sobre el notas matriz y duplicando el div elemento y sus hijos para la longitud del notas formación.

div sticky-note ng-repeat = "nota en notas" note = "nota" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (nota)"
> {{note.body}} / textarea>
/ div>

La belleza de ng-repeat es que está vinculado a cualquier matriz que pase y, cuando agrega un elemento a la matriz, su elemento DOM se actualizará automáticamente. Puede llevar esto un paso más allá y repetir no solo los elementos DOM estándar, sino también otras directivas personalizadas. Es por eso que ves nota adhesiva como atributo del elemento.

Hay otros dos bits de código personalizado que deben aclararse. Hemos aislado el alcance en el notas adhesivas directiva sobre dos propiedades. El primero es el alcance aislado definido vinculante en el Nota propiedad. Esto significa que siempre que el objeto de nota cambie en el ámbito principal, actualizará automáticamente el objeto de nota correspondiente en la directiva y viceversa. El otro ámbito aislado definido está en el ondelete atributo. Lo que esto significa es que cuando ondelete se llama en la directiva, llamará a cualquier expresión que esté en el ondelete atributo en el elemento DOM que instancia la directiva.

Cuando se crea una instancia de una directiva, se agrega al DOM y se llama a la función de enlace. Esta es una oportunidad perfecta para establecer algunas propiedades DOM predeterminadas en el elemento. El parámetro del elemento que estamos pasando es en realidad un objeto jQuery y, por lo tanto, podemos realizar operaciones jQuery en él.

(AngularJS en realidad viene con un subconjunto de jQuery integrado, pero si ya ha incluido la versión completa de jQuery, AngularJS lo aceptará).

app.directive (’stickyNote’, function (socket) {
var linker = function (alcance, elemento, atributos) {
// Alguna iniciación de DOM para que sea agradable
element.css ("izquierda", "10px");
element.css ("top", "50px");
element.hide (). fadeIn ();
};
});

En el código anterior, simplemente colocamos la nota adhesiva en el escenario y la atenuamos.

11.Eliminar una nota adhesiva

Entonces, ahora que podemos agregar y mostrar una nota adhesiva, es hora de eliminar las notas adhesivas. La creación y eliminación de notas adhesivas es cuestión de agregar y eliminar elementos de la matriz a la que están vinculadas las notas. Esta es la responsabilidad del alcance principal para mantener esa matriz, por lo que originamos la solicitud de eliminación desde dentro de la directiva, pero dejamos que el alcance principal haga el trabajo pesado real.

Es por eso que nos tomamos la molestia de crear un alcance aislado definido por expresión en la directiva: para que la directiva pudiera recibir el evento de eliminación internamente y pasarlo a su padre para su procesamiento.

Observe el HTML dentro de la directiva.

button type = "button" ng-click = "deleteNote (note.id)"> × / botón>

Lo siguiente que voy a decir puede parecer un largo camino, pero recuerde que estamos del mismo lado y tendrá sentido después de que lo explique. Cuando se hace clic en el botón en la esquina superior derecha de la nota adhesiva, estamos llamando borrar nota en el controlador de la directiva y pasando el note.id valor. El controlador luego llama ondelete, que luego ejecuta cualquier expresión que le conectemos. ¿Hasta aquí todo bien? Estamos llamando a un método local en el controlador que luego lo transfiere llamando a cualquier expresión definida en el ámbito aislado. La expresión que se llama al padre simplemente se llama borrar nota también.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ scope) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
yo hice
});
};
};

regreso {
restringir: "A",
enlace: enlazador,
controlador: controlador,
alcance: {
nota: ’=’,
ondelete: ’&’
}
};
});

(Cuando se utiliza un ámbito aislado definido por expresión, los parámetros se envían en un mapa de objetos).

En el ámbito principal, borrar nota se llama y realiza una eliminación bastante estándar utilizando el angular.forEach función de utilidad para iterar sobre la matriz de notas. Una vez que la función ha manejado su negocio local, sigue adelante y emite el evento para que el resto del mundo reaccione en consecuencia.

app.controller (’MainCtrl’, function ($ scope, socket) {
$ scope.notes = [];

// Entrante
socket.on (’onNoteDeleted’, function (data) {
$ scope.deleteNote (data.id);
});

// Extrovertido
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];

angular.forEach (notas antiguas, función (nota) {
if (note.id! == id) newNotes.push (nota);
});

$ scope.notes = newNotes;
socket.emit (’deleteNote’, {id: id});
};
});

12. Actualizar una nota adhesiva

¡Estamos haciendo un progreso fantástico! A estas alturas, espero que estén empezando a ver algunos patrones que surgen de esta gira relámpago que estamos realizando. El siguiente elemento de la lista es la función de actualización.

Vamos a empezar con los elementos DOM reales y seguir hasta el servidor y volver al cliente. Primero, necesitamos saber cuándo se cambia el título o el cuerpo de la nota adhesiva. AngularJS trata los elementos del formulario como parte del modelo de datos para que pueda conectar el enlace de datos bidireccional en un instante. Para hacer esto use el ng-modelo directiva e ingrese la propiedad a la que desea vincularse. En este caso usaremos note.title y nota.cuerpo respectivamente.

Cuando alguna de estas propiedades cambia, queremos capturar esa información para transmitirla. Logramos esto con el ng-change directiva y úsela para llamar actualizarNota y pasar el propio objeto de nota. AngularJS hace una verificación sucia muy inteligente para detectar si el valor de lo que está en ng-modelo ha cambiado y luego ejecuta la expresión que está en ng-change.

input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body}} / textarea>

La ventaja de usar ng-change es que la transformación local ya ha sucedido y solo somos responsables de transmitir el mensaje. En el controlador, actualizarNota se llama y desde ahí vamos a emitir el actualizarNota evento para que nuestro servidor lo transmita a los otros clientes.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ scope) {
$ scope.updateNote = function (note) {
socket.emit ("updateNote", nota);
};
};
});

Y en el controlador de la directiva, estamos escuchando onNoteUpdated evento para saber cuándo se ha actualizado una nota de otro cliente para que podamos actualizar nuestra versión local.

var controller = function ($ scope) {
// Entrante
socket.on (’onNoteUpdated’, function (data) {
// Actualizar si es la misma nota
if (data.id == $ scope.note.id) {

$ scope.note.title = data.title;
$ scope.note.body = data.body;
}
});
};

13. Mover una nota adhesiva

En este punto, básicamente hemos dado una vuelta a la piscina infantil CRUD y ¡la vida es buena! Solo por un truco de salón para impresionar a tus amigos, agregaremos la capacidad de mover notas por la pantalla y actualizar las coordenadas en tiempo real. Que no cunda el pánico, son solo unas pocas líneas más de código. Todo este arduo trabajo dará sus frutos. ¡Prometo!

Hemos invitado a un invitado especial, jQueryUI, a la fiesta, y lo hicimos todo por los draggables. Agregar la capacidad de arrastrar una nota localmente solo requiere una línea de código. Si agregas element.draggable (); a su función de enlazador, comenzará a escuchar "Eye of the Tiger" de Survivor porque ahora puede arrastrar sus notas.

Queremos saber cuándo se ha detenido el arrastre y capturar las nuevas coordenadas para pasar. jQueryUI fue creado por personas muy inteligentes, por lo que cuando el arrastre se detiene, simplemente necesita definir una función de devolución de llamada para el evento de parada. Agarramos el note.id fuera del objeto de alcance y los valores CSS izquierdo y superior del ui objeto. Con ese conocimiento hacemos lo que hemos estado haciendo todo el tiempo: ¡emitir!

app.directive (’stickyNote’, function (socket) {
var linker = function (alcance, elemento, atributos) {
element.draggable ({
detener: función (evento, ui) {
socket.emit (’moveNote’, {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, function (data) {
// Actualizar si es la misma nota
if (data.id == scope.note.id) {
element.animate ({
izquierda: data.x,
top: data.y
});
}
});
};
});

En este punto, no debería sorprendernos que también estemos escuchando un evento relacionado con el movimiento del servicio de socket. En este caso es el onNoteMoved evento y si la nota coincide, actualizamos las propiedades de CSS superior e izquierda. ¡Bam! ¡Hecho!

14. La bonificación

Esta es una sección adicional que no incluiría si no estuviera absolutamente seguro de que podría lograrlo en menos de 10 minutos. Vamos a implementar en un servidor en vivo (todavía me sorprende lo fácil que es hacerlo).

Primero, debe registrarse para obtener una prueba gratuita de Nodejitsu. La prueba es gratuita durante 30 días, lo que es perfecto para mojarse los pies.

Una vez que haya creado su cuenta, debe instalar el paquete jitsu, lo que puede hacer desde la línea de comandos a través de $ npm instalar jitsu -g.

Luego debe iniciar sesión desde la línea de comando a través de $ jitsu iniciar sesión e ingrese sus credenciales.

Asegúrese de estar en su aplicación directamente, escriba $ jitsu desplegar y repasar las preguntas. Por lo general, dejo tanto como sea posible por defecto, lo que significa que le doy un nombre a mi aplicación pero no un subdominio, etc.

Y, queridos amigos, ¡eso es todo! Obtendrá la URL de su aplicación desde la salida del servidor una vez que se haya implementado y esté listo para funcionar.

15. Conclusión

Hemos cubierto mucho terreno de AngularJS en este artículo y espero que se haya divertido mucho en el proceso. Creo que es realmente genial lo que puedes lograr con AngularJS y Socket.io en aproximadamente 200 líneas de código.

Hubo algunas cosas que no cubrí para enfocarme en los puntos principales, pero te animo a que busques la fuente y juegues con la aplicación. Hemos construido una base sólida, pero todavía hay muchas funciones que podría agregar. ¡Hackear!

Lukas Ruebbelke es un entusiasta de la tecnología y es coautor de AngularJS in Action para Manning Publications. Lo que más le gusta hacer es entusiasmar a la gente con las nuevas tecnologías tanto como él. Dirige el Grupo de usuarios de aplicaciones web de Phoenix y ha organizado varios hackatones con sus compañeros en el crimen.

¿Me gusto esto? ¡Lee esto!

• Cómo hacer una aplicación
• Nuestras fuentes web favoritas, y no cuestan un centavo
• Descubra lo que sigue para la realidad aumentada
• Descarga texturas gratis: alta resolución y listas para usar ahora