Construiți un sistem de chat folosind Rails 5 API Action Cable și ReactJS cu mai multe camere private și opțiune de chat de grup

Vă rugăm să rețineți că această postare nu este un tutorial și necesită cunoștințe despre Rails 5 ActionCable și ReactJS / Javascript.

Una dintre caracteristicile minunate care vine cu Rails 5 este ActionCable. Cu ActionCable, puteți construi toate funcțiile în timp real la care vă puteți gândi prin intermediul websocket-ului. În timp ce mă luptam să construim un sistem de chat, am găsit mai multe exemple pe „netul modului de a construi o aplicație de chat cu Rails 5 ActionCable, dar sunt extrem de simple pentru a aplica chiar și conceptul pentru orice aplicație de chat real din viață. Cred că acesta este primul exemplu de pe internet care vă arată cum să construiți un astfel de sistem de chat cu:

  • Backing API Rails 5 și un frontend ReactJS
  • Mai multe camere private
  • Orice număr pozitiv de utilizatori într-o cameră (nu doar 1–1) sau chat de grup

Sistemul de chat talentat de prietenul meu Tim Chang și pe care l-am construit are:

  1. Mai multe camere private de chat
  2. Mai mulți utilizatori de chat pe cameră
  3. Starea online / offline a fiecărui utilizator
  4. Starea în timp real „dactilografiere…”
  5. Chitanta in timp real
Așa arată rezultatul nostru final. (Totuși, acest exemplu de articol nu vă va arăta lucrările frontale)

În această scurtă postare, vă voi arăta doar elementele de bază ale numărului 1 și # 2. Vă rugăm să-mi lăsați un comentariu mai jos dacă doriți să vă arăt cum să construiți numărul 3, # 4 și # 5. Folosesc Rails 5 ca API-ul de back-end și biblioteca ReactJS din front-end.

backend

La creare, Rails va genera dosarele și fișierele canalelor în care se întâmplă toată magia în timp real :)

app / canale / application_cable / channel.rb
app / canale / application_cable / connection.rb

Autentificare

În primul rând, să autentificăm cererile de conexiune la websocket la serverul dvs. Rails din cadrul conexiunii.rb.

În funcție de bijuteria sau serviciul de autentificare pe care îl utilizați în proiectul dvs., metoda find_verified_user ar trebui modificată la nevoia dvs. Am o metodă numită valid_token? pentru a verifica accesul-token și client_id-ul transmis cu solicitarea websocket. Dacă cererea nu este autentificată, atunci va fi respinsă.

Structură de date

Ideea este foarte de bază: o cameră de chat care are mai multe mesaje, fiecare mesaj are un conținut și un expeditor. Rețineți că un mesaj nu are „receptor”. Acest lucru permite ca o cameră să aibă orice număr de utilizatori, deoarece nu trebuie să vă pese de receptorul mesajelor, deoarece toate mesajele de la expeditori vor apărea într-o cameră, indiferent de câți participanți la sală. Deci, aceasta este structura de date pe care o folosesc:

  • Conversație (cameră): are mesaje_many, utilizatori și are un ID
  • Mesaj: aparține unei conversații, are un expeditor, are conținutul textului
  • Expeditor: este un utilizator

Drept urmare, am creat 3 modele:

Acțiunea declanșează

Când un client se conectează (abonat) sau transmite un mesaj (vorbesc), backend-ul va reacționa cu acțiuni. În aplicația / canalele folderului, voi crea un fișier numit room_channel.rb.

După cum puteți vedea în comentariu, după ce un client „vorbește”, difuzarea nu se întâmplă încă; numai un mesaj nou este creat cu conținutul și datele sale. Lanțul de acțiune se întâmplă după ce mesajul este salvat în DB. Să aruncăm o privire din nou în modelul de mesaje:

after_create_commit {MessageBroadcastJob.perform_later (self)}

scalabilitate

Acest apel de apel este apelat numai după ce mesajul este creat și angajat la DB. Folosesc lucrări de fundal pentru a procesa această acțiune pentru a scala. Imaginați-vă că aveți mii de clienți care trimit mesaje în același timp (acesta este un sistem de chat, de ce nu?), Folosind jobul de fundal este o cerință aici.

Aici se întâmplă difuzarea. ActionCable va transmite sarcina utilă în camera specificată cu sarcina disponibilă.

ActionCable.server.broadcast (nume_ cameră, sarcină utilă)

Traseul cablurilor

Va trebui să adăugați ruta / cablu websocket la rutele dvs..rb pentru ca clientul dvs. să poată apela acest punct final pentru a transmite și primi mesaje.

mount ActionCable.server => '/ cablu'

Și asta este pentru partea backend! Să aruncăm o privire asupra bibliotecii front-end ReactJS.

Biblioteca clientului

Vă rugăm să rețineți că, în funcție de specificul proiectului dvs., va trebui să înțelegeți conceptul acestui cod în această bibliotecă și să-l modificați la nevoile dvs.

Mai întâi, instalați ActionCableJS prin npm.

Creați un fișier ChatConnection.js ca unul dintre serviciile din aplicația ReactJs.

Iată deci cârligul: în createRoomConnection, clientul va încerca să se conecteze cu (abonați-vă) la RoomChannel pe care l-am creat în backend, după ce va fi conectat (abonat), acesta va transmite din numele camerei ChatRoom-id (uitați-vă la room_channel. rb mai sus) Odată conectat, există 2 metode care vor fi apelate frecvent, puteți ghici care?

Ei sunt: ​​primiți și vorbiți!

Metoda primită se numește atunci când există un mesaj difuzat către client de la server, din contră, se apelează atunci când clientul transmite un mesaj către server.

Voila! Asta e. Din nou, acest lucru nu este creat pentru a fi un tutorial gata de executat, pentru că fiecare proiect este diferit, dar sper că vă oferă o idee cum să construiți un sistem de chat cu mai multe camere private de chat și mai mulți utilizatori pe cameră. Vă rugăm să mă anunțați în secțiunea de comentarii dacă aveți întrebări.