Real Time Chat med NodeJS, Socket.io og ExpressJS

NodeJS gir meg muligheten til å skrive back-end kode på et av mine favoritt språk: JavaScript. Det er den perfekte teknologien for å bygge sanntidsapplikasjoner. I denne opplæringen viser jeg deg hvordan du bygger et nettpratprogram, ved hjelp av ExpressJS og Socket.io.

For øvrig, hvis du vil finne en ferdig chat løsning med Node.js, ta en titt på Yahoo! Messenger node.JS BOT på Envato Market.

Yahoo! Messenger node.JS BOT på Envato Market

Oppsettmiljø

Selvfølgelig er det første som gjør NodeJS installert på systemet ditt. Hvis du er en Windows- eller Mac-bruker, kan du besøke nodejs.org og laste ned installasjonsprogrammet. Hvis du i stedet foretrekker Linux, foreslår jeg at du henviser til denne lenken. Selv om jeg ikke vil gå inn i ytterligere detaljer om dette, hvis du støter på installasjonsproblemer, er jeg glad for å hjelpe deg; bare legg igjen en kommentar under dette innlegget.

Når du har installert NodeJS, er du klar til å sette opp de nødvendige instrumentene.

ExpressJS - dette vil administrere serveren og svaret til brukeren
Jade - malmotor
Socket.io - gir mulighet for sanntids kommunikasjon mellom front-end og back-end

Fortsett på, i en tom katalog, opprett en package.json fil med følgende innhold.

"navn": "RealTimeWebChat", "versjon": "0.0.0", "beskrivelse": "Real time web chat", "avhengigheter": "socket.io": "latest", "express" siste "," jade ":" nyeste "," forfatter ":" utvikler "

Ved å bruke konsollen (under Windows - kommandoprompt), naviger til mappen din og kjør ut:

npm installasjon

Innen noen få sekunder har du alle nødvendige avhengigheter lastet ned til node_modules katalog.

Utvikling av backend

La oss begynne med en enkel server, som vil levere programmets HTML-side, og deretter fortsette med de mer interessante brikkene: sanntids kommunikasjon. Lag en index.js fil med følgende kjerneekspreskode:

var express = krever ("express"); var app = express (); var port = 3700; app.get ("/", funksjon (req, res) res.send ("Det fungerer!");); app.listen (port); console.log ("Listing on port" + port);

Ovenfor har vi opprettet et program og definert porten. Deretter registrerte vi en rute, som i dette tilfellet er en enkel GET-forespørsel uten noen parametere. For nå sender rutehåndtereren bare litt tekst til klienten. Endelig, selvfølgelig, i bunnen, kjører vi serveren. For å initialisere programmet, fra konsollen, utfør:

node index.js

Serveren kjører, så du bør kunne åpne http://127.0.0.1:3700/ og se:

Det fungerer!

Nå, i stedet for "Det fungerer" vi burde tjene HTML. I stedet for ren HTML kan det være fordelaktig å bruke en malmotor. Jade er et utmerket valg, som har god integrasjon med ExpressJS. Dette er det jeg vanligvis bruker i mine egne prosjekter. Opprett en katalog, kalt TPL, og legg følgende page.jade filen i den:

!!! html head title = "Real time web chat" body # content (style = 'width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px # 999; overflow-y: scroll;') .controls input .field (style = 'width: 350px;') input.send (type = 'knapp', verdi = "send")

Jades syntaks er ikke så komplisert, men for en full guide foreslår jeg at du henviser til jade-lang.com. For å kunne bruke Jade med ExpressJS, krever vi følgende innstillinger.

app.set ('views', __dirname + '/ tpl'); app.set ('view engine', 'jade'); app.engine ('jade', krever ('jade') .__ uttrykk); app.get ("/", funksjon (req, res) res.render ("side"););

Denne koden informerer Express hvor malfilene dine er, og hvilken malmotor som skal brukes. Alt spesifiserer funksjonen som vil behandle malens kode. Når alt er satt opp, kan vi bruke .gjengi metode av respons objekt, og send vår Jade-kode til brukeren.

Utgangen er ikke spesiell på dette punktet; ingenting mer enn a div element (den med ID innhold), som vil bli brukt som holder for chatmeldingene og to kontroller (inntastingsfelt og knapp), som vi vil bruke til å sende meldingen.

Fordi vi vil bruke en ekstern JavaScript-fil som vil holde frontend-logikken, må vi informere ExpressJS hvor du skal lete etter slike ressurser. Opprett en tom katalog, offentlig, og legg til følgende linje før samtalen til .lytte metode.

app.use (express.static (__ dirname + '/ public'));

Så langt så bra; Vi har en server som lykkes med å svare på GET-forespørsler. Nå er det på tide å legge til Socket.io integrering. Endre denne linjen:

app.listen (port);

til:

var io = kreve ('socket.io'). lytt (app.listen (port));

Ovenfor passerte vi ExpressJS-serveren til Socket.io. I virkeligheten vil vår sanntidskommunikasjon fremdeles skje i samme port.

Når vi går videre, må vi skrive koden som vil motta en melding fra klienten, og sende den til alle de andre. Hver Socket.io søknad begynner med a forbindelse behandleren. Vi burde ha en:

io.sockets.on ('forbindelse', funksjon (socket) socket.emit ('message', message: 'velkommen til chatten'); socket.on ('send', funksjon (data) io. sockets.emit ('message', data);););

Objektet, stikkontakt, som sendes til handleren din, er faktisk kontakten til klienten. Tenk på det som et kryss mellom serveren din og brukerens nettleser. Ved en vellykket forbindelse sender vi en Velkommen type melding og, selvfølgelig, bind en annen handler som vil bli brukt som mottaker. Som et resultat, skal klienten sende en melding med navnet, sende, som vi vil fange. Etter det sender vi bare dataene som er sendt av brukeren til alle andre stikkontakter med io.sockets.emit.

