Share
NodeJS mi dà la possibilità di scrivere codice di back-end in una delle mie lingue preferite: JavaScript. È la tecnologia perfetta per la creazione di applicazioni in tempo reale. In questo tutorial, ti mostrerò come creare un'applicazione per chat web, usando ExpressJS e Socket.io.
A proposito, se vuoi trovare una soluzione di chat già pronta utilizzando Node.js, dai un'occhiata a Yahoo! Messenger node.JS BOT su Envato Market.
Yahoo! Messenger node.JS BOT su Envato Market Naturalmente, la prima cosa da fare è far installare NodeJS sul tuo sistema. Se sei un utente Windows o Mac, puoi visitare nodejs.org e scaricare il programma di installazione. Se preferisci invece Linux, ti suggerisco di fare riferimento a questo link. Anche se non entrerò in ulteriori dettagli in merito, se dovessi riscontrare problemi di installazione, saremo lieti di aiutarti; basta lasciare un commento sotto questo post.
Una volta installato NodeJS, sei pronto per configurare gli strumenti necessari.
Continuando, all'interno di una directory vuota, creare a package.json file con il seguente contenuto.
"nome": "RealTimeWebChat", "versione": "0.0.0", "descrizione": "Chat web in tempo reale", "dipendenze": "socket.io": "latest", "express": " latest "," jade ":" latest "," author ":" developer "
Usando la console (sotto Windows - prompt dei comandi), vai alla tua cartella ed esegui:
installazione di npm
Entro pochi secondi, avrai tutte le dipendenze necessarie scaricate su node_modules elenco.
Iniziamo con un semplice server, che fornirà la pagina HTML dell'applicazione, quindi continueremo con i bit più interessanti: la comunicazione in tempo reale. Creare un index.js file con il seguente codice core expressjs:
Accentsconagua
var express = require ("express"); var app = express (); var port = 3700; app.get ("/", function (req, res) res.send ("Funziona!");); app.listen (porta); console.log ("Ascolto sulla porta" + porta); In alto, abbiamo creato un'applicazione e definito la sua porta. Successivamente, abbiamo registrato un percorso, che, in questo caso, è una semplice richiesta GET senza parametri. Per ora, il gestore del percorso invia semplicemente del testo al client. Infine, ovviamente, in fondo, eseguiamo il server. Per inizializzare l'applicazione, dalla console, eseguire:
nodo index.js
Il server è in esecuzione, quindi dovresti essere in grado di aprire http://127.0.0.1:3700/ e vedi:
Funziona!
Ora, invece di "Funziona" dovremmo servire HTML. Invece di puro HTML, può essere utile utilizzare un motore di template. Jade è una scelta eccellente, che ha una buona integrazione con ExpressJS. Questo è quello che uso di solito nei miei progetti. Crea una directory, chiamata tpl, e metti il seguente page.jade file al suo interno:
!!! html head title = "chat in tempo reale" body #content (style = 'width: 500px; height: 300px; margin: 0 0 20px 0; border: solido 1px # 999; overflow-y: scroll;') .controls input .field (style = 'width: 350px;') input.send (type = 'button', value = "send")
La sintassi di Jade non è così complessa, ma, per una guida completa, ti suggerisco di fare riferimento a jade-lang.com. Per usare Jade con ExpressJS, richiediamo le seguenti impostazioni.
app.set ('views', __dirname + '/ tpl'); app.set ('view engine', "jade"); app.engine ('jade', require ('jade') .__ express); app.get ("/", function (req, res) res.render ("page");); Questo codice informa Express dove sono i file del modello e quale motore di template utilizzare. Tutto specifica la funzione che elaborerà il codice del modello. Una volta che tutto è configurato, possiamo usare il .rendere metodo del risposta oggetto, e semplicemente inviare il nostro codice Jade all'utente.
L'output non è speciale a questo punto; niente più di a div elemento (quello con id soddisfare), che verrà utilizzato come supporto per i messaggi di chat e due controlli (campo di immissione e pulsante), che useremo per inviare il messaggio.
Poiché useremo un file JavaScript esterno che manterrà la logica front-end, dobbiamo informare ExpressJS dove cercare tali risorse. Crea una directory vuota, pubblico, e aggiungere la seguente riga prima della chiamata al .ascolta metodo.
app.use (express.static (__ dirname + '/ public'));
Fin qui tutto bene; abbiamo un server che risponde con successo alle richieste GET. Ora è il momento di aggiungere Socket.io integrazione. Cambia questa linea:
app.listen (porta);
a:
var io = require ('socket.io'). listen (app.listen (port)); Sopra, abbiamo passato il server ExpressJS a Socket.io. In effetti, la nostra comunicazione in tempo reale avverrà ancora sulla stessa porta.
Andando avanti, dobbiamo scrivere il codice che riceverà un messaggio dal client e inviarlo a tutti gli altri. Ogni applicazione Socket.io inizia con a connessione handler. Dovremmo averne uno:
io.sockets.on ('connection', function (socket) socket.emit ('message', message: 'welcome to the chat'); socket.on ('send', function (data) io. sockets.emit ('message', data););); L'oggetto, presa di corrente, che viene passato al gestore, è in realtà il socket del client. Pensala come una giunzione tra il tuo server e il browser dell'utente. Dopo una connessione riuscita, inviamo un benvenuto tipo di messaggio e, naturalmente, associare un altro gestore che verrà utilizzato come ricevitore. Di conseguenza, il client dovrebbe emettere un messaggio con il nome, inviare, che cattureremo. In seguito, semplicemente inoltriamo i dati inviati dall'utente a tutti gli altri socket con io.sockets.emit.
Con il codice sopra, il nostro back-end è pronto per ricevere e inviare messaggi ai client. Aggiungiamo un po 'di codice front-end.
Creare Chat.js, e posizionarlo all'interno del pubblico directory della tua applicazione. Incolla il seguente codice:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var field = document.getElementById ("campo"); var sendButton = document.getElementById ("invia"); var content = document.getElementById ("content"); socket.on ('message', function (data) if (data.message) messages.push (data.message); var html = "; for (var i = 0; i La nostra logica è avvolta in a .onload gestore solo per garantire che tutto il markup e il JavaScript esterno siano completamente caricati. Nelle prossime righe, creiamo un array, che memorizzerà tutti i messaggi, a presa di corrente oggetto e poche scorciatoie ai nostri elementi DOM. Ancora una volta, simile al back-end, leghiamo una funzione, che reagirà all'attività del socket. Nel nostro caso, questo è un evento, chiamato Messaggio. Quando si verifica un evento del genere, ci aspettiamo di ricevere un oggetto, dati, con la proprietà, Messaggio. Aggiungi quel messaggio alla nostra memoria e aggiorna il soddisfare div. Abbiamo anche incluso la logica per inviare il messaggio. È abbastanza semplice, sta semplicemente emettendo un messaggio con il nome, inviare.
Se apri http: // localhost: 3700, incontrerai qualche popup di errori. Questo perché dobbiamo aggiornare page.jade per contenere i file JavaScript necessari.
head title = Script "Real time web chat" (src = '/ chat.js') script (src = '/ socket.io/socket.io.js')
Si noti che Socket.io gestisce la consegna di socket.io.js. Non devi preoccuparti di scaricare manualmente questo file.
Possiamo ancora eseguire il nostro server con nodo index.js nella console e aperto http: // localhost: 3700. Dovresti vedere il messaggio di benvenuto. Naturalmente, se invii qualcosa, dovrebbe essere mostrato nel contenuto div. Se vuoi essere sicuro che funzioni, apri una nuova scheda (o, meglio, un nuovo browser) e carica l'applicazione. La cosa bella di Socket.io è che funziona anche se si interrompe il server NodeJS. Il front-end continuerà a funzionare. Una volta riavviato il server, anche la chat andrà bene.
Allo stato attuale, la nostra chat non è perfetta e richiede alcuni miglioramenti.
Il primo cambiamento che dobbiamo fare è l'identità dei messaggi. Al momento, non è chiaro quali messaggi vengano inviati da chi. La cosa buona è che non dobbiamo aggiornare il nostro codice NodeJS per raggiungere questo obiettivo. Questo perché il server semplicemente inoltra il dati oggetto. Quindi, dobbiamo aggiungere una nuova proprietà lì e leggerla in seguito. Prima di apportare correzioni a Chat.js, aggiungiamo un nuovo ingresso campo, dove l'utente può aggiungere il suo nome. Entro page.jade, cambiare il controlli div:
.controlli | Nome: input # name (style = 'width: 350px;') br input # field (style = 'width: 350px;') input # send (type = 'button', value = "send")
Avanti, in code.js:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var field = document.getElementById ("campo"); var sendButton = document.getElementById ("invia"); var content = document.getElementById ("content"); var name = document.getElementById ("nome"); socket.on ('message', function (data) if (data.message) messages.push (data); var html = "; for (var i = 0; i'; html + = messages [i] .message + '
'; content.innerHTML = html; else console.log ("C'è un problema:", dati); ); sendButton.onclick = function () if (name.value == "") alert ("Si prega di digitare il proprio nome!"); else var text = campo.valore; socket.emit ('invia', messaggio: testo, nomeutente: nome.valore); ; Per riassumere le modifiche, abbiamo:
ingresso camponome utente proprietà all'oggetto, che viene inviata al serverSe il numero di messaggi diventa troppo alto, l'utente dovrà scorrere la pagina div:
content.innerHTML = html; content.scrollTop = content.scrollHeight;
Tieni presente che la soluzione di cui sopra probabilmente non funzionerà in IE7 e in basso, ma va bene così: è ora che IE7 svanisca. Tuttavia, se vuoi garantire il supporto, sentiti libero di usare jQuery:
$ ( "# Contenuto") scrollTop ($ ( "# contenuto") [0] .scrollHeight).;
Sarebbe anche bello se il campo di input fosse cancellato dopo aver inviato il messaggio:
socket.emit ('invia', messaggio: testo, nomeutente: nome.valore); field.value = ""; Il problema finale noioso è il clic del inviare pulsante ogni volta. Con un tocco di jQuery, possiamo ascoltare quando l'utente preme il tasto accedere chiave.
$ (document) .ready (function () $ ("# field"). keyup (function (e) if (e.keyCode == 13) sendMessage (););); La funzione, invia messaggio, potrebbe essere registrato, in questo modo:
sendButton.onclick = sendMessage = function () ...;
Si noti che questa non è una best practice, in quanto è registrata come funzione globale. Ma, per la nostra piccola prova qui, andrà bene.
NodeJS è una tecnologia estremamente utile e ci fornisce una grande quantità di potenza e gioia, soprattutto se si considera il fatto che possiamo scrivere puro JavaScript. Come puoi vedere, con solo poche righe di codice, siamo riusciti a scrivere un'applicazione di chat in tempo reale completamente funzionante. Piuttosto pulito!
Vuoi saperne di più sulla creazione di app Web con ExpressJS? Ti abbiamo coperto!
