Usar TogetherJS Para Implementar Entorno Colaborativo En Tiempo Real En Su Sitio Web

No se puede negar que la colaboración en tiempo real se ha convertido en una parte importante de la web moderna. Google Drive es un gran ejemplo de cómo la colaboración en tiempo real es una forma esencial para hacer un trabajo en línea en estos días. Al aplicar el mismo concepto, Mozilla Labs introdujo su propia herramienta llamada TogetherJS, una biblioteca de JavaScript basada en HTML5 para ofrecer facilidad de colaboración en tiempo real entre los usuarios.

togetherjs entorno colaborativo sitio web

TogetherJS permite a todos los usuarios ver la posición del otro ratón ó cursor, la posición y los clics. La sincronización está disponible para las formas de edición y reproducción ó pausa de videos. Para fines de comunicación, los usuarios también pueden chatear usando texto y audio.

Algo De Historia

TogetherJS comenzó como un servicio llamado towtruck. Fue lanzado por Mozilla Labs abril de 2013. Pero a medida que el servicio creció más allá de su concepto original, se decidió cambiar el nombre.

TogetherJS depende de la tecnología WebSockets para su comunicación interactiva entre los distintos navegadores de los usuarios. Hay un servidor concentrador para su aplicación central que hará repeticion de los mensajes recibidos a todos los participantes. Aquí es donde los usuarios pueden ver otro de los cursores y las posiciones de desplazamiento y clics. El servidor central predeterminado es organizado por Mozilla, pero si lo desea, también puede alojar su propio servidor central

Para las funciones de chat de audio, WebRTC es lo que se usa para tener esta funcionalidad. Si deseas conocer las tecnologías que hacen esto posible, te invitamos a conocer el resumen de estas en su pagina principal.

Como Usa TogetherJs

Cuando inicie TogetherJS, se será guiado a través de un asistente. Este asistente le ayuda con todas las características disponibles antes de empezar. Si lo prefiere puede omitir el paso que desee ;) Para esto, haremos uso del ejemplo que provee Mozilla Labs, para esto iremos al siguiente enlace. Veremos lo siguiente:

asistente de configuracion togetherjs

En el asistente de guía, configure su nombre, suba una imagen y cambiar el color de tu perfil. Esto es opcional, ya que también se puede hacer esto más adelante en el panel TogetherJS.

actualizacion de perfil en togethejs

En el lado derecho, debería ver el panel TogetherJS. En este panel, usted puede actualizar su perfil, obtener el enlace para compartir a sus colaboradores y chatear con texto o audio. Para invitar a un amigo, haga clic fácilmente en el menú «Añadir un amigo» (como se muestra más abajo), copiar el enlace y luego enviarlo a su amigo, fácil no?

invitar a un amigo entorno colaboracion togethejs

Los colaboradores que interactúen tendrán sus avatares en la parte inferior del panel. A partir de aquí, cualquier cosa que usted o sus colaboradores hagan como hacer clic, mover se sincronizará con en sus navegadores.

colaborador invitado con togetherjs

Para comunicarse con sus colaboradores, puede utilizar las funciones de chat: ya sea a base de texto o de chat basado en audio. Pero tenga en cuenta que la función de chat de audio se encuentra todavía en su fase experimental.

chat colaboradores con togetherjs

Instalación De TogetherJs

Para instalar TogetherJS, sólo tiene que añadir un par de líneas de código en el código HTML. En primer lugar, añada el siguiente fragmento de código antes de la etiqueta de cierre de body:

[html]<script src="https://togetherjs.com/togetherjs-min.js"></script>  [/html]

También puede descargar el código fuente y alojarlo en su servidor web, si deseas ;)

Eso es todo! Ahora usted tiene TogetherJS en su sitio y podrá ser usada después de recargar la página del navegador web. De cualquier manera, esto sólo funciona cuando los usuarios hacen clic en el botón. Sólo tiene que añadir el código de abajo a donde quieras:

[html]<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>  [/html]

Para conocer mas sobre configuración avanzada y otras configuraciones, por favor visite la página de la documentación.

Finalmente

TogetherJS es útil para aquellos que necesitan funciones de colaboración en su página ó proyecto, y asi mantener a los colaboradores ayudando en tiempo real en la misma pagina. El hecho de que TogetherJS permite que esta función esté disponible en cualquier lugar, ya través de múltiples navegadores, es una potente característica que podemos aprovechar.