disco.chat

Nicht gepflegt. Siehe Post Mortem

Fügen Sie anonymen kurzlebigen Echtzeit-Chat zu jeder Webseite hinzu.

Überblick

Disco.chat fügt jeder Webseite einen anonymen kurzlebigen Echtzeit-Chat hinzu. Es ist ein Mashup von Twitchs Chat und Intercoms Kundendienst -Chat -Widget.

Warum?

• Verlage sind verzweifelt nach neuen Möglichkeiten, um das Engagement/die Seitenaufrufe zu steigern
• Reddit, Facebook und Twitter haben das Web (leider) zentralisiert, aber Diskussionen (dh Kommentare) sind auf ihren Kern -Webplattformen immer noch effektiv asynchron
• Chat-Dienste wie Discord konnten Gemeinschaften (einige rund um Publisher-Inhalte) über Echtzeit-Chat ausbauen
• Verlage haben nur begrenzte Möglichkeiten, um diese Handversuche zu monetarisieren und/oder Teil der Diskussion zu sein

Die Regeln

Chatten Sie anonym und ephemeral mit anderen Lesern.

• Es werden keine Benutzerdaten gesammelt
• Jede URL ist der eigene Chatraum
• Nachrichten nur live, bis Sie die Seite aktualisieren (Hinweis: In dieser experimentellen Testphase behalte ich sie zur Analyse in MongoDB, aber die Idee ist, sie nicht wirklich zu speichern, wenn dies weiter ging).

Post Mortem

Obwohl ich dies tatsächlich in einem Artikel auf dem Blog meines Vaters eingesetzt habe, habe ich aufgehört, an diesem Nebenprojekt zu arbeiten. Eine Firma namens Spot.im tut so ziemlich dasselbe.

Dies war das erste Mal, dass ich den 3. Party JS schrieb, der mit IFrames und Websockets arbeitete. Es gibt einige Codestücken, auf die ich besonders stolz bin, auf die Sie möglicherweise nützlich finden:

• web/sdk/disco.js koordinierte Zustandsänderungen in der App und das Widget (separate React- und Preact -Apps)
• web/src/App.tsx Twitter Lite leer DIV + Flexbox -Technik für Chat -Layout

Vision / Roadmap

• Fügen Sie mehr spiffy Eingangsanimation für das Widget hinzu
• Fügen Sie hier einen "Chat mit anderen Lesern" oder "By the Conversation" über dem Widget, damit die Leute wissen, was diese Sache tut
• Vielleicht ist 1: 1 Chatroom-to-URL nicht das richtige Modell, vielleicht sollte es nur Themen wie ein Slack-Setup geben
• Fügen Sie die Fähigkeit hinzu, Räume / URLs zu durchsuchen und zu wechseln
• Browser -Test. Lol?
• Schauen Sie sich das IoT -Ding von AWS an, das als sicherer Nachrichtenbus für Chat umgesetzt werden könnte
• Erstellen Sie einen Publisher -UI für die Verwaltung von Themen/URLs/Chats
• Zahlungen?
• Analyse?
• Tippindikatoren wären schön.
• Zu GraphQL wechseln?

Lokal entwickeln

Struktur

Die Wurzel des Projekts ist momentan die API. Die Quelle kann in ./src gefunden werden.

In ./web finden Sie die React X -Typscript -Chat -Anwendung und in web/sdk/disco.js werden Sie die 3. Party JS finden. Die Rollup Watch Task (YARN sdk ) wird das SDK JS bequem in das Verzeichnis ./web/public ausgeben (dies ist das public Verzeichnis der Create-React-App-App), so dass sie während der Entwicklung von react-scripts-ts während der localhost:3000/disco.dev.js serviert wird.

Installation

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

Ausführen der App (en)

Öffnen Sie 3 Klemme Registerkarten ....

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)

Sie können entweder die Chat -App bei localhost:3000 entwickeln. Sie können jedoch die vollständige Endbenutzererfahrung erhalten, indem Sie zu localhost:5000 und localhost:5000/about während der Entwicklung gehen. Diese dienen den 2 HTML -Seiten ./public/about.html und ./public/index.html . Diese sollen nachahmen, wie der SDK von einer Stelle der dritten Party verwendet wird. Fühlen Sie sich frei, sie zu ändern, wenn Sie die Nutzung der realen Welt simulieren möchten.