สร้างมาสำหรับ React

React Chat SDK และ UI Kit

สร้างการส่งข้อความแบบตัวต่อตัวและแบบกลุ่มด้วย React Chat SDK และ UI Kit ของ Tencent RTC เพิ่มรายการสนทนา ข้อความ และช่องเขียนข้อความที่เชื่อมโยงกัน แล้วปรับแต่งให้เหมาะกับผลิตภัณฑ์ของคุณ

เริ่มบทแนะนำ React ลองใช้เดโม Chat

แหล่งข้อมูลสำหรับนักพัฒนา

เอกสารและตัวอย่าง React Chat SDK

เอกสารอ้างอิง API

สำรวจ API ของ React Chat SDK รวมถึง props และ hooks ของ UI Kit

ConversationList API MessageList API API ไคลเอนต์ JavaScript

คู่มือการผสานรวม

ผสานรวม React Chat SDK และ UI Kit เข้ากับแอปพลิเคชันของคุณ

ผสานรวม React Chat เพิ่มแชทแบบสแตนด์อโลน

ตัวอย่างและซอร์สโค้ด

สำรวจซอร์สโค้ดของ React Chat SDK และตัวอย่างข้อความสินค้าในเครื่อง

ตัวอย่าง React อย่างเป็นทางการ ตัวอย่างข้อความสินค้า

แชทชุมชน React

สร้างแชทชุมชน ด้วย React Chat SDK: ข้อความส่วนตัว การสนทนากลุ่ม และสื่อที่แชร์

ลองใช้เดโม Chat ดูซอร์สโค้ด React

ข้อความผลิตภัณฑ์แบบกำหนดเอง

เชื่อมต่อข้อความแบบกำหนดเองของ React Chat SDK กับการ์ดผลิตภัณฑ์ใน แชทช่วยเหลือ.

รับตัวอย่าง React

ความสามารถด้านแชท REACT

ฟีเจอร์ของ React Chat SDK

ตั้งแต่การดำเนินการกับข้อความไปจนถึงเนื้อหาแบบกำหนดเอง เลือกความสามารถที่แอปพลิเคชันของคุณต้องการ

แชทแบบตัวต่อตัวและแบบกลุ่ม

การสนทนาแบบตัวต่อตัวและแบบกลุ่ม
ตัวอย่างข้อความล่าสุด
จำนวนการสนทนาที่ยังไม่ได้อ่าน

ประเภทข้อความแบบริช

ข้อความ รูปภาพ เสียง และวิดีโอ
การแชร์ไฟล์ในการสนทนา
เพย์โหลดผลิตภัณฑ์หรือคำสั่งซื้อแบบกำหนดเอง

ตัวควบคุมข้อความ

คัดลอก อ้างข้อความ และส่งต่อ
การเรียกคืนและการลบ
การจัดกลุ่มและการจัดแนวตามผู้ส่ง

การจัดองค์ประกอบที่ยืดหยุ่น

ตัวเลือกรูปภาพ วิดีโอ และไฟล์
การดำเนินการป้อนข้อมูลที่กำหนดค่าได้
placeholder และแถบเครื่องมือของคุณเอง

ผลิตภัณฑ์ของคุณ UI ของคุณ

ธีมสว่างและธีมมืด
ตัวอย่างการสนทนาแบบกำหนดเอง
ภาษาอังกฤษ ภาษาจีน ภาษาญี่ปุ่น ภาษาเกาหลี

ขยายได้เมื่อจำเป็น

การตอบรับการอ่าน: เปิดใช้และกำหนดค่า
Cloud Search: ปลั๊กอินแบบชำระเงิน
เสียงและวิดีโอ: เพิ่ม TUICallKit

สำรวจ React Chat Components

สำรวจอินเทอร์เฟซ ตั้งแต่รายการสนทนาไปจนถึงช่องเขียนข้อความ

รายการสนทนา

กล่องข้อความที่เหมาะกับผลิตภัณฑ์ของคุณ

แสดงข้อความล่าสุดและจำนวนที่ยังไม่ได้อ่าน เปลี่ยนคอมโพเนนต์ตัวอย่างเพื่อปรับวิธีแสดงบทสนทนาแต่ละรายการ

