Costruisci un'applicazione di chat in tempo reale con modulo e Laravel 5

In questo tutorial, ti mostrerò come implementare un'applicazione di chat in tempo reale con Laravel 5, PostgreSQL e Pusher. Quindi implementeremo questa applicazione su Modulus insieme.

Useremo Laravel 5 per il servizio back-end, HTML5 e jQuery per una semplice applicazione front-end, PostgreSQL per il database e Pusher per la comunicazione in tempo reale tra server e client. L'architettura generale sarà così:

Lo scenario

1. Un utente apre l'applicazione di chat in un browser e fornisce un nickname per continuare la chat.
2. L'utente inserisce del testo e fa clic su Inviare pulsante.
3. Il messaggio verrà gestito da un servizio scritto utilizzando Laravel 5 e verrà mantenuto nel database. 
4. Il messaggio persistente verrà inviato a Pusher per attivare un nuovo evento messaggio per trasmettere quel messaggio ai client connessi.
5. Il nuovo messaggio verrà acquisito dai client e l'elenco dei messaggi di chat verrà aggiornato per tutti i client connessi. 

Tratteremo argomenti molto utili con questo scenario, anche se si tratta di un'applicazione molto semplice. 

Preparazione dell'ambiente

Impostazione del progetto Laravel

Iniziamo ad installare Laravel per poter scrivere un servizio di chat per la nostra applicazione. Useremo Composer per installare facilmente Laravel e pacchetti correlati. Fare riferimento al sito Web di Composer per ulteriori informazioni sull'installazione di Composer. Dopo aver installato Composer, apri un prompt della riga di comando ed esegui il seguente comando per installare Laravel 5:

compositore globale richiede "laravel / installer = ~ 1.1"

Vedrai output come il seguente:

Siamo pronti a generare un progetto Laravel. Esegui il seguente codice per generare una struttura di progetto per l'applicazione di chat.

laravel new RealtimeChatLaravel

Questo genererà un progetto Laravel standard e vedrai la seguente struttura di cartelle:

Banca dati

La nostra applicazione interagirà con un database e sarà PostgreSQL. In questo progetto, utilizzeremo ElephantSQL, che è una società che fornisce PostgreSQL come servizio. È possibile utilizzare diversi tipi di database con Laravel, come SQLite, MySQL, PostgreSQL e SQL Server. Ho scelto PostgreSQL perché quando implementiamo il nostro progetto su Modulus, non saremo in grado di utilizzare un database interno come i tipi di database sopra indicati. Preferisco usare un database che lo fornisce come servizio. ElephantSQL ti consente di provare alcune delle buone caratteristiche di PostgreSQL con un piano gratuito. 

Puoi andare e prendere un piano gratuito da ElephantSQL da utilizzare per le tue esigenze. Quando avrai finito la creazione del tuo account e del tuo database, conoscerai le informazioni del database come hostname, Nome del database, Nome utente, e Parola d'ordine. Si prega di scrivere le informazioni da utilizzare in Laravel per la configurazione del database.

Pusher

Questa azienda fornisce un servizio per attivare eventi per la comunicazione in tempo reale. Puoi visitare il sito Web di Pusher per ottenerne uno. Dopo aver completato con successo la creazione di account e applicazioni, sarai in grado di ottenere alcune credenziali come ID app, App Secret, e Chiave app. Parleremo del loro utilizzo nelle prossime sezioni.

nginx

Per eseguire un'applicazione PHP in Modulo, è necessario disporre di un server Web configurato per servire la propria applicazione. Useremo la seguente configurazione Nginx:

server ascolta 8080; nome_server modulus_app_url; root / mnt / app / public; indice index.html index.php; posizione / try_files $ uri $ uri / /index.php?$query_string;  posizione ~ \ .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; include fastcgi_params; 

Abbiamo completato le impostazioni ambientali necessarie per continuare lo sviluppo. Andiamo alla parte del design.

Project Design From Scratch

Modello

Se hai già utilizzato un framework ORM, conoscerai questo argomento. Nei progetti Laravel, i modelli di dominio sono posizionati nel app / cartella per impostazione predefinita. In questa applicazione, eseguiremo operazioni CRUD sui messaggi e questo significa che dobbiamo creare un Messaggio modello. 

Se vuoi creare un modello, crea semplicemente una classe che estenda il Modello classe, che è una classe astratta nel pacchetto principale di Laravel Illuminare \ Database \ Eloquente. Crea un file chiamato Message.php sotto il app / cartella e inserire il seguente contenuto all'interno del file:

