disco.chat

유지되지 않았습니다. 포스트 Mortem을 참조하십시오

모든 웹 페이지에 익명의 임시 실시간 채팅을 추가하십시오.

개요

Disco.chat은 모든 웹 페이지에 익명의 임시 실시간 채팅을 추가합니다. Twitch의 채팅과 Intercom의 고객 서비스 채팅 위젯의 매시업입니다.

왜?

• 출판사는 참여/페이지 뷰를 향상시키는 새로운 방법으로 필사적입니다
• Reddit, Facebook 및 Twitter는 웹을 중앙 집중화했지만 (슬프게도) 토론 (예 : 의견)은 여전히 핵심 웹 플랫폼에서 효과적으로 비동기식입니다.
• Discord와 같은 채팅 서비스는 실시간 채팅을 통해 커뮤니티 (일부 게시자 콘텐츠 주변)를 성장시킬 수있었습니다.
• 게시자는 이러한 핸드 레이저를 수익을 창출하거나 토론의 일부가 될 수있는 방법이 제한되어 있습니다.

규칙

다른 독자들과 익명으로 그리고 임시로 채팅하십시오.

• 사용자 데이터는 수집되지 않습니다
• 각 URL은 자체 대화방입니다
• 메시지는 페이지를 새로 고칠 때까지만 살아갑니다 (참고 :이 실험 테스트 단계에서는 분석을 위해 MongoDB에 보관하지만 아이디어는 더 이상 진행되면 실제로 저장하지 않는 것입니다).

포스트 박격포

실제로 아빠의 블로그에 하나의 기사에 이것을 배포했지만 이 측면 프로젝트 작업을 중단했습니다. Spot.im이라는 회사는 거의 똑같은 일을합니다.

이것은 제 3 자 JS를 쓰고 Iframes 및 Websockets와 함께 일하는 것은 이번이 처음이었습니다. 당신이 유용한 것을 자랑스럽게 생각하는 몇 가지 코드가 있습니다.

• web/sdk/disco.js 앱과 위젯에서 조정 된 상태 변경 (별도의 React 및 PreAct 앱)
• web/src/App.tsx Twitter Lite의 빈 DIV + Flexbox 채팅 레이아웃을위한 기술

비전 / 로드맵

• 위젯에 더 많은 입구 애니메이션을 추가하십시오
• "다른 독자들과의 채팅"또는 위젯 위의 "대화에 참여"연설 버블을 추가하여 사람들 이이 일이 무엇을하는지 알 수 있습니다.
• 어쩌면 1 : 1 채팅 룸 투 셔가 올바른 모델이 아니기 때문에 슬랙 설정과 같은 주제가 있어야합니다.
• 객실 / URL을 탐색하고 전환하는 기능을 추가하십시오
• 브라우저 테스트. ㅋㅋㅋ?
• 채팅을위한 보안 메시지 버스로 용도를 변경할 수있는 AWS의 IoT를 살펴보십시오.
• 주제/URL/채팅을 관리하기위한 게시자 UI를 구축하십시오
• 지불?
• 해석학?
• 타이핑 표시기가 좋을 것입니다.
• GraphQL로 이동 하시겠습니까?

현지에서 개발

구조

프로젝트의 뿌리는 현재 API입니다. 소스는 ./src 에서 찾을 수 있습니다.

./web 에는 React X TypeScript 채팅 응용 프로그램과 web/sdk/disco.js 에서 제 3 자 JS가 있습니다. 롤업 시계 작업 (Yarn sdk )은 SDK JS를 ./web/public 디렉토리 (Create-React-App 앱의 public 디렉토리)로 편리하게 출력하므로 localhost:3000/disco.dev.js 의 react-scripts-ts 의 Webpack Dev Server가 개발 중에 제공됩니다.

설치

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 제공합니다. 이것들은 3 자 사이트에서 SDK를 어떻게 사용하는지 모방하기위한 것입니다. 더 많은 실제 사용을 시뮬레이션하려면 자유롭게 변경하십시오.