ConversationList API

<ConversationList
  style={{ width: 300, height: '100%' }}
  enableSearch={false}
/>

MessageList

เลือกวิธีการทำงานของข้อความ

ควบคุมการจัดแนวข้อความ จัดกลุ่มข้อความที่ต่อเนื่องกัน และเลือกการดำเนินการที่ใช้ได้กับแต่ละข้อความ

MessageList API

const actions = useMessageActions([
  'copy', 'quote', 'forward',
]);

<MessageList
  alignment="two-sided"
  messageAggregationTime={300}
  messageActionList={actions}
/>

MessageInput

สร้างเครื่องมือเขียนข้อความที่คุณต้องการ

เลือกตัวเลือกรูปภาพ ไฟล์ และวิดีโอ ตั้งค่าข้อความตัวยึด และกำหนดว่าจะแสดงปุ่มส่งหรือไม่

MessageInput API

<MessageInput
  placeholder="Message your community"
  autoFocus={false}
  hideSendButton={false}
  actions={[
    'ImagePicker', 'FilePicker', 'VideoPicker',
  ]}
/>

ChatHeader

วางการดำเนินการที่มีประโยชน์ไว้ให้เข้าถึงง่าย

เพิ่มตัวควบคุมการตั้งค่าข้างชื่อการสนทนา แล้วเชื่อมต่อกับแผงหรือการนำทางของคุณเอง

คู่มือการผสานส่วนหัว

const [showSettings, setShowSettings] = useState(false);

<ChatHeader
  ChatHeaderRight={
    <button onClick={() => setShowSettings(true)}>
      Settings
    </button>
  }
/>

รายชื่อผู้ติดต่อ

เชื่อมโยงผู้คนเข้ากับการสนทนา

รวมรายชื่อผู้ติดต่อเข้ากับรายละเอียดโปรไฟล์ สลับกลับไปยังมุมมองการสนทนาเมื่อผู้ใช้เริ่มส่งข้อความ

คู่มือการผสานรวมรายชื่อติดต่อ

<ContactList />
<ContactInfo
  onSendMessage={() => setActiveTab('conversations')}
  onEnterGroup={() => setActiveTab('conversations')}
/>

ChatSetting

จัดพื้นที่สำหรับการตั้งค่าการสนทนา

วางคอมโพเนนต์การตั้งค่าไว้ในแถบด้านข้างหรือแผงลิ้นชัก แอปพลิเคชันของคุณควบคุมเวลาเปิดและปิดแผง

คู่มือการตั้งค่าการผสานรวม

{showSettings && (
  <aside className="chat-settings">
    <ChatSetting
      onClose={() => setShowSettings(false)}
    />
  </aside>
)}

การปรับแต่ง

ปรับแต่ง UI แชท React ของคุณ

ปรับสไตล์ UI Kit ให้เข้ากับการผสานรวม React Chat SDK และเนื้อหาของคุณเอง

ธีม

ตั้งค่าธีมที่ provider และใช้ขั้นตอนการสนทนาเดียวกันขณะสลับระหว่างการแสดงผลแบบสว่างและมืด

คู่มือการผสานรวมธีม

เริ่มต้นใช้งาน

ผสานรวม React Chat SDK

01
สร้างแอปของคุณ
สร้างแอปพลิเคชัน Chat สำหรับการผสานรวม React Chat SDK
เปิดคอนโซล Chat
02
เพิ่ม React UI Kit
ติดตั้งแพ็กเกจ แล้วปรับแต่งคอมโพเนนต์ตามความต้องการของคุณ
ทำตามบทแนะนำ React
03
ส่งข้อความแรกของคุณ
ลงชื่อเข้าใช้บัญชีผู้ใช้ React Chat SDK สองบัญชีแล้วส่งข้อความทดสอบ
เชื่อมต่อผู้ใช้ของคุณ

ชุด UI แชต React

เทอร์มินัล

npm install @tencentcloud/chat-uikit-react

<UIKitProvider theme="light">
  <ConversationList />
  <Chat>
    <ChatHeader />
    <MessageList />
    <MessageInput />
  </Chat>