Med koden ovenfor er vår back-end klar til å motta og sende meldinger til kundene. La oss legge til noen front-end-kode.

Utvikling av Front-end

Skape chat.js, og plasser den i offentlig katalog over søknaden din. Lim inn følgende kode:

window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var felt = document.getElementById ("field"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("innhold"); socket.on ('message', funksjon (data) if (data.message) messages.push (data.message); var html = "; for (var i = 0; i';  content.innerHTML = html;  else console.log ("Det er et problem:", data); ); sendButton.onclick = function () var text = field.value; socket.emit ('send', message: text); ;

Vår logikk er pakket inn i en .på Last handler bare for å sikre at all oppmåling og ekstern JavaScript er fullt lastet. I de neste linjene lager vi en matrise, som lagrer alle meldingene, a stikkontakt objekt og få snarveier til DOM-elementene våre. Igjen, i likhet med bakenden, binder vi en funksjon, som vil reagere på sokkelens aktivitet. I vårt tilfelle er dette et arrangement som heter budskap. Når en slik hendelse oppstår, forventer vi å motta en gjenstand, data, med eiendommen, budskap. Legg til denne meldingen i vår lagring og oppdater den innhold div. Vi har også tatt med logikken for å sende meldingen. Det er ganske enkelt, bare å sende ut en melding med navnet, sende.

Hvis du åpner http: // localhost: 3700, du vil støte på noen feil popup. Det er fordi vi trenger å oppdatere page.jade å inneholde de nødvendige JavaScript-filene.

head title = "Script for sanntids nettprat" (src = '/ chat.js') (src = '/ socket.io/socket.io.js')

Legg merke til at Socket.io klarer levering av socket.io.js. Du trenger ikke å bekymre deg for å laste ned denne filen manuelt.

Vi kan igjen kjøre serveren vår med node index.js i konsollen og åpne http: // localhost: 3700. Du bør se velkomstmeldingen. Selvfølgelig, hvis du sender noe, bør det vises i innholdets div. Hvis du vil være sikker på at den fungerer, åpner du en ny kategori (eller bedre en ny nettleser) og laster programmet. Det flotte med Socket.io er at det fungerer selv om du stopper NodeJS-serveren. Front-end vil fortsette å fungere. Når serveren er oppstart på nytt, vil chatten din også bli bra.

I sin nåværende tilstand er vår chat ikke perfekt, og krever noen forbedringer.

forbedringer

Den første forandringen som vi må gjøre er å identiteten til meldingene. For tiden er det ikke klart hvilke meldinger som er sendt av hvem. Det gode er at vi ikke trenger å oppdatere vår NodeJS-kode for å oppnå dette. Det er fordi serveren bare videresender data gjenstand. Så, vi må legge til en ny eiendom der, og les den senere. Før du foretar rettelser til chat.js, la oss legge til en ny inngang feltet, der brukeren kan legge til hans / hennes navn. Innenfor page.jade, endre kontroller div:

.kontroller | Navn: input # name (style = 'width: 350px;') br input # field (style = 'bredde: 350px;') input # send (type = 'knapp', verdi = "send")

Neste, i code.js:

window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var felt = document.getElementById ("field"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("innhold"); var navn = document.getElementById ("navn"); socket.on ('message', funksjon (data) if (data.message) messages.push (data); var html = "; for (var i = 0; i'; html + = meldinger [i] .message + '
';  content.innerHTML = html;  else console.log ("Det er et problem:", data); ); sendButton.onclick = function () if (name.value == "") alert ("Vennligst skriv navnet ditt!");  annet var text = field.value; socket.emit ("send", melding: tekst, brukernavn: name.value); ;

For å oppsummere endringene har vi:

Lagt til en ny snarvei for brukernavnet inngang felt
Oppdatert presentasjonen av meldingene litt
Legg til en ny brukernavn eiendom til objektet, som sendes til serveren

Hvis antall meldinger blir for høyt, må brukeren bla gjennom div:

content.innerHTML = html; content.scrollTop = content.scrollHeight;

Husk at den ovennevnte løsningen vil sannsynligvis ikke fungere i IE7 og under, men det er greit: det er på tide for IE7 å falme bort. Men hvis du vil sikre støtte, kan du gjerne bruke jQuery:

$ ( "# Innhold") scrollTop ($ ( "# content") [0] .scrollHeight.);

Det ville også være fint hvis inntastingsfeltet slettes etter å ha sendt meldingen:

socket.emit ("send", melding: tekst, brukernavn: name.value); field.value = "";

Det endelige kjedelige problemet er å klikke på sende knappen hver gang. Med et snev av jQuery kan vi lytte etter når brukeren trykker på Tast inn nøkkel.

$ (dokument) .ready (funksjon () $ ("# felt"). nøkkel opp (funksjon (e) hvis (e.keyCode == 13) sendMessage ();;;

Funksjonen, sende melding, kunne bli registrert, slik som:

sendButton.onclick = sendMessage = funksjon () ...;

Vær oppmerksom på at dette ikke er en god praksis, da den er registrert som en global funksjon. Men for vår lille test her, blir det bra.

Konklusjon

NodeJS er en ekstremt nyttig teknologi, og gir oss stor makt og glede, spesielt når vi vurderer det faktum at vi kan skrive rent JavaScript. Som du kan se, med bare noen få linjer med kode, klarte vi å skrive et fullt funksjonelt sanntids chatprogram. Temmelig stilig!

Ønsker du å lære mer om å bygge webapps med ExpressJS? Vi har deg dekket!

Kode