Bina aplikasi sembang masa nyata dengan penolak dan vue.js

Tutorial ini membimbing anda melalui membina aplikasi sembang masa nyata menggunakan Vue.js dan perkhidmatan chatkit penolak. Kami akan memberi tumpuan kepada bahagian depan, memanfaatkan keupayaan back-end Chatkit untuk pengurusan pengguna dan penciptaan bilik.

Ciri -ciri Utama:

Multi-Channel/Sokongan Bilik.
pengesanan kehadiran anggota masa nyata.
penunjuk menaip.

Prasyarat:

npm install -g @vue/cli

Persediaan Projek:

1. Buat projek vue.js:

   vue create vue-chatkit

   Salin selepas log masuk
   Pilih Pemilihan Ciri Manual dan pilih Babel, Vuex, dan Vue Router.

2. Pasang kebergantungan:

   npm i @pusher/chatkit-client bootstrap-vue moment vue-chat-scroll vuex-persist

   Salin selepas log masuk
3. Buat struktur dan fail folder yang diperlukan (seperti yang ditunjukkan dalam imej tutorial asal). Muat turun

   dan loading.css dari loading.io dan letakkannya di loading-btn.css. src/assets/css

persediaan chatkit:

Buat contoh Chatkit di laman web Pusher.
Buat pengguna (mis., "John," "Garam," "Hunt") dan bilik (mis., "Umum," "Senjata," "Pertempuran") di Konsol Chatkit.
2. Nota
Instance Locator
3. dan URL TOKEN TOKEN URL dari Tab tab. Dayakan pembekal token ujian .

<code>VUE_APP_INSTANCE_LOCATOR=<your_instance_locator>
VUE_APP_TOKEN_URL=<your_token_url>
VUE_APP_MESSAGE_LIMIT=10</code>