</UIKitProvider>

CHAT + CALL

บางการสนทนาจำเป็นต้องใช้การโทร

เชื่อมต่อเสียงและวิดีโอผ่าน TUICallKit และส่วนหัวแชท React

การโทรต้องผสานรวม TUICallKit และเปิดใช้บริการ Call โปรดตรวจสอบราคาของ Call แยกจาก Chat

ดูการผสานรวมการโทร

คำถามที่พบบ่อยเกี่ยวกับ React Chat SDK

React Chat SDK แตกต่างจาก React UI Kit อย่างไร

React Chat SDK มอบความสามารถด้านการส่งข้อความผ่าน JavaScript SDK ส่วน React UI Kit มีคอมโพเนนต์สำเร็จรูปสำหรับอินเทอร์เฟซแชท ใช้ UI Kit เพื่อเริ่มต้นด้วยคอมโพเนนต์ที่เชื่อมต่อแล้ว หรือสร้างอินเทอร์เฟซของคุณเองบน SDK พื้นฐาน

สำรวจ React UI Kit สำรวจ JavaScript SDK

ฉันสามารถปรับแต่งคอมโพเนนต์และเค้าโครงข้อความได้หรือไม่

ได้ ใช้ props และจุดขยายตามเอกสารเพื่อกำหนดการทำงานของคอมโพเนนต์ ปรับตัวอย่างการสนทนา และเรนเดอร์ข้อความแบบกำหนดเอง การเปลี่ยนแปลงที่รองรับจะแตกต่างกันตามคอมโพเนนต์ โปรดตรวจสอบ API ก่อนวางแผนเปลี่ยนทดแทน

ดูตัวเลือก MessageList สร้างข้อความแบบกำหนดเอง

ฉันควรใช้ UI Kit ใดสำหรับ React web, เว็บบนมือถือ หรือ React Native

ใช้ React UI Kit สำหรับแอปพลิเคชันบนเบราว์เซอร์ คู่มือเว็บบนมือถือ (H5) ใช้คอมโพเนนต์จากแพ็กเกจ React เช่น ConversationListH5 และ MessageListH5 สำหรับแอปพลิเคชัน iOS และ Android แบบเนทีฟที่สร้างด้วย React Native ให้ใช้ React Native UI Kit แยกต่างหากและคู่มือการตั้งค่าแบบเนทีฟ

การผสานรวมเว็บ React คู่มือเว็บบนมือถือ React สำรวจ React Native UI Kit การตั้งค่า React Native

ฉันจะผสานรวม React Chat SDK กับ Next.js หรือ SSR ได้อย่างไร

วางแผนอินเทอร์เฟซแชตแบบโต้ตอบสำหรับเบราว์เซอร์ ใน Next.js App Router ให้แยกโค้ดที่ขึ้นอยู่กับเบราว์เซอร์ไว้ใน Client Component โดย Next.js รองรับการโหลดแบบไดนามิกเฉพาะฝั่งไคลเอนต์ด้วย ssr: false สร้าง UserSig บนเซิร์ฟเวอร์ของคุณ ตรวจสอบเวอร์ชันและการขึ้นต่อกันของ UI Kit ที่ติดตั้ง และทดสอบบิลด์ production การเข้าสู่ระบบ และการนำทางก่อนเผยแพร่

การโหลด Next.js เฉพาะฝั่งไคลเอนต์ข้อกำหนดในการผสานรวม React

React UI Kit แบบโอเพนซอร์สเกี่ยวข้องกับบริการ Chat แบบโฮสต์อย่างไร

ซอร์สโค้ด React UI Kit มีให้ใช้งานบน GitHub คอมโพเนนต์การรับส่งข้อความแบบเชื่อมต่อใช้ Tencent RTC Chat และต้องมีแอปพลิเคชัน Chat พร้อมผู้ใช้ที่ผ่านการยืนยันตัวตน การมีซอร์สโค้ดคอมโพเนนต์ไม่ได้รวมบริการรับส่งข้อความแบบโฮสต์โดยไม่จำกัด การใช้บริการและการเข้าถึงฟีเจอร์เป็นไปตามแพ็กเกจ Chat ของคุณ คุณสามารถเรียกใช้ตัวอย่าง UI ในเครื่องโดยไม่ต้องเชื่อมต่อแบบสด

