หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

ไม่ได้รับการดูแล ดูโพสต์ mortem

ผู้ค้าปลีก

เพิ่มการแชทแบบเรียลไทม์ชั่วคราวที่ไม่ระบุชื่อในหน้าเว็บใด ๆ


ภาพรวม

Disco.Chat เพิ่มการแชทแบบเรียลไทม์แบบไม่ระบุชื่อในหน้าเว็บใด ๆ มันเป็นส่วนหนึ่งของการแชทของ Twitch และวิดเจ็ตแชทบริการลูกค้าของ Intercom

ตัวอย่าง disco.chat

ทำไม

  • สำนักพิมพ์มีความสิ้นหวังสำหรับวิธีการใหม่ในการเพิ่มการมีส่วนร่วม/การดูหน้า
  • Reddit, Facebook และ Twitter ได้รวมศูนย์เว็บ (น่าเศร้า) แต่การอภิปราย (เช่นความคิดเห็น) ยังคงเป็นแบบอะซิงโครนัสอย่างมีประสิทธิภาพบนแพลตฟอร์มเว็บหลักของพวกเขา
  • บริการแชทอย่าง Discord สามารถสร้างชุมชนได้ (บางส่วนเกี่ยวกับเนื้อหาของผู้เผยแพร่) ผ่านการแชทแบบเรียลไทม์
  • ผู้จัดพิมพ์มีวิธี จำกัด ในการสร้างรายได้จากการทำมือเหล่านี้และ/หรือเป็นส่วนหนึ่งของการอภิปราย

กฎ

แชทโดยไม่เปิดเผยตัวตนและทำให้เกิดความผิดพลาดกับผู้อ่านคนอื่น ๆ

  • ไม่มีการรวบรวมข้อมูลผู้ใช้
  • แต่ละ URL เป็นห้องสนทนาของตัวเอง
  • ข้อความจะมีชีวิตอยู่เท่านั้นจนกว่าคุณจะรีเฟรชหน้า (หมายเหตุ: ในขั้นตอนการทดสอบการทดลองนี้ฉันเก็บไว้ใน MongoDB เพื่อการวิเคราะห์ แต่ความคิดคือการไม่เก็บไว้จริงถ้าสิ่งนี้ไปต่อ)

โพสต์

แม้ว่าฉันจะปรับใช้สิ่งนี้ในบทความหนึ่งในบล็อกของพ่อ แต่ ฉันก็หยุดทำงานในโครงการด้านนี้ บริษัท ที่เรียกว่า spot.im ทำสิ่งเดียวกัน

นี่เป็นครั้งแรกที่ฉันเขียน JS ของบุคคลที่ 3 ซึ่งทำงานร่วมกับ IFRAMES และ WebSockets มีรหัสบางส่วนที่ฉันภูมิใจเป็นพิเศษซึ่งคุณอาจพบว่ามีประโยชน์:

  • web/sdk/disco.js การเปลี่ยนแปลงสถานะการเปลี่ยนแปลงทั่วทั้งแอพและวิดเจ็ต (แอพ React และ Preact แยกต่างหาก)
  • web/src/App.tsx twitter lite เทคนิค div + flexbox สำหรับเค้าโครงแชท

วิสัยทัศน์ / แผนงาน

  • เพิ่มแอนิเมชั่นทางเข้าที่มีชีวิตชีวามากขึ้นสำหรับวิดเจ็ต
  • เพิ่ม "แชทกับผู้อ่านคนอื่น ๆ ที่นี่" หรือ "เข้าร่วมการสนทนา" ฟองคำพูดเหนือวิดเจ็ตเพื่อให้ผู้คนรู้ว่าสิ่งนี้ทำอะไร
  • อาจจะเป็น 1: 1 chatroom to-url ไม่ใช่รุ่นที่ถูกต้องบางทีอาจจะมีหัวข้อเช่นการตั้งค่า Slack
  • เพิ่มความสามารถในการเรียกดูและสลับห้อง / URL
  • การทดสอบเบราว์เซอร์ ฮ่าๆ?
  • ดูสิ่งที่ IoT ของ AWS ที่สามารถ repurposed เป็นรถบัสข้อความที่ปลอดภัยสำหรับการแชท
  • สร้าง UI ของผู้เผยแพร่สำหรับการจัดการหัวข้อ/URL/แชท
  • การชำระเงิน?
  • Analytics?
  • ตัวบ่งชี้การพิมพ์จะดี
  • ย้ายไปที่ GraphQl?

พัฒนาในพื้นที่

โครงสร้าง

รากของโครงการคือ API ในขณะนี้ แหล่งที่มาสามารถพบได้ใน ./src src

ใน ./web คุณจะพบแอปพลิเคชันการแชท React X TypeScript และใน web/sdk/disco.js คุณจะพบ JS บุคคลที่สาม งาน Watch Rollup (เส้นด้าย sdk ) จะส่งออก SDK JS ไปยังไดเรกทอรี ./web/public public (นี่คือไดเรกทอรี public ของแอพ Create-react-app) ดังนั้นจึงให้บริการโดย localhost:3000/disco.dev.js Webpack Dev ของ react-scripts-ts

การติดตั้ง 

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 อย่าลังเลที่จะเปลี่ยนแปลงพวกเขาตามที่คุณต้องการจำลองการใช้งานในโลกแห่งความเป็นจริงมากขึ้น

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด