Share
Node.js e Websockets sono la combinazione perfetta per scrivere applicazioni molto veloci e senza lag che possono inviare dati a un numero enorme di client. Quindi, perché non iniziamo a conoscere questi due argomenti costruendo un servizio di chat! Vedremo come installare i pacchetti Node.js, offrire una pagina statica al client con un server Web di base e configurare Socket.io per comunicare con il client.
Quindi, perché usare questa combinazione?
Ci sono molte piattaforme che possono eseguire un'applicazione di chat, ma scegliendo Node.js non dobbiamo imparare una lingua completamente diversa, è solo JavaScript, ma lato server.
Node.js è una piattaforma basata sul runtime JavaScript di Chrome per rendere semplici le applicazioni di creazione in JavaScript eseguite sul server. Node.js utilizza un modello I / O non bloccante basato sugli eventi, che lo rende perfetto per la creazione di app in tempo reale.
Sempre più applicazioni Node.js vengono scritte con in mente le comunicazioni in tempo reale. Un esempio famoso è BrowserQuest di Mozilla, un MMORPG scritto interamente in Node.js il cui codice sorgente è stato rilasciato su Github.
Node.js viene fornito con un gestore di pacchetti integrato: npm. Lo useremo per installare pacchetti che contribuiranno ad accelerare il nostro processo di sviluppo delle applicazioni.
Utilizzeremo tre pacchetti per questo tutorial: Jade, Express e Socket.io.
La caratteristica principale della nostra applicazione è la comunicazione in tempo reale tra il client e il server.
HTML5 introduce Websockets, ma è molto lontano dall'essere supportato da tutti gli utenti, quindi abbiamo bisogno di una soluzione di backup.
Socket.io è la nostra soluzione di backup: testerà la compatibilità di Websocket e, se non è supportato, utilizzerà Adobe Flash, AJAX o iFrame.
Infine, supporta un set molto grande di browser:
Offre anche funzioni molto semplici per comunicare tra il server e il client, su entrambi i lati.
Iniziamo installando i tre pacchetti di cui avremo bisogno.
Npm ci permette di installare pacchetti molto velocemente, usando una linea, quindi prima vai nella tua directory e scarica i pacchetti necessari con npm:
npm installa express jade socket.io
Ora possiamo iniziare a costruire il nostro controller lato server per servire la pagina principale.
Stiamo andando a salvare tutto il codice lato server in a "server.js" file che verrà eseguito da Node.js.
Per servire la nostra pagina statica useremo Express, un pacchetto che semplifica l'intero processo di invio delle pagine sul lato server.
Quindi includiamo questo pacchetto nel nostro progetto e avviamo il server:
Accentsconagua
var express = require ('express'), app = express.createServer (); Successivamente, dobbiamo configurare Express per servire la pagina dalle viste del repertorio con il motore di template di Jade che abbiamo installato in precedenza.
Express utilizza un file di layout per impostazione predefinita, ma non ne abbiamo bisogno perché serviremo solo una pagina, quindi, invece, la disabiliteremo.
Express può anche servire un repertorio statico al client come un server web classico, quindi invieremo un messaggio "pubblico" cartella che conterrà tutti i nostri file JavaScript, CSS e immagine.
app.set ('views', __dirname + '/ views'); app.set ('view engine', 'jade'); app.set ("visualizza opzioni", layout: falso); app.configure (function () app.use (express.static (__ dirname + '/ public'));); Quindi, creiamo due cartelle all'interno della cartella del progetto denominata "pubblico" e "visualizzazioni".
Ora dobbiamo solo configurare Express per servire a "Home.jade" file, che verrà creato in un momento, quindi impostare Express per ascoltare una porta specifica.
Userò la porta 3000 ma puoi usare quello che preferisci.
app.get ('/', function (req, res) res.render ('home.jade');); app.listen (3000); 
Node.js utilizza motori di template per servire pagine web. È utile inviare pagine dinamiche e costruirle più velocemente.
In questo tutorial, useremo Jade. La sua sintassi è molto chiara e supporta tutto ciò di cui abbiamo bisogno.
"Jade è un motore di tempistiche ad alte prestazioni fortemente influenzato da Haml e implementato con JavaScript per Node."
Ora, non ho intenzione di esaminare dettagliatamente Jade, se hai bisogno di ulteriore aiuto, puoi trovare documentazione molto ben scritta sul suo repository Github.
Abbiamo installato Jade in precedenza, ma dobbiamo includerlo nel nostro server.js file come abbiamo fatto per Express.
Per convenzione, includiamo le nostre librerie nella parte superiore del nostro file per utilizzarle in seguito, senza dover verificare se sono già incluse. Quindi posiziona il seguente codice nella parte superiore del tuo "server.js" file :
var jade = require ('jade'); E questo completa la nostra configurazione di Jade. Express è già configurato per utilizzare Jade con i nostri file di visualizzazione, per inviare una risposta HTML, abbiamo solo bisogno di creare quel file.
Se iniziamo il nostro server ora si bloccherà perché stiamo richiedendo alla nostra app di inviare una pagina che non esiste ancora.
Non creeremo una pagina completa, solo qualcosa di base che ha un titolo, un contenitore per i messaggi, un'area di testo, un pulsante di invio e un contatore di utenti.
Vai avanti e crea un "Home.jade" pagina all'interno del "visualizzazioni" cartella con il seguente codice:
doctype 5 titolo head html Script di chat (src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') script (src = "/ socket.io/socket. io.js ") script (src =" script.js ") corpo intestazione div.container h1 Un'applicazione di chat con input Node.js e Socket.io (type = 'text') # pseudoInput button # pseudoSet Set Pseudo div # chatEntries div # chatControls input (type = 'text') # messageInput button # invia Send
"Jade è tutto inciso"
Il linguaggio Jade è tutto incentrato sulla rientranza. Come puoi vedere, non abbiamo bisogno di chiudere i nostri contenitori, basta indentare i bambini del contenitore genitore.
Usiamo anche un punto "" e un segno di cancelletto "#" per indicare la classe o l'ID dell'elemento, proprio come in un file CSS.
Colleghiamo anche tre script nella parte superiore del file. Il primo è jQuery da Google CDN, poi abbiamo lo script Socket.io che viene servito automaticamente dal pacchetto e infine un "script.js" file che manterrà tutte le nostre funzioni JS personalizzate.
Socket.io è basato su eventi, proprio come Node. Ha lo scopo di rendere possibili le app in tempo reale in ogni browser e dispositivo mobile, confondendo le linee tra questi diversi meccanismi di trasporto. È gratuito, in tempo reale e JavaScript al 100%.
Come gli altri moduli, dobbiamo includerlo nel nostro server.js file. Collegheremo anche il nostro server express per ascoltare le connessioni dallo stesso indirizzo e dalla stessa porta.
var io = require ('socket.io'). listen (app); Il primo evento che useremo è l'evento di connessione. Viene attivato quando un client tenta di connettersi al server; Socket.io crea un nuovo socket che useremo per ricevere o inviare messaggi al client.
Iniziamo inizializzando la connessione:
io.sockets.on ('connection', function (socket) // i nostri altri eventi ...); Questa funzione richiede due argomenti, il primo è l'evento e il secondo è la funzione di callback, con l'oggetto socket.
Usando un codice come questo, possiamo creare nuovi eventi sul client e sul server con Socket.io. Imposteremo il "pseudo" evento e il "Messaggio" evento successivo.
Per fare questo, è molto semplice, usiamo solo la stessa sintassi, ma questa volta con il nostro presa di corrente oggetto e non con il "io.sockets" (con un oggetto "s"). Questo ci consente di comunicare in modo specifico con un cliente.
Quindi, all'interno della nostra funzione di connessione, aggiungiamo il "pseudo" codice evento.
socket.on ('setPseudo', function (data) socket.set ('pseudo', data);); La funzione di callback accetta un argomento, questo è il dato dal client e nel nostro caso contiene il pseudo-. Con il "impostato" funzione, assegniamo una variabile al socket. Il primo argomento è il nome di questa variabile e il secondo è il valore.
Successivamente, dobbiamo aggiungere il codice per il "Messaggio" evento. Otterrà lo pseudo dell'utente, trasmetterà un array a tutti i client che contengono il messaggio ricevuto e lo pseudo dell'utente e lo registrerà nella nostra console.
socket.on ('message', function (message) socket.get ('pseudo', function (error, name) var data = 'message': messaggio, pseudo: nome; socket.broadcast.emit (' messaggio ', dati); console.log ("utente" + nome + "invia questo:" + messaggio);)); Questo completa la nostra configurazione lato server. Se lo desideri, puoi andare avanti e utilizzare altri eventi per aggiungere nuove funzionalità alla chat.
La cosa bella di Socket.io è che non dobbiamo preoccuparci di gestire le disconnessioni dei client. Quando si disconnette, Socket.io non riceverà più risposte ai messaggi "heartbeat" e disattiverà la sessione associata al client. Se si trattava solo di una disconnessione temporanea, il client si ricollegherà e continuerà con la sessione.
Ora che il nostro server è configurato per gestire i messaggi, abbiamo bisogno di un client per inviarli.
Il lato client di Socket.io è quasi lo stesso del lato server. Funziona anche con eventi personalizzati e creeremo gli stessi sul server.
Quindi, prima, crea un "script.js" file all'interno del pubblico cartella. Conserveremo tutte le nostre funzioni al suo interno.
Per prima cosa è necessario avviare la connessione socket.io tra il client e il server. Sarà memorizzato in una variabile, che useremo in seguito per inviare o ricevere dati. Quando la connessione non passa alcun argomento, si collegherà automaticamente al server che servirà la pagina.
var socket = io.connect ();
Successivamente, creiamo alcune funzioni di supporto che avremo bisogno in seguito. Il primo è una semplice funzione per aggiungere un messaggio allo schermo con lo pseudo dell'utente.
function addMessage (msg, pseudo) $ ("# chatEntries"). append (''+ pseudo +': '+ msg +'
'); Questo helper utilizza la funzione append di jQuery per aggiungere a div alla fine di #chatEntries div.
Ora scriveremo una funzione che possiamo chiamare quando vogliamo inviare un nuovo messaggio.
function sentMessage () if ($ ('# messageInput'). val ()! = "") socket.emit ('message', $ ('# messageInput'). val ()); addMessage ($ ('# messageInput'). val (), "Me", new Date (). toISOString (), true); $ ('# messageInput'). val ("); Per prima cosa, verifichiamo che la nostra textarea non sia vuota, quindi inviamo un pacchetto chiamato "Messaggio" al server che contiene il testo del messaggio, lo stampiamo sullo schermo con il nostro "Aggiungi un messaggio" funzione, e alla fine rimuoviamo tutto il testo dalla textarea.
Ora, quando il client apre la pagina, dobbiamo prima impostare lo pseudo dell'utente. Questa funzione invierà lo pseudo al server e mostrerà la textarea e il pulsante di invio.
function setPseudo () if ($ ("# pseudoInput"). val ()! = "") socket.emit ('setPseudo', $ ("# pseudoInput"). val ()); $ ( '#') ChatControls show ().; $ ( '# PseudoInput') nascondere ().; $ ( '# PseudoSet') nascondere ().; Inoltre, nascondiamo i controlli delle impostazioni pseudo quando vengono inviati al server.
Ora, proprio come abbiamo fatto sul lato server, dobbiamo assicurarci di poter ricevere messaggi in arrivo e questa volta li stamperemo sullo schermo. Useremo la stessa sintassi ma questa volta chiamiamo il "Aggiungi un messaggio" funzione.
socket.on ('message', function (data) addMessage (data ['message'], data ['pseudo']);); Proprio come con la nostra configurazione del server, il pacchetto che viene inviato al client è un array contenente il messaggio e lo pseudo. Quindi chiamiamo semplicemente il nostro "Aggiungi un messaggio" funzione che passa nel messaggio e nello pseudo, che estraiamo dal pacchetto di dati ricevuto.
Ora abbiamo solo bisogno di aggiungere la funzione di inizializzazione che viene attivata una volta che la pagina è stata caricata completamente.
$ (function () $ ("# chatControls"). hide (); $ ("# pseudoSet"). click (function () setPseudo ()); $ ("# submit"). click (function ( ) Messaggio inviato();); ); Per prima cosa, nascondiamo i controlli della chat prima che venga impostata la pseudo e quindi impostiamo due listener di clic che ascoltano i clic sui nostri due pulsanti di invio. Il primo è per lo pseudo e il secondo è per i messaggi.
E questo avvolge il nostro script sul lato client.
Ora abbiamo un servizio di chat funzionante. Per avviarlo, basta eseguire il seguente comando:
nodo server.js
Nel tuo terminale dovresti ricevere un messaggio da Socket.io che dice che il server è stato avviato. Vai a vedere la tua pagina 127.0.0.1:3000 (o qualsiasi porta tu abbia scelto in precedenza).
Il design è molto semplice, ma è possibile aggiungere facilmente un foglio di stile con transizioni CSS3 per i messaggi in arrivo, suoni HTML5 o Bootstrap da Twitter.
Come puoi vedere, gli script server e client sono abbastanza simili: questa è la potenza di Node.js. È possibile creare un'applicazione senza dover scrivere il codice due volte.
Infine, potresti aver notato che ci sono volute solo 25 linee di codice all'interno del nostro server.js file per creare un'app di chat funzionale, con prestazioni sorprendenti. È molto breve, ma funziona anche molto bene.
Ora, se sei interessato, ho creato una migliore applicazione per il servizio di chat, con un design accattivante e alcune funzionalità aggiuntive. È ospitato su Nodester e il codice sorgente è su Github.
Ecco un'anteprima di esso.
Grazie per aver letto.
