disco.chat

Non maintenu. Voir post mortem

Ajoutez un chat en temps réel éphémère anonyme à n'importe quelle page Web.

Aperçu

Disco.chat ajoute un chat en temps réel éphémère anonyme avec n'importe quelle page Web. C'est un mashup du chat de chat de Twitch et du widget de chat client d'Intercom.

Pourquoi?

• Les éditeurs sont désespérés de nouvelles façons de stimuler l'engagement / les pages vues
• Reddit, Facebook et Twitter ont centralisé le Web (malheureusement), mais les discussions (c'est-à-dire les commentaires) sont encore effectivement asynchrones sur leurs principales plateformes Web
• Des services de chat comme Discord ont pu développer des communautés (certaines autour du contenu de l'éditeur) via un chat en temps réel
• Les éditeurs ont des moyens limités de monétiser ces éleveurs à main et / ou de faire partie de la discussion

Les règles

Discuter de manière anonyme et éphémère avec d'autres lecteurs.

• Aucune donnée utilisateur n'est collectée
• Chaque URL est sa propre salle de chat
• Les messages ne vivent que jusqu'à ce que vous actualisiez la page (Remarque: Dans cette étape de test expérimentale, je les garde dans MongoDB pour l'analyse, mais l'idée est de ne pas les stocker si cela allait plus loin).

Post mortem

Bien que j'aie déployé cela sur un article sur le blog de mon père, j'ai cessé de travailler sur ce projet de côté. Une entreprise appelée Spot.im fait à peu près la même chose.

C'était la première fois que j'écrivais JS, travaillant avec Iframes et WebSockets. Il y a des morceaux de code que je suis particulièrement fier dont vous pouvez trouver utile:

• web/sdk/disco.js Modifications d'état coordonnées sur l'application et le widget (applications React et Preact séparées)
• web/src/App.tsx twitter lite's vide div + flexbox technique pour la mise en page du chat

Vision / feuille de route

• Ajoutez plus d'animation d'entrée Spiffy pour le widget
• Ajoutez un "chat avec d'autres lecteurs ici" ou "Rejoignez la conversation" Bubble de discours au-dessus du widget afin que les gens sachent ce que fait cette chose
• Peut-être que 1: 1 Chatroom-to-URL n'est pas le bon modèle, peut-être qu'il devrait y avoir des sujets comme une configuration de Slack
• Ajouter la capacité de parcourir et de changer de chambre / URL
• Test de navigateur. Mdr?
• Recherchez la chose IoT d'AWS qui pourrait être réutilisée comme un bus de message sécurisé pour le chat
• Construisez une interface utilisateur pour gérer des sujets / URL / chats
• Paiements?
• Analytique?
• Les indicateurs de frappe seraient bien.
• Passer à GraphQL?

Développer localement

Structure

La racine du projet est l'API en ce moment. Sa source peut être trouvée dans ./src .

Dans ./web , vous trouverez l'application React X TypeScript et dans web/sdk/disco.js , vous trouverez le tiers JS. La tâche Rollup Watch ( sdk YARN), publiera commodément le SDK JS dans le répertoire ./web/public (il s'agit du répertoire public de l'application Create-React-App), donc il est servi par react-scripts-ts de WEBPACK Server à localhost:3000/disco.dev.js pendant le développement.

Installation

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

Exécution de l'application (s)

Ouvert des onglets de 3 terminaux ....

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)

Vous pouvez soit développer l'application de chat sur localhost:3000 . Cependant, vous pouvez obtenir l'expérience complète de l'utilisateur final en allant à localhost:5000 et localhost:5000/about pendant le développement. Ceux-ci servent les 2 pages HTML ./public/about.html et ./public/index.html . Ceux-ci sont destinés à imiter la façon dont le SDK est utilisé par un site tiers. N'hésitez pas à les changer car vous souhaitez simuler une utilisation plus réelle du monde.