disco.chat

TIDAK TERAWAT. Lihat Post Mortem

Tambahkan obrolan real-time fana anonim ke halaman web apa pun.

Ringkasan

Disco.chat menambahkan obrolan real-time fana anonim ke halaman web apa pun. Ini adalah mashup obrolan Twitch dan widget obrolan layanan pelanggan Intercom.

Mengapa?

• Penerbit sangat putus asa untuk cara -cara baru untuk meningkatkan keterlibatan/tampilan halaman
• Reddit, Facebook, dan Twitter telah memusatkan web (sayangnya), tetapi diskusi (yaitu komentar) masih secara efektif asinkron di platform web inti mereka
• Layanan obrolan seperti Discord telah dapat menumbuhkan komunitas (beberapa di sekitar konten penerbit) melalui obrolan real-time
• Penerbit memiliki cara terbatas untuk memonetisasi penggerak tangan ini dan/atau menjadi bagian dari diskusi

Aturannya

Mengobrol secara anonim dan sesaat dengan pembaca lain.

• Tidak ada data pengguna yang dikumpulkan
• Setiap URL adalah ruang obrolan sendiri
• Pesan hanya hidup sampai Anda menyegarkan halaman (Catatan: Dalam tahap pengujian eksperimental ini, saya menyimpannya di MongoDB untuk dianalisis, tetapi idenya adalah tidak benar -benar menyimpannya jika ini melangkah lebih jauh).

Post Mortem

Meskipun saya benar -benar menggunakan ini di satu artikel di blog ayah saya, saya berhenti mengerjakan proyek sampingan ini. Sebuah perusahaan bernama spot.im melakukan hal yang hampir sama.

Ini adalah pertama kalinya saya menulis JS pihak ke-3, bekerja dengan iframes, dan websockets. Ada beberapa bit kode yang sangat saya banggakan yang mungkin Anda temukan berguna:

• web/sdk/disco.js Mengubah keadaan terkoordinasi di seluruh aplikasi dan widget (Aplikasi React dan Preact terpisah)
• web/src/App.tsx Twitter Lite's Empty Div + Flexbox Teknik untuk Tata Letak Obrolan

Penglihatan / peta jalan

• Tambahkan lebih banyak animasi masuk yang keren untuk widget
• Tambahkan "obrolan dengan pembaca lain di sini" atau "bergabung dengan percakapan" gelembung ucapan di atas widget sehingga orang tahu apa yang dilakukan hal ini
• Mungkin 1: 1 obrolan-ke-url bukan model yang tepat, mungkin seharusnya ada topik seperti pengaturan yang malas
• Tambahkan kemampuan untuk menelusuri dan beralih kamar / URL
• Pengujian Browser. Tertawa terbahak-bahak?
• Lihatlah hal IoT AWS yang bisa digunakan kembali sebagai bus pesan yang aman untuk obrolan
• Bangun UI penerbit untuk mengelola topik/url/obrolan
• Pembayaran?
• Analisis?
• Indikator pengetikan akan menyenangkan.
• Pindah ke graphql?

Berkembang secara lokal

Struktur

Akar proyek adalah API saat ini. Sumbernya dapat ditemukan di ./src .

Di ./web , Anda akan menemukan aplikasi obrolan react x typescript dan di web/sdk/disco.js , Anda akan menemukan JS pihak ke -3. Rollup Watch Task (Yarn sdk ), akan dengan mudah mengeluarkan SDK JS ke direktori ./web/public (ini adalah direktori public dari aplikasi create-react-app), sehingga dilayani oleh server webpack react-scripts-ts di localhost:3000/disco.dev.js selama pengembangan.

Instalasi

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

Menjalankan aplikasi

Buka 3 Tab 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)

Anda dapat mengembangkan aplikasi obrolan di localhost:3000 . Namun, Anda bisa mendapatkan pengalaman pengguna akhir penuh dengan pergi ke localhost:5000 dan localhost:5000/about selama pengembangan. Ini melayani 2 halaman html ./public/about.html dan ./public/index.html . Ini dimaksudkan untuk meniru bagaimana SDK digunakan oleh situs pihak ke-3. Jangan ragu untuk mengubahnya sesuai keinginan Anda untuk mensimulasikan lebih banyak penggunaan dunia nyata.