Zostavte si chatovací systém pomocou Rails 5 API Action Cable a ReactJS s viacerými súkromnými miestnosťami a možnosťou skupinového chatu

Vezmite prosím na vedomie, že tento príspevok nie je výukový program a vyžaduje znalosť vlastnej budovy knižníc Rails 5 ActionCable a ReactJS / Javascript.

Jednou z úžasných funkcií dodávaných s Rails 5 je ActionCable. S ActionCable môžete vytvárať všetky funkcie v reálnom čase, na ktoré môžete myslieť, prostredníctvom webového konektora. Pri snahe vybudovať chatovací systém som našiel na sieti niekoľko príkladov, ako zostaviť chatovú aplikáciu pomocou Rails 5 ActionCable, ale je extrémne jednoduché aplikovať tento koncept na akúkoľvek aplikáciu na skutočný život. Verím, že toto je prvý príklad na internete, ktorý vám ukáže, ako zostaviť takýto chatovací systém s:

  • Koncové rozhranie API Rails 5 a frontend ReactJS
  • Viaceré súkromné ​​izby
  • Akýkoľvek pozitívny počet používateľov v miestnosti (nielen 1–1) alebo skupinový rozhovor

Chatovací systém, ktorý sme s talentovaným priateľom Timom Changom vybudovali, má:

  1. Viac súkromných chatovacích miestností
  2. Viac používateľov chatu na izbu
  3. Online / Offline stav každého užívateľa
  4. Stav zadávania textu v reálnom čase
  5. Čítanie v reálnom čase
Takto vyzerá náš konečný výsledok. (Tento príklad však neuvádza prácu s klientskym rozhraním.)

V tomto krátkom príspevku vám ukážem iba základné informácie z článkov 1 a 2. Prosím, zanechajte mi komentár nižšie, ak chcete, aby som vám ukázal, ako zostaviť # 3, # 4 a # 5. Používam Rails 5 ako back-end API a ReactJS knižnicu na front-ende.

backend

Pri vytvorení Rails vygeneruje priečinky a súbory kanálov, v ktorých sa odohráva všetka kúzla v reálnom čase :)

app / kanály / application_cable / channel.rb
app / kanály / application_cable / connection.rb

Overenie

Najprv si overme žiadosti o pripojenie na websocket k vášmu serveru Rails v rámci connection.rb.

V závislosti na autentifikačnom klenote alebo službe, ktorú používate vo svojom projekte, by sa metóda find_verified_user mala upraviť podľa vašich potrieb. Mám metódu s názvom valid_token? na overenie tokenu prístupu a identifikátora client_id odovzdaného spolu so žiadosťou o webový konektor. Ak žiadosť nie je overená, bude zamietnutá.

Dátová štruktúra

Myšlienka je veľmi jednoduchá: diskusná miestnosť, ktorá obsahuje viac správ, každá správa má obsah a odosielateľa. Upozorňujeme, že správa nemá „príjemcu“. To umožňuje miestnosti mať ľubovoľný počet používateľov, pretože sa nemusíte starať o príjemcu správ, pretože všetky správy od odosielateľov sa zobrazia v miestnosti bez ohľadu na to, koľko účastníkov v miestnosti. Toto je štruktúra údajov, ktorú používam:

  • Konverzácia (miestnosť): obsahuje veľa správ, používateľov a má ID
  • Správa: patrí do konverzácie, má odosielateľa, má textový obsah
  • Odosielateľ: je používateľ

Výsledkom je, že som vytvoril 3 modely:

Akčné spúšťače

Keď sa klient pripojí (prihlási) alebo vysiela správu (hovor), backend bude reagovať s akciami. Vo vnútri priečinka app / kanály vytvorím súbor s názvom room_channel.rb.

Ako vidíte v komentári, potom, čo klient „rozpráva“, sa vysielanie zatiaľ nedeje; vytvorí sa iba nová správa s obsahom a údajmi. Reťazec akcie sa uskutoční po uložení správy do DB. Pozrime sa znova na model správy:

after_create_commit {MessageBroadcastJob.perform_later (self)}

škálovateľnosť

Toto spätné volanie sa vyvolá až po vytvorení správy a jej odovzdaní do databázy DB. Na spracovanie tejto akcie používam úlohy na pozadí. Predstavte si, že tisíce klientov odosielajú správy súčasne (toto je chatovací systém, prečo nie?), Tu je požiadavka používať prácu na pozadí.

V takom prípade nastane vysielanie. ActionCable odošle užitočné zaťaženie do určenej miestnosti s poskytnutým užitočným zaťažením.

ActionCable.server.broadcast (názov izby, užitočné zaťaženie)

Káblová trasa

Aby bolo možné, aby klient mohol volať tento koncový bod na vysielanie a prijímanie správ, budete musieť do svojej route.rb pridať trasu / káblového websocket.

pripojiť ActionCable.server => '/ kábel'

A to je pre zadnú stranu! Pozrime sa na front-end knižnicu ReactJS.

Knižnica klientov

Upozorňujeme, že v závislosti od špecifík vášho projektu budete musieť porozumieť koncepcii tohto kódu v tejto knižnici a upraviť ho podľa svojich potrieb.

Najskôr nainštalujte ActionCableJS cez npm.

Vytvorte súbor ChatConnection.js ako jednu zo služieb v aplikácii ReactJs.

Takže tu je háčik: v createRoomConnection sa klient pokúsi spojiť s (prihlásiť sa na) RoomChannel, ktorý sme vytvorili v backende, akonáhle je pripojený (prihlásený), bude to prúd z názvu miestnosti ChatRoom-id (pozrite sa na room_channel. rb vyššie) Po prepojení existujú dve metódy, ktoré sa budú často nazývať, hádajte, ktorá z nich?

Sú to: prijímané a hovorené!

Prijatá metóda sa volá, keď dôjde k vysielaniu správy zo servera zo servera, naopak, hovor sa volá, keď klient vysiela správu na server.

Voila! To je všetko. Opäť to nie je stvorené ako tutoriál pripravený na okamžité spustenie, pretože každý projekt je iný, ale dúfam, že vám dá predstavu, ako vybudovať chatovací systém s viacerými súkromnými chatovacími miestnosťami. a viac používateľov na izbu. Ak máte akékoľvek otázky, dajte nám vedieť v sekcii komentárov.