Bygg en sanntids chat applikasjon med modul og Laravel 5

I denne veiledningen vil jeg vise deg hvordan du implementerer et sanntids chatprogram med Laravel 5, PostgreSQL og Pusher. Da vil vi distribuere dette programmet til Modulus sammen.

Vi vil bruke Laravel 5 til back-end-tjenesten, HTML5 og jQuery for en enkel frontend-applikasjon, PostgreSQL for databasen, og Pusher for sanntids kommunikasjon mellom server og klienter. Den overordnede arkitekturen vil være slik:

Scenarioet

1. En bruker åpner chatprogrammet i en nettleser og gir et kallenavn for å fortsette chatten.
2. Brukeren legger inn litt tekst og klikker på Sende knapp.
3. Meldingen vil bli håndtert av en tjeneste som er skrevet ved hjelp av Laravel 5, og den vil fortsette til databasen. 
4. Den vedvarende meldingen sendes til Pusher for å utløse en ny meldingshendelse for å kringkaste denne meldingen til tilkoblede klienter.
5. Den nye meldingen vil bli kjøpt av klientene, og chatmeldingslisten vil bli oppdatert for alle tilkoblede klienter. 

Vi vil dekke meget nyttige emner med dette scenariet, selv om dette er en veldig enkel applikasjon. 

Miljøforberedelse

Laravel Project Setup

La oss installere Laravel først, slik at vi kan skrive en chat-tjeneste for vår søknad. Vi vil bruke Komponist til å installere Laravel og relaterte pakker enkelt. Vennligst se på Komposistens nettsted for å lære mer om komponentinstallasjon. Når du har installert Komponist, åpner du en kommandolinjeprompt og kjører følgende kommando for å installere Laravel 5:

komponist globalt krever "laravel / installer = ~ 1.1"

Du vil se utdata som følgende:

Vi er klare til å generere et Laravel-prosjekt. Kjør følgende kode for å generere en prosjektstruktur for chatprogrammet.

laravel ny RealtimeChatLaravel

Dette vil generere et kjelepar Laravel-prosjekt, og du vil se følgende mappestruktur:

database

Vår søknad vil samhandle med en database, og det vil bli PostgreSQL. I dette prosjektet vil vi bruke ElephantSQL, som er et selskap som tilbyr PostgreSQL som en tjeneste. Du kan bruke flere typer databaser med Laravel, som SQLite, MySQL, PostgreSQL og SQL Server. Jeg har valgt PostgreSQL fordi når vi distribuerer prosjektet vårt til Modulus, vil du ikke kunne bruke en intern database som de ovennevnte databasetyper. Jeg foretrekker å bruke en database som gir den som en tjeneste. ElephantSQL lar deg prøve noen av de gode funksjonene i PostgreSQL med en gratis plan. 

Du kan gå og ta en gratis plan fra ElephantSQL for å bruke for dine behov. Når du er ferdig med å opprette en konto og opprette databasen, vil du få informasjon om databasen som vertsnavn, Database navn, Brukernavn, og Passord. Vennligst skriv ned den informasjonen som skal brukes i Laravel for databasekonfigurasjon.

Pusher

Dette selskapet tilbyr en tjeneste for å utløse hendelser for sanntids kommunikasjon. Du kan gå på Pusher nettsiden for å få en. Etter vellykket konto og applikasjonsoppretting, vil du kunne få noen legitimasjonsbeskrivelser som App ID, App Secret, og App-nøkkel. Vi vil snakke om bruken deres i de kommende seksjonene.

Nginx

For å kunne kjøre et PHP-program i Modulus, må du ha en webserver konfigurert til å betjene din søknad. Vi vil bruke følgende Nginx-konfigurasjon:

server listen 8080; server_name modulus_app_url; root / mnt / app / public; indeks index.html index.php; sted / try_files $ uri $ uri / /index.php?$query_string;  plassering ~ \ .php $ fastcgi_split_path_info ^ (. + \. php) (/.+) $; fastcgi_pass unix: /mnt/home/php-fpm.sock; fastcgi_param SCRIPT_FILENAME $ document_root $ fastcgi_script_name; fastcgi_index index.php; inkludere fastcgi_params; 

Vi har fullført de nødvendige miljøinnstillingene for å fortsette utviklingen. La oss gå til designdelen.

Prosjektdesign fra grunnen av

Modell

Hvis du noen gang har brukt et ORM-rammeverk før, vil du være veldig kjent med dette emnet. I Laravel prosjekter er domenemodeller plassert i app / mappen som standard. I denne applikasjonen vil vi utføre CRUD-operasjoner på meldinger, og dette betyr at vi må opprette en Budskap modell. 

Hvis du vil opprette en modell, må du bare opprette en klasse som strekker seg Modell klassen, som er en abstrakt klasse i Laravel kjernepakken Belyse \ Database \ Veltalende. Opprett en fil som heter Message.php under app / mappe, og legg inn følgende innhold inne i filen:

