chat engine

ประกาศการคัดค้าน

ChatEngine เลิกใช้โดยไม่มีแผนสำหรับการเผยแพร่เพิ่มเติม การสนับสนุนสำหรับ ChatEngine SDK จะสิ้นสุดในวันที่ 16 กรกฎาคม 2021 หากคุณมีคำถามเกี่ยวกับ ChatEngine โปรดติดต่อเราที่ [email protected] กรุณาเยี่ยมชมผลิตภัณฑ์แชทใหม่ของเรา PubNub Chat

Pubnub ChatEngine Framework

PubNub ChatEngine เป็นเฟรมเวิร์กที่มุ่งเน้นเหตุการณ์ที่มุ่งเน้นวัตถุสำหรับการสร้างแอปพลิเคชันแชทใน JavaScript ช่วยลดเวลาในการสร้างแอปพลิเคชันแชทอย่างมากและให้ส่วนประกอบที่สำคัญเช่นตัวบ่งชี้การพิมพ์การตรวจสอบสถานะออนไลน์และประวัติข้อความออกจากกล่อง

ส่วนประกอบเซิร์ฟเวอร์แบบเรียลไทม์จัดทำโดย PubNub ChatEngine ได้รับการออกแบบให้สามารถขยายได้และรวมถึงเฟรมเวิร์กปลั๊กอินเพื่อเพิ่มคุณสมบัติใหม่ที่ง่าย

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างแอปพลิเคชันการแชทกับ PubNub โปรดดูศูนย์ทรัพยากรแชทของเรา

เอกสาร

คุณสามารถค้นหาเอกสารฉบับเต็มได้ในเว็บไซต์เอกสาร

เริ่มต้น

ข้อกำหนดเบื้องต้น

• nodejs
• twitter bootstrap
• jQuery
• ES6

การตั้งค่าบัญชี pubnub

ในการตั้งค่า ChatEngine บน PubNub เราต้องตั้งค่าคีย์ PubNub ก่อน ขั้นตอนต่อไปนี้สรุปวิธีการตั้งค่าคีย์ PubNub ด้วยตนเองเพื่อทำงานกับ SDKs ฝั่งไคลเอ็นต์ ChatEngine

ลงทะเบียนสำหรับบัญชี pubnub

หากคุณยังไม่มีบัญชีคุณสามารถสร้างได้ฟรีที่นี่

ตั้งค่าบริการ REST API โดยใช้ฟังก์ชั่น pubnub

Framework ChatEngine และ SDKs ฝั่งไคลเอ็นต์โต้ตอบกับบริการ REST API ที่ทำงานเป็นฟังก์ชั่น PubNub

คุณจะต้องตั้งค่าฟังก์ชั่นในบัญชี PubNub ของคุณก่อนที่จะใช้ SDK

ทำตามคำแนะนำการตั้งค่าเซิร์ฟเวอร์ ChatEngine

รหัสดาวน์โหลด

สร้างโครงการ NPM ใหม่

เนื่องจากเราจะติดตั้งการอ้างอิงจึงมีประโยชน์ในการสร้าง package.json ใหม่ json เพื่อติดตามแพ็คเกจทั้งหมดที่เรากำลังจะติดตั้ง

ในไดเรกทอรีโครงการของคุณเรียกใช้คำสั่งนี้เพื่อสร้างแพ็คเกจใหม่ เติมเต็มคู่มือการตั้งค่าแบบโต้ตอบและเราจะพร้อมที่จะไป

 npm init

นั่นจะสร้าง package.json ในไดเรกทอรีโครงการของคุณ

{
  "name" : " chat-engine-tutorial " ,
  "version" : " 0.0.1 " ,
  "description" : " An example PubNub ChatEngine Tutorial " ,
  "main" : " index.js " ,
  "author" : " Ian Jennings "
}

ติดตั้ง PubNub ChatEngine

