disco.chat

Não mantido. Veja post mortem

Adicione um bate-papo efêmero em tempo real anônimo a qualquer página da web.

Visão geral

Disco.chat adiciona um bate-papo efêmero em tempo real anônimo a qualquer página da web. É um mashup do bate -papo do Twitch e o widget de bate -papo de atendimento ao cliente da Intercom.

Por que?

• Os editores estão desesperados por novas maneiras de aumentar as visualizações de engajamento/página
• Reddit, Facebook e Twitter centralizaram a Web (infelizmente), mas as discussões (ou seja, comentários) ainda são efetivamente assíncronas em suas principais plataformas da web
• Serviços de bate-papo como a Discord foram capazes de cultivar comunidades (alguns em torno do conteúdo do editor) via chat em tempo real
• Os editores têm maneiras limitadas de monetizar esses criadores de mãos e/ou fazer parte da discussão

As regras

BAT de bate -papo anonimamente e efemeralmente com outros leitores.

• Nenhum dado de usuário é coletado
• Cada URL é sua própria sala de bate -papo
• As mensagens vivem apenas até que você atualize a página (Nota: Neste estágio de teste experimental, estou mantendo -as em MongoDB para análise, mas a idéia é realmente não armazená -las se isso for mais longe).

Post mortem

Embora eu tenha implementado isso em um artigo no blog do meu pai, parei de trabalhar neste projeto. Uma empresa chamada Spot.im faz praticamente a mesma coisa.

Esta foi a primeira vez que escrevi JS de terceiros, trabalhando com iframes e websockets. Existem alguns pedaços de código que estou particularmente orgulhoso da qual você pode achar útil:

• web/sdk/disco.js Coordenou as alterações de estado em todo o aplicativo e o widget (Apps React e PREACT separados)
• web/src/App.tsx Twitter Lite Div + Flexbox Technique for Chat Layout

Visão / Roteiro

• Adicione mais animação de entrada Spiffy para o widget
• Adicione um discurso "bate -papo com outros leitores aqui" ou "participe da conversa" bolha acima do widget para que as pessoas saibam o que isso faz
• Talvez 1: 1 Chatroom-to-Url não seja o modelo certo, talvez deva haver tópicos como uma configuração de folga
• Adicione a capacidade de navegar e trocar de salas / URLs
• Teste do navegador. Lol?
• Olhe para a coisa de IoT da AWS que pode ser reaproveitada como um barramento de mensagem seguro para o chat
• Construa uma interface do usuário do editor para gerenciar tópicos/URLs/bate -papos
• Pagamentos?
• Análise?
• Os indicadores de digitação seriam bons.
• Mudar para grafql?

Desenvolvendo localmente

Estrutura

A raiz do projeto é a API no momento. Sua fonte pode ser encontrada em ./src .

Em ./web , você encontrará o aplicativo React X Typescript Chat e no web/sdk/disco.js , encontrará o JS de terceiros. A tarefa Rollup Watch (YARN sdk ), produzirá convenientemente o SDK JS para o diretório ./web/public (este é o diretório public do aplicativo Create-react-App), portanto é servido pelo servidor de desenvolvimento de webpack de localhost:3000/disco.dev.js react-scripts-ts .

Instalação

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

Executando o (s) aplicativo (s)

Abra 3 guias do 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)

Você pode desenvolver o aplicativo de bate -papo em localhost:3000 . No entanto, você pode obter a experiência completa do usuário final, indo para localhost:5000 e localhost:5000/about durante o desenvolvimento. Estes servem as 2 páginas html ./public/about.html e ./public/index.html . Eles destinam-se a imitar como o SDK é usado por um site de terceiros. Sinta -se à vontade para alterá -los, pois deseja simular mais uso do mundo real.