Con el crecimiento del trabajo remoto, cada vez utilizamos más editores colaborativos. Éstos son los que nos permite interactuar en tiempo real con más personas. Vamos a ver cómo están hechos y algunos ejemplos.
¿Cómo funcionan los editores colaborativos?
Técnicamente, establecen una conexión TCP full duplex utilizando la tecnología llamada WebSockets. La particularidad de esta tecnología es que permite trabajar en conjunto con el protocolo HTTP sobre los puertos 80 y 443. Esta tecnología lleva presente unos 10 años en los navegadores.
Una librería libre y open source de JavaScript implementando esta tecnología es socket.io. Con esta librería, puedes abrir fácilmente un socket en el servidor y configurar callbacks para compartir datos o respuestas a eventos. En el caso de editores colaborativos, transmiten la información que introduce cada cliente al resto.
Algunos casos de éxito
Los ejemplos más populares son los documentos de Google o los equivalentes de Office 365. Hay otros no tan populares: codeshare.io y awwapp.
Codeshare.io es una aplicación que permite editar código en grupo. Es útil para revisiones de código online o para incluso entrevistas de programación online. Está hecho con un editor de código (codemirror) utilizando WebSockets.
Awwapp es una pizarra virtual colaborativa, perfecta para discusiones remotas que necesitan soporte gráfico. Sin duda nos acercamos a una experiencia de teletrabajo similar a la oficina.
Ejemplo mínimo con NodeJS y Socket.io
He creado un ejemplo mínimo utilizando NodeJS y Socket.io para un elemento textarea HTML. Sin editores de texto. En este ejemplo, el texto se actualiza bidireccionalmente entre todas las conexiones. Fácil para ver su funcionamiento.
He subido el ejemplo a Github aquí: ejemplo mínimo de un editor colaborativo.
¡Espero que lo disfruten!