เอาล่ะตอนนี้สำหรับส่วนที่คุณไม่เคยทำมาก่อน! ติดตั้ง PubNub ChatEngine โดย Running:

npm install chat-engine@latest --save

ทรัพยากรเพิ่มเติม

ปลั๊กอิน

ตรวจสอบอ่างล้างจาน JQuery Kitchen และ Sink Sink Angular เพื่อดูปลั๊กอินที่ใช้งานได้

• อัพโหลดรูปภาพ - ใช้บริการ UploadCare เพื่ออัปโหลดรูปภาพและแสดงผลในการแชท ตัวอย่าง.
• การสนับสนุน Markdown - Render Markdown ใน HTML เมื่อได้รับข้อความ ตัวอย่าง.
• ผู้ใช้ปิดเสียง - อนุญาตให้ผู้ใช้ปัจจุบันหยุดรับกิจกรรมจากผู้ใช้รายอื่น ตัวอย่าง.
• การค้นหาผู้ใช้ออนไลน์ - วิธีง่ายๆในการค้นหารายชื่อผู้ใช้ออนไลน์ในแชท ตัวอย่าง.
• ตัวบ่งชี้การพิมพ์ - ให้วิธีการสะดวกสบายที่ยิงเมื่อผู้ใช้เริ่มต้นหรือหยุดการพิมพ์ ตัวอย่าง
• ข้อความที่ยังไม่ได้อ่าน - ช่วยให้คุณสามารถทำเครื่องหมายการแชทได้ว่าอยู่ในพื้นหลังและเพิ่มขึ้นตัวนับเป็นเหตุการณ์ที่ส่งไปยังมัน ตัวอย่าง.
• การแจ้งเตือนบนเดสก์ท็อป - ใช้การแจ้งเตือน HTML5 API เพื่อส่งการอัปเดต "เครื่องปิ้งขนมปัง"
• Emoji Support - ใช้รูปภาพเป็นทางเลือกสำหรับอุปกรณ์ที่อาจยังไม่รองรับ?
• สถานะเหตุการณ์และการอ่านใบเสร็จรับเงิน - ปล่อยเหตุการณ์เพิ่มเติมเมื่อมีคนอ่านรับและ/หรืออ่านข้อความ
• การสนับสนุน Gravatar - ใช้บริการ Gravatar เพื่อสร้างอวตารตามข้อมูลสถานะผู้ใช้
• ชื่อผู้ใช้แบบสุ่ม- ปลั๊กอินที่ให้ชื่อผู้ใช้แบบสุ่มรวมกันกับสีและสัตว์

วิดีโอ

• Intro ChatEngine
• การสอน ChatEngine 5 นาที
• แชทในการสัมมนาผ่านเว็บรหัส 30 บรรทัด

บทเรียน

จาวาสคริปต์

• เริ่มต้นการสอน
• แชท - ตัวอย่างแชทง่าย ๆ "Hello World" ของ ChatEngine
• รายการออนไลน์ - ไม่มีการแชทเพียงแค่แสดงว่าใครเป็นออนไลน์ ดูอ่างล้างมือในครัวสำหรับวิธีการรวมกับแชทส่วนตัว

ตอบสนอง Native + Mobile

• React Native ตัวอย่าง-ทำด้วย create-react-app
• ตอบสนองส่วนประกอบเนทีฟ - ส่วนประกอบก่อนกำหนดสำหรับการแสดงการแชทข้อความผู้ใช้และอื่น ๆ
• การรวมเข้ากับแอพ iOS ที่มีอยู่ - คู่มือเกี่ยวกับการเพิ่มแอพ ChatEngine React Native ลงใน iOS
• การรวมเข้ากับแอพ Android ที่มีอยู่ - คู่มือเกี่ยวกับการเพิ่มแอพ CHATENTENTINE Native Native ใน Android

ตอบโต้

• React - Bare Bones React Web ตัวอย่าง

ความเต็ม