Denne modellen vil tillate oss å utføre flere databaselaterte operasjoner enkelt. For eksempel, når du utfører følgende spørring:
Det vil gi deg alle meldingene fra databasen. Men hvordan bestemmer det på tabellnavnet det vil hente i resultatet? Den bruker $ table verdi i modellklassen. Når du oppretter en ny melding, lagrer den din meldingsmodell direkte til meldinger bord. Vi vil gå nærmere på modeller i Controller-delen.
Controller
Kontrolleren er stedet der søknadens oppførsel er definert. Vi vil utføre noen meldingsrelaterte operasjoner hvis ChatController finnes i vår søknad. Vi vil ha fire endepunkter for vår søknad:
 
 GET / login: for å gjengi innloggingssiden
 
 GET / chat: for å gjengi chat siden
 
 GET / meldinger: for oppføring av de siste fem meldingene som skal vises på chat siden når brukeren først åpner den
 
 POST / meldinger: for å lagre en ny melding
 
For å opprette en kontroller, bare opprett en klasse under App \ Http \ Controllers og la den klassen utvide en Laravel-spesifikk klasse Controller som eksisterer i App \ Http \ Controllers. Når du ber om /Logg Inn eller / chat endepunkt, vil de gi sine egne maler under ressurser / utsikt. Du kan gjøre det ved å bruke følgende handlinger.
klasse ChatController utvider Controller offentlig funksjon getLogin () return view ("login");  offentlig funksjon getChat () return view ("chat");  offentlig funksjon saveMessage () if (Request: ajax ()) $ data = Input :: all (); $ message = new Message; $ message-> author = $ data ["author"]; $ message-> message = $ data ["message"]; $ Melding-> Lagre (); Pusher :: trigger ('chat', 'message', ['message' => $ melding]);  offentlige funksjonslisteMessages (Message $ message) returrespons () -> json ($ message-> orderBy ("created_at", "DESC") -> ta (5) -> get ()); 
Første og andre handlinger vil gjøre bestemte sider. Den tredje handlingen er for å lagre meldinger. I denne handlingen er den første forespørselstypen merket. Hvis det er en AJAX-forespørsel, blir det hele anmodningsorganet som en assosiativ gruppe. Denne gruppen brukes til å fylle den nyopprettede modellmeldingen. 
Og så lagre() Metoden utføres direkte på modellen for å lagre databasen. Når en ny melding blir lagret i databasen, vil samme melding bli sendt til Pusher ved å utløse budskap begivenhet. Når du utløser en hendelse, vil alle tilkoblede klienter bli varslet. For å kunne bruke Pusher klasse i Laravel-prosjektene dine, kan du gjøre følgende:
 
Krev Pusher-relaterte pakker via komponist krever vinkla / pusher.
 
Legg til Pusher-pakken, som er Vinkla \ Pusher \ PusherServiceProvider :: klasse, til config / app.php.
 
Bruk Pusher klasser i dine kontrollere, som Vinkla \ Pusher \ Fasader \ Pusher;, over kontrollerklassen.
 
