Izgradite chat sustav pomoću Rails 5 API akcijskog kabela i ReactJS s više privatnih soba i grupnih opcija za chat

Imajte na umu da ovaj post nije tutorial i zahtijeva znanje o prilagođenoj izgradnji biblioteke Rails 5 ActionCable i ReactJS / Javascript.

Jedna od fenomenalnih značajki koje dolazi sa tračnicama 5 je ActionCable. S ActionCableom možete izgraditi sve značajke u stvarnom vremenu koje se možete sjetiti putem websocket-a. Dok sam se borio za izgradnju chata sustava, našao sam više primjera u mreži „kako napraviti chat aplikaciju s Rails 5 ActionCable-om, ali oni su krajnje jednostavni za primjenu koncepta za bilo koju stvarnu aplikaciju za chat. Vjerujem da je ovo prvi primjer na internetu koji pokazuje kako izgraditi takav chat sustav sa:

  • Područje API-ja Rails 5 i sučelja ReactJS-a
  • Više privatnih soba
  • Bilo koji pozitivan broj korisnika u sobi (ne samo 1–1) ili u grupnom chatu

Sustav za razgovore koji sam izgradio moj talentirani prijatelj Tim Chang ima:

  1. Više privatnih chat soba
  2. Višestruki korisnici chatova po sobi
  3. Status na mreži / izvan mreže svakog korisnika
  4. Status "tipkanja ..." u stvarnom vremenu
  5. Račun za čitanje u stvarnom vremenu
Ovako izgleda naš krajnji rezultat. (Ovaj primjer primjera neće vam pokazati prednji dio rada)

U ovom kratkom postu prikazat ću vam samo osnovne stavke # 1 i # 2. Molim vas da mi ostavite komentar u nastavku ako želite da vam pokažem kako graditi # 3, # 4 i # 5. Koristim Rails 5 kao pomoćni API i biblioteku ReactJS na prednjoj strani.

Backend

Prilikom stvaranja, Rails će generirati mape kanala i datoteke u kojima se događaju sve čarolije u stvarnom vremenu :)

Aplikacija / kanali / application_cable / channel.rb
Aplikacija / kanali / application_cable / connection.rb

Ovjera

Prije svega, ovjerimo zahtjeve za povezivanje websocketom na vaš Rails poslužitelj unutar veze.rb.

Ovisno o dragulju ili usluzi provjere autentičnosti koji koristite u svom projektu, metodu find_verified_user treba izmijeniti prema vašim potrebama. Imam metodu koja se zove valid_token? za ovjeru pristupnog tokena i client_id proslijedio sa zahtjevom websocket. Ako zahtjev nije autentičan, bit će odbijen.

Struktura podataka

Ideja je vrlo osnovna: soba za razgovor koja sadrži više poruka, svaka poruka ima sadržaj i pošiljatelja. Imajte na umu da poruka nema "primatelja". To omogućava sobi bilo koji broj korisnika jer vam nije potrebno da brinete o primatelju poruka, jer će se sve poruke pošiljatelja pojaviti u sobi bez obzira na broj sudionika u sobi. Dakle, ovo je struktura podataka koju koristim:

  • Razgovor (soba): ima_brojne poruke, korisnici i ima ID
  • Poruka: pripada_razgovoru, ima pošiljatelja, tekstualni sadržaj
  • Pošiljalac: je korisnik

Kao rezultat toga, stvorio sam 3 modela:

Akcijski okidači

Kada se klijent poveže (pretplaćen) ili emitira poruku (govori), pomoćni centar će reagirati radnjama. Unutar aplikacije / kanala mape stvorit ću datoteku koja se zove room_channel.rb.

Kao što možete vidjeti u komentaru, nakon što klijent "progovori", emitiranje se još ne događa; stvara se samo nova Poruka sa svojim sadržajem i podacima. Lanac akcije događa se nakon što je poruka spremljena u DB-u. Pogledajmo ponovo model poruke:

after_create_commit {MessageBroadcastJob.perform_later (samo)}

skalabilnost

Taj povratni poziv poziva se tek nakon što je poruka kreirana i predana DB-u. Koristim pozadinske zadatke za obradu ove radnje kako bih se smanjio. Zamislite da imate na hiljade klijenata koji istovremeno šalju poruke (ovo je chat sustav, zašto ne?), Korištenje pozadinskog posla ovdje je uvjet.

Evo kada se dogodi emitiranje. ActionCable će emitirati korisni teret u navedenoj sobi s dostavljenim opterećenjem.

ActionCable.server.broadcast (ime_nazivnice, korisni teret)

Put kabela

Trebat ćete dodati / cable websocket rutu na route.rb kako bi klijent mogao pozvati tu krajnju točku za emitovanje i primanje poruka.

montirati ActionCable.server => '/ kabel'

I to je to za stražnju stranu! Pogledajmo biblioteku ReactJS sučelja.

Klijentova biblioteka

Imajte na umu da ćete ovisno o specifičnostima vašeg projekta trebati razumjeti koncept ovog koda u ovoj biblioteci i prilagoditi ga svojim potrebama.

Prvo instalirajte ActionCableJS putem npm.

Stvorite ChatConnection.js datoteku kao jednu od usluga u vašoj ReactJs aplikaciji.

Dakle, ovo je udica: u createRoomConnection, klijent će se pokušati povezati s (pretplati se na RoomChannel) koji smo stvorili u pozadini, nakon što je spojen (pretplaćen), strujiće iz naziva sobe ChatRoom-id (pogledajte room_channel. rb gore ponovo) Nakon što se spoje, postoje dvije metode koje se često zovu, možete li pogoditi koja?

Oni su: primljeni i govore!

Primljena metoda poziva se kad klijentu sa e-pošte poslužuje poruku, nasuprot tome, poziva se kada se klijent upućuje na poslužitelj.

Voila! To je to. Opet, ovo nije napravljeno kao pripremni tutorial koji je spreman za pripremu, jer je svaki projekt drugačiji, ali nadam se da vam daje ideju kako izgraditi chat sustav s više privatnih chat soba i više korisnika po sobi. Ako imate bilo kakvih pitanja, obavijestite me u odjeljku za komentare.