• คู่มือ Vue - คู่มือเกี่ยวกับการใช้ ChatEngine และ Vue ด้วยกัน ใช้ทรัพยากรต่อไปนี้
• ตัวอย่าง Vue - ตัวอย่าง ChatEngine Vue ที่โดดเด่นเต็มรูปแบบ
• ปลั๊กอิน Vue - ปลั๊กอิน ChatEngine สำหรับ Vue

เชิงมุม

• แอป Angular Simple - Angular "Hello World" แอพง่าย ๆ ที่ใช้ปลั๊กอินเชิงมุมแบบกำหนดเองเพื่อแสดงผลเมื่อมีการอัปเดตอะไร
• Sink Kitchen Sink - แอพสาธิตที่ใหญ่ที่สุดที่นั่นเกือบจะเป็นโคลนแชทเดสก์ท็อปที่สมบูรณ์ (Slack, Stride, Flowdock) URL และแสดงผลอย่างต่อเนื่องในแอพเดสก์ท็อปจริงพร้อมอิเล็กตรอน!

jQuery

• jQuery Simple - แอป jQuery ChatEngine "Hello World" แอพง่ายๆที่ทุกคนแชทด้วยกัน
• JQuery Kitchen Sink - ตัวอย่างใหญ่ที่ใช้คุณสมบัติ ChatEngine ส่วนใหญ่ มีรายการออนไลน์ที่วางไข่แชทใหม่เมื่อคุณคลิกที่ชื่อผู้ใช้

การรับรองความถูกต้องของบุคคลที่สาม

• เข้าสู่ระบบ Facebook - ใช้โปรไฟล์ Facebook กับ ChatEngine

nodejs + chatbot

• NodeJS chatbot - ตัวอย่างบอทที่ตอบสนองต่อข้อความและเลียนแบบการพิมพ์ ทำงานร่วมกับตัวอย่างอ่างล้างจาน JQuery โดยค่าเริ่มต้น

การพัฒนา

การโคลนนิ่ง

โคลน repos (เครื่องยนต์แชทและปลั๊กอิน)

repos ทั้งหมดควรเป็นพี่น้องกัน สิ่งนี้จำเป็นสำหรับการแสดงผลเอกสารอย่างถูกต้อง

 chat-engine
chat-engine-desktop-notifications
chat-engine-emoji
chat-engine-examples
//...

การตั้งค่าสภาพแวดล้อม

 nvm use v6

เรียกใช้ http-server จาก My /development Directory ซึ่งมี repos เครื่องยนต์แชททั้งหมด:

cd chat-engine

node server.js

โหลด http: // localhost: 8080 ในเบราว์เซอร์และนำทางไปที่/แชท-Engine-Examples/jQuery/Kitchen-Sink

การรวบรวม

เรียกใช้ gulp เพื่อรวบรวม แต่คุณควรเรียกใช้ gulp watch เพื่อรับการเปลี่ยนแปลงที่สอดคล้องกัน

การทดสอบกำลังดำเนินการ

คุณจะต้องกำหนดตัวแปรสภาพแวดล้อม PUB_KEY_0 และ SUB_KEY_0 ให้กับปุ่ม PubNub ของคุณเอง เพิ่มตัวแปรเหล่านี้ลงใน .bashrc หรือ .zshrc ของคุณ

 # pubnub chatengine keys
export PUB_KEY_0= " YOUR PUBNUB PUBLISH KEY "
export SUB_KEY_0= " YOUR PUBNUB SUBSCRIBE KEY "

จากนั้นในโฟลเดอร์รูทรัน:

 gulp test

ปล่อยแพทช์ (แชทเอ็นจิ้นและปลั๊กอิน)

 npm version patch && git push origin master --tags

สนับสนุน

• หากคุณ ต้องการความช่วยเหลือ มี คำถามทั่วไป หรือยื่น ข้อผิดพลาด ติดต่อ [email protected]