disco.chat

Не поддерживается. Смотрите после Мортема

Добавьте анонимный эфемерный чат в реальном времени на любую веб-страницу.

Обзор

Disco.chat добавляет анонимный эфемерный чат в реальном времени на любую веб-страницу. Это пюре из чата Twitch's Chat и Intercom Service Service Catt.

Почему?

• Издатели отчаянно нуждаются в новых способах повышения взаимодействия/просмотра страниц
• Reddit, Facebook и Twitter централизовали Интернет (к сожалению), но дискуссии (т.е. комментарии) по -прежнему эффективно асинхронны на своих основных веб -платформах
• Службы чата, такие как Discord, смогли выращивать сообщества (некоторые вокруг контента издателя) через чат в реальном времени
• Издатели имеют ограниченные способы монетизации этих разворотов и/или быть частью обсуждения

Правила

Потекайте анонимно и эфемерно с другими читателями.

• Пользовательские данные не собираются
• Каждый URL - это собственный чат
• Сообщения живут только до тех пор, пока вы не обновите страницу (примечание: на этом этапе экспериментального тестирования я держу их в MongoDB для анализа, но идея состоит в том, чтобы на самом деле не хранить их, если это пойдет дальше).

После Мортема

Хотя я действительно развернул это в одной статье в блоге моего отца, я перестал работать над этим побочным проектом. Компания под названием Spot.im делает почти то же самое.

Это был мой первый раз, когда я писал 3-й партийной JS, работая с Iframes и WebSockets. Есть несколько кусочков кода, которыми я особенно горжусь тем, что вы можете найти полезным:

• Координированные изменения состояния web/sdk/disco.js по всему приложению и виджету (отдельные приложения React и Preact)
• web/src/App.tsx Twitter Lite's Emply Div + Flexbox Техника для макета чата

Видение / дорожная карта

• Добавьте больше Spiffy Antimation для виджета
• Добавьте речевой пузырь «чат с другими читателями» или «присоединяйтесь к разговору» над виджетом, чтобы люди знали, что делает эта вещь
• Может быть, 1: 1 чат-комната-не подходящая модель, возможно, должны быть просто темы, такие как Slack Setup
• Добавьте возможность просматривать и переключать комнаты / URL -адреса
• Тестирование браузера. Ржу не могу?
• Посмотрите на AWS IoT -IoT, которая может быть перепрофилирована в качестве безопасного автобуса сообщений для чата
• Создайте пользовательский интерфейс издателя для управления темами/URL/чатами
• Платежи?
• Аналитика?
• Индикаторы набора текста было бы неплохо.
• Перейти в GraphQL?

Разработка локально

Структура

Корень проекта - это API на данный момент. Это источник можно найти в ./src .

В ./web вы найдете приложение Chat -Chat React X, а в web/sdk/disco.js вы найдете сторонний JS. Задача Rollup Watch (Yarn sdk ) удобно выведет SDK JS в каталог ./web/public (это public каталог приложения Create-react-app), поэтому оно обслуживается react-scripts-ts Webpack Dever Server в localhost:3000/disco.dev.js во время разработки.

Установка

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

Запуск приложения (ы)

Открыть 3 вкладка терминала ....

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)

Вы можете разработать приложение чата на localhost:3000 . Тем не менее, вы можете получить полный опыт работы с конечным пользователем, посещая localhost:5000 и localhost:5000/about во время разработки. Они обслуживают 2 HTML -страницы ./public/about.html и ./public/index.html . Они предназначены для имитации того, как SDK используется на 3-й стороне. Не стесняйтесь менять их, поскольку вы хотите имитировать более реальное использование мира.