Questo modello ci consentirà di eseguire facilmente diverse operazioni legate al database. Ad esempio, quando si esegue la seguente query:
ti darà tutti i messaggi dal database. Tuttavia, come decide il nome della tabella che verrà recuperato nel risultato? Usa il $ tavolo valore nella classe del modello. Quando crei un nuovo messaggio, salverà direttamente il tuo modello di messaggio messaggi tavolo. Andremo in dettaglio sui Modelli nella sezione Controller.
controllore
Il controller è il luogo in cui viene definito il comportamento dell'applicazione. Eseguiremo alcune operazioni relative ai messaggi se ChatController esiste nella nostra applicazione. Avremo quattro endpoint per la nostra applicazione:
 
 OTTIENI / accedi: per il rendering della pagina di accesso
 
 OTTIENI / chat: per il rendering della pagina di chat
 
 OTTIENI / messaggi: per elencare gli ultimi cinque messaggi da visualizzare nella pagina della chat quando l'utente lo apre per la prima volta
 
 POST / messaggi: per salvare un nuovo messaggio
 
Per creare un controller, è sufficiente creare una classe sotto App \ Http \ Controllers e fai in modo che la classe estenda una classe specifica per Laravel controllore che esiste in App \ Http \ Controllers. Quando si richiede il /accesso o /Chiacchierare endpoint, renderanno i loro modelli sotto Resources / views. Puoi farlo usando le seguenti azioni.
classe ChatController estende Controller funzione pubblica getLogin () return view ("login");  public function getChat () return view ("chat");  public function saveMessage () if (Request :: ajax ()) $ data = Input :: all (); $ message = new Message; $ message-> author = $ data ["author"]; $ message-> message = $ data ["message"]; $ Message-> save (); Pusher :: trigger ('chat', 'messaggio', ['messaggio' => $ messaggio]);  public function listMessages (messaggio $ messaggio) return response () -> json ($ message-> orderBy ("created_at", "DESC") -> take (5) -> get ()); 
La prima e la seconda azione renderanno pagine specifiche. La terza azione è per il salvataggio dei messaggi. In questa azione, viene controllato il primo tipo di richiesta. Se si tratta di una richiesta AJAX, ottiene tutto il corpo della richiesta come array associativo. Questo array viene utilizzato per popolare il messaggio di modello appena creato. 
Poi il salvare() il metodo viene eseguito direttamente sul modello per salvare il database. Ogni volta che un nuovo messaggio viene salvato nel database, lo stesso messaggio verrà inviato a Pusher attivando il Messaggio evento. Quando si attiva un evento, tutti i client connessi verranno avvisati. Per usare il Pusher classe nei tuoi progetti Laravel, puoi fare quanto segue:
 
Richiede pacchetti relativi a Pusher tramite il compositore richiede vinkla / pusher.
 
Aggiungi il pacchetto Pusher, che è Vinkla \ Pusher \ PusherServiceProvider :: class, al config / app.php.
 
Utilizza le classi Pusher nei tuoi controller, ad esempio Vinkla \ Pusher \ Facciate \ Pusher;, sopra la classe controller.
 
