DIBINA UNTUK React

React Chat SDK & UI Kit

Bina pemesejan satu dengan satu dan berkumpulan menggunakan React Chat SDK dan UI Kit Tencent RTC. Tambahkan senarai perbualan, mesej dan ruang karang yang saling berhubung, kemudian sesuaikannya untuk produk anda.

Mulakan Tutorial React Cuba Demo Chat

SUMBER PEMBANGUN

Dokumentasi dan Contoh React Chat SDK

Rujukan API

Terokai API React Chat SDK serta props dan hooks UI Kit.

ConversationList API MessageList API API Klien JavaScript

Panduan Integrasi

Integrasikan React Chat SDK dan UI Kit ke dalam aplikasi anda.

Integrasikan React Chat Tambah Sembang Kendiri

Contoh & Sumber

Terokai kod sumber React Chat SDK dan contoh mesej produk setempat.

Sampel React rasmi Contoh Mesej Produk

Sembang Komuniti React

Binasembang komuniti dengan React Chat SDK: mesej langsung, perbualan kumpulan dan media yang dikongsi.

Cuba Demo Chat Lihat kod sumber React

Mesej Produk Tersuai

Sambungkan mesej tersuai React Chat SDK kepada kad produk dalam sembang sokongan.

Dapatkan contoh React

KEUPAYAAN SEMBANG REACT

Ciri React Chat SDK

Daripada tindakan mesej hingga kandungan tersuai, pilih keupayaan yang diperlukan oleh aplikasi anda.

Sembang satu dengan satu dan sembang kumpulan

Perbualan satu dengan satu dan berkumpulan
Pratonton mesej terkini
Bilangan perbualan belum dibaca

Jenis mesej kaya

Teks, imej, audio dan video
Perkongsian fail dalam perbualan
Muatan produk atau pesanan tersuai

Kawalan mesej

Salin, petik dan majukan
Tindakan menarik balik dan memadam
Pengumpulan dan penjajaran mengikut pengirim

Komposisi fleksibel

Pemilih imej, video dan fail
Tindakan input boleh dikonfigurasikan
Ruang letak dan bar alat anda sendiri

Produk anda, UI anda

Tema cerah dan gelap
Pratonton perbualan tersuai
Bahasa Inggeris, Cina, Jepun, Korea

Kembangkan apabila diperlukan

Resit dibaca: dayakan dan konfigurasikan
Cloud Search: pemalam berbayar
Suara dan video: tambahkan TUICallKit

Teroka React Chat Components

Terokai antara muka, daripada senarai perbualan hingga penggubah mesej.

Senarai Perbualan

Peti masuk yang sesuai dengan produk anda

Paparkan mesej terkini dan bilangan belum dibaca. Gantikan komponen pratonton untuk mengubah cara setiap perbualan dipaparkan.

ConversationList API

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

MessageList

Pilih cara mesej berfungsi

Kawal penjajaran mesej, kumpulkan mesej berturutan dan pilih tindakan yang tersedia untuk setiap mesej.

MessageList API

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

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

MessageInput

Bina editor mesej yang anda perlukan

Pilih pemilih imej, fail dan video. Tetapkan teks ruang letak dan tentukan sama ada butang hantar dipaparkan.

MessageInput API

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

ChatHeader

Letakkan tindakan berguna dalam jangkauan

Tambahkan kawalan tetapan di sebelah tajuk perbualan. Sambungkannya kepada panel atau navigasi anda sendiri.

Panduan penyepaduan pengepala

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

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

Kenalan

Hubungkan orang kepada perbualan

Gabungkan senarai kenalan dan butiran profil. Kembali kepada paparan perbualan apabila pengguna mula menghantar mesej.

Panduan penyepaduan kenalan

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

ChatSetting

Sediakan ruang untuk tetapan perbualan

Letakkan komponen tetapan dalam bar sisi atau laci. Aplikasi anda mengawal waktu panel dibuka dan ditutup.

Panduan persediaan integrasi

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

PENYESUAIAN

Sesuaikan UI Sembang React Anda

Gayakan UI Kit agar sepadan dengan integrasi React Chat SDK dan kandungan anda sendiri.

Tema

Tetapkan tema pada provider. Kekalkan satu aliran perbualan semasa bertukar antara paparan cerah dan gelap.

Panduan integrasi tema

MULA SEKARANG

Integrasikan React Chat SDK

01
Cipta aplikasi anda
Cipta aplikasi Chat untuk integrasi React Chat SDK anda.
Buka Konsol Chat
02
Tambahkan React UI Kit
Pasang pakej. Sesuaikan komponen mengikut keperluan anda.
Ikuti Tutorial React
03
Hantar mesej pertama anda
Log masuk ke dua akaun pengguna React Chat SDK dan hantar mesej ujian.
Hubungkan Pengguna Anda

Kit UI Sembang React

Terminal

npm install @tencentcloud/chat-uikit-react

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

CHAT + CALL

Sesetengah perbualan memerlukan panggilan

Sambungkan suara dan video melalui TUICallKit dan pengepala sembang React anda.

Panggilan memerlukan integrasi TUICallKit dan pengaktifan perkhidmatan Call. Semak harga Call secara berasingan daripada Chat.

Lihat integrasi panggilan

Soalan lazim React Chat SDK

Apakah perbezaan antara React Chat SDK dengan React UI Kit?