ซอร์สโค้ด React UI Kit รายละเอียดแพ็กเกจ Chat ประเมินค่าใช้จ่ายของบริการ

ฉันสามารถเริ่มใช้ React Chat SDK ได้ฟรีหรือไม่

Tencent RTC Chat มีแพ็กเกจฟรีสำหรับผู้ใช้ที่ใช้งานรายเดือน 1,000 ราย ตรวจสอบรายละเอียดและราคาของแพ็กเกจตามฟีเจอร์และปริมาณการใช้งานที่คุณต้องการ

ดู Free Plan ประเมินค่าใช้จ่ายของคุณ

React UI Kit รองรับการโทรด้วยเสียงและวิดีโอหรือไม่

คุณสามารถเพิ่มการโทรได้โดยผสานรวม TUICallKit และเปิดใช้บริการ Call ตัวอย่างการผสานรวม React แบบเต็มในปัจจุบันมีส่วนขยายนี้รวมอยู่ด้วย ส่วนการตั้งค่าและค่าบริการโทรยังคงแยกจากบริการรับส่งข้อความ

ดูการผสานรวมการโทร

แพ็กเกจฟรีมี Cloud Search รวมอยู่ด้วยหรือไม่

Cloud Search เป็นฟีเจอร์เสริมที่ต้องใช้ปลั๊กอิน Cloud Search โปรดตรวจสอบข้อกำหนดก่อนเปิดใช้การค้นหาในอินเทอร์เฟซแชต

อ่านคู่มือการผสาน React

จะผสานรวม Chat SDK React กับ React ได้อย่างไร?

เริ่มต้น provider ตามเอกสารและประกอบคอมโพเนนต์ที่เชื่อมต่อแล้ว จัดการ subscription และ cleanup ให้ตรงกับวงจรชีวิต React จากนั้นทดสอบการนำทางและการ mount ซ้ำในแอปจริง

จะทดสอบ Chat SDK React ก่อนเผยแพร่แอปได้อย่างไร?

ตรวจสอบการเข้าสู่ระบบ ความพร้อม SDK เหตุการณ์ส่งรับ และสถานะข้อความหลังเชื่อมต่อใหม่

จะปรับแต่งอินเทอร์เฟซของ Chat SDK React ได้อย่างไร?

ครอบคอมโพเนนต์แชตด้วย UIKitProvider แล้วตั้ง theme="light" หรือ theme="dark" คอมโพเนนต์ลูกสามารถใช้ useUIKit().setTheme เพื่อสลับรูปลักษณ์ได้ โดยต้องเรียก hook ภายใน context ของ provider สำหรับการ์ดสินค้า ให้ส่งตัวเรนเดอร์ข้อความที่ปรับแต่งเองผ่าน MessageList.messageRenderers เตรียมวิธีแสดงผลสำรองสำหรับ payload ที่ไม่รู้จัก และให้แอปของคุณจัดการการค้นข้อมูลสินค้าและขั้นตอนชำระเงิน เพราะงานเหล่านี้ไม่ใช่ฟีเจอร์ของ Chat

อ่านคู่มือการปรับแต่ง

ค้นหาความช่วยเหลือที่เหมาะกับขั้นตอนถัดไป

คำถามด้านเทคนิค

ดูตัวอย่าง React Chat SDK หรือรายงานปัญหาที่สามารถทำซ้ำได้

ดู GitHub Issues

คำถามเกี่ยวกับผลิตภัณฑ์และราคา

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

ติดต่อฝ่ายขาย

การสนทนาครั้งต่อไปของคุณเริ่มต้นที่นี่

สร้างด้วย React Chat SDK และ UI Kit เริ่มต้นฟรีสำหรับผู้ใช้ที่ใช้งานอยู่รายเดือนจำนวน 1,000 ราย

เริ่มต้นใช้งานฟรี เริ่มบทแนะนำ React