Stai bene con i pacchetti, ma per quanto riguarda la configurazione di Pusher? È necessario pubblicare i fornitori nei progetti utilizzando il seguente comando:
php artisan vendor: pubblicare
Questo comando creerà un file di configurazione config / pusher.php, ed è necessario fornire le credenziali richieste che è possibile trovare nella dashboard Pusher. Il file di configurazione sarà come di seguito:
'connections' => ['main' => ['auth_key' => 'auth_key', 'secret' => 'secret', 'app_id' => 'app_id', 'opzioni' => [], 'host' => null, 'port' => null, 'timeout' => null,], 'alternative' => ['auth_key' => 'your-auth-key', 'secret' => 'your-secret', 'app_id' => 'your-app-id', 'options' => [], 'host' => null, 'port' => null, 'timeout' => null,],]
Il quarto endpoint serve per elencare gli ultimi cinque messaggi da visualizzare nella pagina di chat per gli utenti appena iscritti. Il codice magico è:
funzione pubblica listMessages (messaggio $ messaggio) return response () -> json ($ message-> orderBy ("created_at", "DESC") -> take (5) -> get ()); 
In questo codice, il Messaggio il modello viene iniettato all'azione o esegue operazioni correlate al database usando $ messaggio. Messaggi del primo ordine di created_at in ordine decrescente, quindi prendere gli ultimi cinque. Il risultato viene restituito in formato JSON utilizzando risposta () -> json (...). 
Abbiamo menzionato controller e azioni, ma come vengono eseguite queste azioni quando un utente accede a un URL specifico? È possibile aggiungere le configurazioni del percorso al file app / Http / routes.php. Puoi vedere un esempio qui sotto:
In questo utilizzo, l'URI della richiesta e il metodo di richiesta sono associati al nome del controller e al nome dell'azione.
Questo è tutto con i controller. Passiamo alla parte View.
vista
In questa sezione, abbiamo utilizzato il motore di template Blade fornito da Laravel. In realtà, nei nostri progetti non sono presenti elementi del motore di template, ma se si desidera inviare valori dal controller alle viste, è possibile utilizzare direttamente questo progetto. 
Abbiamo due pagine di visualizzazione: login.blade.php e chat.blade.php. Come puoi vedere, esiste una parola chiave blade all'interno dei nomi dei file di visualizzazione per dichiarare che verrà utilizzata per il motore di template di Blade. 
Il primo è semplicemente per l'operazione di login, quindi parliamo di Chiacchierare pagina. In questo file di visualizzazione, ci sono alcune librerie JavaScript di terze parti servite da un CDN come jQuery, jQuery Cookie, bootstrap, e Pusher. Abbiamo un modulo di chat per inviare messaggi e Laravel inserisce una meta descrizione nella pagina:
Tuttavia, stiamo inviando un messaggio chat tramite AJAX e non ci sono token nelle intestazioni delle richieste AJAX. Forniamo una soluzione utilizzando il seguente frammento di codice:
$ .ajaxSetup (headers: 'X-CSRF-Token': $ ('meta [nome = _token]'). attr ('contenuto'));
Ogni volta che si invia una richiesta AJAX, questo token verrà inserito nell'intestazione. 
Per ascoltare il canale dei messaggi in tempo reale, abbiamo utilizzato quanto segue:
var pusher = new Pusher ('app_id'); var channel = pusher.subscribe ('chat'); channel.bind ('message', function (data) var message = data.message; $ (". media-list li"). first (). remove (); $ (". media-list"). append ('
'+ message.message +'
'+ messaggio.autore +' | '+ message.created_at +'
'); );
Prima di tutto, abbiamo un Pusher oggetto con un APP_ID costruttore. E poi, un cliente è iscritto al canale. Ogni volta che un nuovo evento con il nome Messaggio arriva, una funzione di callback sarà eseguita all'interno bind () funzione. L'area dell'elenco dei messaggi verrà aggiornata con i nuovi messaggi. 
Infine, ogni volta che un nuovo utente apre la pagina di chat, gli ultimi cinque messaggi verranno visualizzati nell'area di elenco dei messaggi con il seguente codice:
$ .get ("/ messages", function (messages) refreshMessages (messages));
È possibile fare riferimento al codice sorgente per analizzare il codice sorgente completo delle pagine di visualizzazione.
Distribuzione
Useremo Modulus per ospitare la nostra applicazione. 
Modulus è uno dei migliori PaaS per la distribuzione, il ridimensionamento e il monitoraggio dell'applicazione nella lingua prescelta. Prima di procedere con la distribuzione, vai su Modulo e crea un account.
Prerequisiti
La distribuzione è molto semplice in Modulus. L'unica cosa che devi fare è installare un modulo Node.js ed eseguire un comando. Puoi anche comprimere il tuo progetto e caricarlo su Modulus. Preferiremo la prima opzione in questo tutorial. 
Suppongo che tu abbia già installato Node.js e npm sul tuo computer. Basta aprire uno strumento da riga di comando ed eseguire npm install -g modulo. Al termine dell'installazione, accedere al proprio account Modulus con la CLI del modulo: accesso modulo. Se vuoi accedere con GitHub, puoi usare login modulo --github. 
Dopo aver effettuato l'accesso, crea un progetto con questo comando: progetto di modulo creare "RealtimeChatLaravel". Hai creato un'applicazione sul lato Modulus. 
L'ultima cosa che devi fare è creare una cartella nella cartella principale del tuo progetto chiamata siti abilitati, e metti la configurazione di Nginx che abbiamo menzionato nella sezione Nginx qui sopra siti abilitati cartella. 
Mettiamo il progetto in Modulus sotto questa applicazione. Eseguire modulo distribuire per avviare la distribuzione, ed è fatta! Questo comando caricherà i file di progetto su Modulus e configurerà anche il server web utilizzando la configurazione Nginx che hai inserito siti abilitati cartella. 
Dopo il successo della distribuzione, riceverai un messaggio RealtimeChatLaravel in esecuzione su http://realtimechatlaravel-51055.onmodulus.net/cha. Vai a questo URL per vedere una demo funzionante. 
Modulus CLI ha comandi molto utili da utilizzare nella sezione deployment e run-time. Ad esempio, puoi registrare i log del tuo progetto in esecuzione con coda di registro modulo modulo, imposta una variabile d'ambiente con modulo env impostato  , ecc. Puoi vedere la lista completa dei comandi usando modulo di aiuto. 
Conclusione
Se stai costruendo un'applicazione web PHP, dovrai inevitabilmente trattare server web come Apache di NGINX; tuttavia, se stai utilizzando Modulus, puoi semplicemente concentrarti sul tuo progetto PHP. Modulus consente di inserire la configurazione del server Web all'interno del progetto in modo tale che abbia effetto quando si distribuisce il codice. 
In questo tutorial, ci siamo concentrati sull'applicazione di chat in tempo reale e abbiamo visto che gli altri aspetti dell'applicazione erano molto facili da gestire grazie a Modulus.



		
			
	   
	




Codice