disco.chat

No mantenido. Ver post mortem

Agregue el chat anónimo en tiempo real efímero a cualquier página web.

Descripción general

Disco.chat agrega chat anónimo en tiempo real efímero a cualquier página web. Es una mashup del chat de Twitch y el widget de chat de servicio al cliente de Intercom.

¿Por qué?

• Los editores están desesperados por nuevas formas de impulsar el compromiso/PageViews
• Reddit, Facebook y Twitter han centralizado la web (lamentablemente), pero las discusiones (es decir, los comentarios) todavía son efectivamente asíncronas en sus plataformas web principales
• Los servicios de chat como Discord han podido hacer crecer a las comunidades (algunas alrededor del contenido del editor) a través del chat en tiempo real
• Los editores tienen formas limitadas de monetizar estos recaudadores de manos y/o ser parte de la discusión

Las reglas

Chatear de forma anónima y efímera con otros lectores.

• No se recopilan datos de usuario
• Cada url es su propia sala de chat
• Los mensajes solo viven hasta que actualice la página (nota: en esta etapa de prueba experimental, los mantengo en MongoDB para su análisis, pero la idea es no almacenarlos si esto fue más allá).

Post mortem

Aunque realmente implementé esto en un artículo en el blog de mi papá, dejé de trabajar en este proyecto paralelo. Una compañía llamada Spot.im hace casi lo mismo.

Esta fue la primera vez que escribía JS de terceros, trabajando con iframes y WebSockets. Hay algunos bits de código de los que estoy particularmente orgulloso de los cuales puede encontrar útiles:

• web/sdk/disco.js Cambios de estado coordinados en la aplicación y el widget (aplicaciones reaccionadas y preactadas por separado)
• web/src/App.tsx Twitter Lite's vacío Div + FlexBox Technique para el diseño de chat

Visión / Hoja de ruta

• Agregue una animación de entrada más elegante para el widget
• Agregue un "chat con otros lectores aquí" o "unirse a la conversación" burbuja del discurso sobre el widget para que la gente sepa lo que hace esto.
• Quizás 1: 1 Chatroom-to-url no es el modelo correcto, tal vez debería haber temas como una configuración de Slack
• Agregue la capacidad de navegar y cambiar las habitaciones / URL
• Prueba de navegador. ¿Jajaja?
• Mire la cosa de IoT de AWS que podría reutilizarse como un bus de mensajes seguro para el chat
• Cree una interfaz de usuario de la editorial para administrar temas/URL/chats
• ¿Pagos?
• ¿Analítica?
• Los indicadores de escritura estarían bien.
• ¿Mover a GraphQL?

Desarrollando localmente

Estructura

La raíz del proyecto es la API en este momento. Su fuente se puede encontrar en ./src .

En ./web , encontrará la aplicación de chat de TypeScript React X y en web/sdk/disco.js , encontrará el JS de terceros. La tarea de reloj rollup (yarn sdk ), emitirá convenientemente el SDK JS en el directorio ./web/public (este es el directorio public de la aplicación Create-React-App), por lo tanto, es atendido por el servidor Webpack Dev react-scripts-ts en localhost:3000/disco.dev.js durante el desarrollo.

Instalación

yarn install && cd web && yarn install && cd .. 

Ejecutando la (s) aplicación (s)

Abra 3 pestañas de terminal ....

yarn start # 1. start the API
cd web
yarn start # 2. start the application (chat UI)
yarn sdk # 3. develop the sdk (./web/sdk/disco.js)

Puede desarrollar la aplicación de chat en localhost:3000 . Sin embargo, puede obtener la experiencia completa del usuario final yendo a localhost:5000 y localhost:5000/about durante el desarrollo. Estos sirven a las 2 páginas HTML ./public/about.html y ./public/index.html . Estos están destinados a imitar cómo el SDK es utilizado por un sitio de terceros. Siéntase libre de cambiarlos ya que desea simular más uso del mundo real.