Du er ok med pakkene, men hva med Pusher-konfigurasjonen? Du må publisere leverandører i prosjektene dine ved å bruke følgende kommando:
php artisan leverandør: publisere
Denne kommandoen vil opprette en config-fil config / pusher.php, og du må oppgi de nødvendige legitimasjonene du finner i Pusher dashbordet. Konfigureringsfilen vil bli som nedenfor:
'connections' => ['auth_key' => 'auth_key', 'secret' => 'hemmelig', 'app_id' => 'app_id', 'options' => [], 'vert' => null, 'port' => null, 'timeout' => null,], 'alternativ' => ['auth_key' => 'din-auth-nøkkel', 'hemmelig' => 'din-hemmelig' 'app_id' => 'ditt-app-id', 'options' => [], 'vert' => null, 'port' => null, 'timeout' => null,]
Det fjerde sluttpunktet er for oppføring av de siste fem meldingene som skal vises på chat siden for nytilkomne brukere. Den magiske koden er:
offentlige funksjonslisteMessages (Message $ message) returrespons () -> json ($ message-> orderBy ("created_at", "DESC") -> ta (5) -> få ()); 
I denne koden er Budskap modellen injiseres til handlingen eller utfører databaselaterte operasjoner ved å bruke $ melding. Første ordremeldinger av created_at i synkende rekkefølge, og deretter ta de siste fem. Resultatet returneres i JSON-format ved å bruke svar () -> json (...). 
Vi har nevnt om kontroller og handlinger, men hvordan utføres disse handlingene når en bruker går til en bestemt nettadresse? Du kan legge til rutekonfigurasjonene til filen app / Http / routes.php. Du kan se et eksempel nedenfor:
I denne bruken blir forespørselen URI og forespørselsmetoden kartlagt til kontrollørenavnet og handlingsnavnet.
Det er alt med kontrollerne. La oss bytte til View-delen.
Utsikt
I denne delen har vi brukt Blade-malmotoren levert av Laravel. Egentlig er det ingen malmotorproblemer i våre prosjekter, men hvis du vil sende verdier fra kontrolleren til visninger, kan du direkte bruke dette prosjektet. 
Vi har to visningssider: login.blade.php og chat.blade.php. Som du kan se, er det et bladord i innsiden av filnavnene for å angi at dette vil bli brukt til Blade-malmotoren. 
Den første er bare for påloggingsoperasjonen, så la oss snakke om chatte side. I denne visningsfilen er det noen tredjeparts JavaScript-biblioteker som vises fra en CDN som jQuery, jQuery Cookie, Bootstrap, og Pusher. Vi har et chat-skjema for å sende meldinger, og Laravel legger en metabeskrivelse på siden:
Vi sender imidlertid en chatmelding via AJAX, og det er ingen tokens i AJAX-forespørselshodene. Vi gir en løsning ved å bruke følgende kodestykke:
$ .ajaxSetup (headers: 'X-CSRF-Token': $ ('meta [navn = _token]'. Attr ('innhold'));
Når du sender en AJAX-forespørsel, vil dette token bli lagt inn i overskriften. 
For å lytte til meldingskanalen i sanntid har vi brukt følgende:
var pusher = ny Pusher ('app_id'); var kanal = pusher.subscribe ('chat'); channel.bind ('message', funksjon (data) var message = data.message; $ ("media-list li"). først (). fjern (); $ (".media-liste"). ('
'+ message.message +'
'+ message.author +' | '+ message.created_at +'
'); );
Først av alt, har vi en Pusher objekt med en APP_ID konstruktør. Og så abonnerer en klient på kanalen. Når en ny begivenhet med navnet budskap kommer, en tilbakeringingsfunksjon vil bli utført inne i binde() funksjon. Meldingslisten vil bli oppdatert med de nye meldingene. 
Til slutt, når en ny bruker åpner chat-siden, vises de fem siste meldingene i meldingslisten med følgende kode:
$ .get ("/ messages", funksjon (meldinger) refreshMessages (messages));
Du kan referere til kildekoden for å analysere full kildekoden på visningssidene.
Utplassering
Vi bruker Modulus til å være vert for vår søknad. 
Modulus er en av de beste PaaS for å distribuere, skalere og overvåke søknaden din på språket du ønsker. Før du fortsetter med distribusjon, gå til Modul og opprett en konto.
Forutsetninger
Distribusjon er veldig enkelt i modulen. Det eneste du trenger å gjøre er å installere en Node.js-modul og kjøre en kommando. Du kan også zippe prosjektet ditt og laste det opp til Modulus. Vi vil foretrekke det første alternativet i denne opplæringen. 
Jeg antar at du allerede har installert Node.js og npm på datamaskinen. Bare åpne et kommandolinjeverktøy og utfør npm installer -g modulus. Etter vellykket installasjon, logg inn på modulkontoen din med modulen CLI: modul innlogging. Hvis du vil logge inn med GitHub, kan du bruke modulinnlogging - gitub. 
Når du har logget inn, opprett et prosjekt med denne kommandoen: modulprosjektet oppretter "RealtimeChatLaravel". Du har opprettet et program på modulsiden. 
Det siste du trenger å gjøre er å lage en mappe i prosjektets rotmappe kalt sider-aktiverte, og sett Nginx-konfigurasjonen vi nevnte i Nginx-delen ovenfor inne i dette sider-aktiverte mappe. 
La oss distribuere prosjektet ditt til Modulus under denne applikasjonen. Utføre moduler distribuere å starte distribusjon, og det er gjort! Denne kommandoen laster opp prosjektfilene dine til Modulus, og den vil også konfigurere webserveren ved hjelp av Nginx-konfigurasjonen du setter inne i sider-aktiverte mappe. 
Etter vellykket distribusjon får du en melding RealtimeChatLaravel kjører på http://realtimechatlaravel-51055.onmodulus.net/cha. Gå til denne nettadressen for å se en fungerende demo. 
Modul CLI har svært nyttige kommandoer å bruke i distribusjons- og løpstidsseksjonen. For eksempel kan du hale logger av ditt løpeprosjekt med modulus prosjekt logger hale, sett en miljøvariabel med modul env sett  , etc. Du kan se hele listen over kommandoer ved å bruke modul hjelp. 
Konklusjon
Hvis du bygger et PHP-webprogram, trenger du uunngåelig å håndtere webservere som Apache of NGINX; Men hvis du bruker Modulus, kan du bare fokusere på ditt PHP-prosjekt. Modulus lar deg sette din webserver konfigurasjon inne i prosjektet ditt slik at det vil påvirke når du distribuerer koden din. 
I denne opplæringen fokuserte vi på sanntids chat applikasjonen og så at de andre aspektene av applikasjonen var veldig enkle å håndtere takket være modulen.



		
			
	   
	




Kode