jaredpalmer / disco.chat

Add real-time ephemeral chat to any webpage.

NOT MAINTAINED. SEE POST MORTEM

Add anonymous ephemeral real-time chat to any webpage.

Overview

disco.chat adds anonymous ephemeral real-time chat to any webpage. It's a mashup of Twitch's chat and Intercom's customer service chat widget.

Why?

• Publishers are desperate for new ways to boost engagement/pageviews
• Reddit, Facebook, and Twitter have centralized the web (sadly), but discussions (i.e. comments) are still effectively asynchronous on their core web platforms
• Chat services like Discord have been able to grow communities (some around publisher content) via real-time chat
• Publishers have limited ways to monetize these hand-raisers and/or be part of the discussion

The Rules

Chat anonymously and ephemerally with other readers.

• No user data is collected
• Each URL is it's own chat room
• Messages only live until you refresh the page (note: in this experimental testing stage, I'm keeping them in mongodb for analysis, but the idea is to not actually store them if this went further).

Post mortem

Although I did actually deploy this on one article on my dad's blog, I stopped working on this side project. A company called Spot.im does pretty much the same thing.

This was my first time writing 3rd-party JS, working with iframes, and websockets. There are some bits of code that I am particularly proud of which you may find useful:

• web/sdk/disco.js Coordinated state changes across the app and the widget (separate react and preact apps)
• web/src/App.tsx Twitter Lite's empty div + flexbox technique for chat layout

Vision / Roadmap

• Add more spiffy entrance animation for the widget
• Add a "Chat with other readers here" or "Join the conversation" speech bubble above the widget so that people know what this thing does
• Maybe 1:1 chatroom-to-URL isn't the right model, perhaps there should just be topics like a Slack setup
• Add Ability to browse and switch rooms / URLs
• Browser testing. Lol?
• Look into AWS's IoT thing that could be repurposed as a secure message bus for chat
• Build out a publisher UI for managing topics/URLs/chats
• Payments?
• Analytics?
• Typing indicators would be nice.
• Move to GraphQL?

Developing Locally

Structure

The project's root is the API at the moment. It's source can be found in ./src.

In ./web, you'll find the React x TypeScript chat application and in web/sdk/disco.js, you'll find the 3rd party JS. The rollup watch task (yarn sdk), will conveniently output the sdk js into the ./web/public directory (this is the public directory of the create-react-app app), thus it is served up by react-scripts-ts's webpack dev server at localhost:3000/disco.dev.js during development.

Installation

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

Running the app(s)

Open 3 terminal tabs....

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)

You can either develop the chat app at localhost:3000. However, you can get the full end-user experience by going to localhost:5000 and localhost:5000/about during development. These serve the 2 HTML pages ./public/about.html and ./public/index.html. These are meant to mimic how the sdk is used by a 3rd-party site. Feel free to change them as you wish to simulate more real world usage.

disco.chat's Issues

[question] Twitter Lite's empty div + flexbox technique for layout

This got me intrigued - do u have any resources about this technique?

screenshot