React Chat SDK menyediakan keupayaan pemesejan melalui JavaScript SDK. React UI Kit menambahkan komponen siap guna untuk antara muka sembang. Gunakan UI Kit untuk bermula dengan komponen yang telah disambungkan, atau bina antara muka anda sendiri berasaskan SDK asas.

Terokai React UI Kit Terokai JavaScript SDK

Bolehkah saya menyesuaikan komponen dan susun atur mesej?

Ya. Gunakan props dan titik sambungan yang didokumenkan untuk mengkonfigurasi tingkah laku komponen, melaraskan pratonton perbualan dan memaparkan mesej tersuai. Perubahan yang tersedia bergantung pada komponen; semak APInya sebelum merancang penggantian.

Lihat Pilihan MessageList Bina Mesej Tersuai

UI Kit manakah yang perlu saya gunakan untuk web React, web mudah alih atau React Native?

Gunakan React UI Kit untuk aplikasi pelayar. Panduan web mudah alih (H5) menggunakan komponen seperti ConversationListH5 dan MessageListH5 daripada pakej React. Untuk aplikasi natif iOS dan Android yang dibina dengan React Native, gunakan React Native UI Kit yang berasingan serta panduan persediaan natifnya.

Integrasi web React Panduan web mudah alih React Terokai React Native UI Kit Persediaan React Native

Bagaimanakah saya mengintegrasikan React Chat SDK dengan Next.js atau SSR?

Rancang antara muka chat interaktif untuk pelayar. Dalam Next.js App Router, asingkan kod yang bergantung pada pelayar dalam Client Component; Next.js menyokong pemuatan dinamik pada klien sahaja dengan ssr: false. Jana UserSig pada pelayan anda. Semak versi dan kebergantungan UI Kit yang dipasang, kemudian uji binaan pengeluaran, log masuk dan navigasi anda sebelum dikeluarkan.

Pemuatan Next.js pada bahagian klien sahaja Keperluan integrasi React

Apakah hubungan antara React UI Kit sumber terbuka dengan perkhidmatan Chat yang dihoskan?

Kod sumber React UI Kit tersedia di GitHub. Komponen pemesejan bersambungnya menggunakan Tencent RTC Chat dan memerlukan aplikasi Chat serta pengguna yang disahkan. Ketersediaan kod sumber komponen tidak termasuk pemesejan dihoskan tanpa had: penggunaan perkhidmatan dan akses ciri tertakluk pada pelan Chat anda. Pratonton UI setempat boleh dijalankan tanpa sambungan langsung.

Kod sumber React UI Kit Butiran pelan Chat Anggarkan kos perkhidmatan

Bolehkah saya mula menggunakan React Chat SDK secara percuma?

Tencent RTC Chat menawarkan pelan percuma dengan 1,000 pengguna aktif bulanan. Semak butiran pelan dan harga untuk ciri serta penggunaan yang anda perlukan.

Lihat Free Plan Anggarkan Kos Anda

Adakah React UI Kit merangkumi panggilan suara dan video?

Anda boleh menambah fungsi panggilan dengan mengintegrasikan TUICallKit dan mendayakan perkhidmatan Call. Contoh integrasi penuh React semasa merangkumi sambungan ini; persediaan dan harga panggilan kekal berasingan daripada pemesejan.

Lihat integrasi panggilan

Adakah Cloud Search disertakan dalam pelan percuma?

Cloud Search ialah ciri nilai tambah yang memerlukan plugin Cloud Search. Semak keperluannya sebelum mengaktifkan carian dalam antara muka chat anda.

Baca Panduan Integrasi React

Bagaimanakah saya mengintegrasikan Chat SDK React dengan React?

Mulakan provider yang didokumenkan dan gabungkan komponen yang tersambung. Selaraskan langganan dan pembersihan dengan kitar hayat React, kemudian uji navigasi serta pemasangan berulang dalam aplikasi sebenar anda.

Bagaimanakah saya menguji Chat SDK React sebelum melancarkan aplikasi saya?

Semak log masuk, kesediaan SDK, acara hantar dan terima serta status mesej selepas sambungan semula.

Bagaimanakah saya menyesuaikan antara muka Chat SDK React?

Bungkus komponen sembang dalam UIKitProvider dan tetapkan theme="light" atau theme="dark". Komponen anak boleh menggunakan useUIKit().setTheme untuk menukar penampilan; hook itu mesti dijalankan dalam konteks provider. Untuk kad produk, sediakan renderer mesej tersuai melalui MessageList.messageRenderers. Sediakan paparan sandaran untuk payload yang tidak dikenali, dan biarkan aplikasi anda mengendalikan carian produk serta pembayaran tanpa menganggapnya sebagai ciri Chat.

Baca panduan penyesuaian

Dapatkan sokongan yang sesuai untuk langkah seterusnya

Soalan teknikal

Semak contoh React Chat SDK atau laporkan isu yang boleh dihasilkan semula.

Lihat GitHub Issues

Soalan tentang produk dan harga

Bincangkan aplikasi, anggaran penggunaan dan keperluan integrasi anda dengan pasukan kami.

Hubungi Bahagian Jualan

Perbualan anda yang seterusnya bermula di sini

Bina dengan React Chat SDK dan UI Kit. Mulakan secara percuma dengan 1,000 pengguna aktif bulanan.

Mulakan secara percuma Mulakan Tutorial React