Share
Node.js og Websockets er den perfekte kombinasjonen for å skrive veldig raske, lagre gratis programmer som kan sende data til et stort antall kunder. Så hvorfor begynner vi ikke å lære om disse to temaene ved å bygge en chat-tjeneste! Vi ser hvordan du installerer Node.js-pakker, serverer en statisk side til klienten med en grunnleggende webserver, og konfigurer Socket.io til å kommunisere med klienten.
Så hvorfor bruke denne kombinasjonsboksen?
Det finnes mange plattformer som kan kjøre et chat-program, men ved å velge Node.js trenger vi ikke å lære et helt annet språk, det er bare JavaScript, men server-side.
Node.js er en plattform bygget på Chromes JavaScript runtime for å gjøre byggeprogrammer i JavaScript som kjører på serveren, enkelt. Node.js bruker en hendelsesdrevet, ikke-blokkerende I / O-modell, noe som gjør den perfekt til å bygge sanntidsapps.
Flere og flere Node.js applikasjoner blir skrevet med sanntids kommunikasjon i tankene. Et kjent eksempel er BrowserQuest fra Mozilla, en MMORPG skrevet helt i Node.js hvis kildekode er blitt utgitt på Github.
Node.js leveres med en innebygd pakkehåndterer: npm. Vi vil bruke den til å installere pakker som vil bidra til å øke hastigheten på applikasjonsutviklingsprosessen.
Vi bruker tre pakker for denne opplæringen: Jade, Express og Socket.io.
Hovedtrekket i applikasjonen vår er sanntids kommunikasjon mellom klienten og serveren.
HTML5 introduserer Websockets, men det er langt borte fra å bli støttet av alle brukere, så vi trenger en backup løsning.
Socket.io er vår backup løsning: den vil teste Websocket kompatibilitet, og hvis den ikke støttes, vil den bruke Adobe Flash, AJAX, eller en iFrame.
Endelig støtter det et veldig stort sett med nettlesere:
Det tilbyr også svært enkle funksjoner for å kommunisere mellom serveren og klienten på begge sider.
La oss starte med å installere de tre pakkene vi trenger.
Npm tillater oss å installere pakker veldig raskt, ved hjelp av en linje, så først gå til katalogen din og ha npm laste ned de nødvendige pakkene:
npm installere express jade socket.io
Nå kan vi begynne å bygge vår server-side kontroller for å betjene hovedsiden.
Vi skal lagre all server-side-koden i en "server.js" fil som vil bli utført av Node.js.
For å betjene vår statiske side vil vi bruke Express, en pakke som forenkler hele sendingsprosessen på serversiden.
Så la oss inkludere denne pakken i vårt prosjekt og starte serveren:
Accentsconagua
var express = krever ('express'), app = express.createServer (); Deretter må vi konfigurere Express for å betjene siden fra repertory visninger med Jade Templating Engine som vi installerte tidligere.
Express bruker en layoutfil som standard, men vi trenger ikke det fordi vi bare vil tjene en side, så i stedet vil vi deaktivere den.
Express kan også betjene en statisk repertoar til klienten som en klassisk webserver, så vi sender en "offentlig" mappe som inneholder alle våre JavaScript-, CSS- og bildefiler.
app.set ('views', __dirname + '/ views'); app.set ('view engine', 'jade'); app.set ("visningsalternativer", layout: false); app.configure (funksjon () app.use (express.static (__ dirname + '/ public'));); Deretter la vi lage to mapper inne i prosjektmappen vår som heter "offentlig" og "views".
Nå trenger vi bare å konfigurere Express for å betjene en "Home.jade" fil, som vi vil lage i et øyeblikk, og deretter sette Express for å lytte etter en bestemt port.
Jeg vil bruke port 3000, men du kan bruke det du foretrekker.
app.get ('/', funksjon (req, res) res.render ('home.jade');); app.listen (3000); 
Node.js bruker templerende motorer til å betjene nettsider. Det er nyttig å sende dynamiske sider og å bygge dem raskere.
I denne opplæringen bruker vi Jade. Syntaxen er veldig tydelig, og den støtter alt vi trenger.
"Jade er en high performance templating motor tungt påvirket av Haml og implementert med JavaScript for Node."
Nå skal jeg ikke gå over Jade i detalj, hvis du trenger mer hjelp, kan du finne svært godt skrevet dokumentasjon på Github repo.
Vi installerte Jade tidligere, men vi må inkludere det i vår server.js fil som vi gjorde for Express.
Ved konvensjon inkluderer vi våre biblioteker øverst på filen vår for å bruke dem senere, uten å måtte sjekke om de allerede er inkludert. Så plasser følgende kode øverst på din "server.js" fil:
var jade = krever ('jade'); Og det fullfører vår Jade-konfigurasjon. Express er allerede konfigurert for å bruke Jade med våre visningsfiler, for å sende et HTML-svar, trenger vi bare å opprette den filen.
Hvis vi starter vår server nå, vil den krasje fordi vi ber appen vår om å sende en side som ikke eksisterer ennå.
Vi skal ikke lage en fullverdig side, bare noe grunnleggende som har en tittel, en beholder for meldingene, et tekstområde, en sendeknapp og en brukerteller.
Gå videre og opprett en "Home.jade" side inne i "views" mappe med følgende kode:
doktype 5 html hodetittel Chat script (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 ") body div.container header h1 Et chat-program med Node.js og Socket.io-inngang (type = 'tekst') # pseudoInput-knapp # pseudoSet Set Pseudo div # chatEntries div # chatControls input (type = 'tekst') # messageInput-knapp # send Send
"Jade handler om innrykk"
Jade-språket handler om innrykk. Som du kan se, trenger vi ikke å lukke våre containere, bare det er nok at barnet i foreldrebeholderen er nok.
Vi bruker også en periode "" og et pund tegn "#" for å indikere elementets klasse eller ID, akkurat som i en CSS-fil.
Vi lenker også i tre skript øverst på filen. Den første er jQuery fra Google CDN, neste har vi Socket.io-skriptet som serveres automatisk av pakken, og til slutt en "script.js" fil som vil beholde alle våre tilpassede JS-funksjoner.
Socket.io er eventbasert, akkurat som Node. Målet er å gjøre sanntidsapplikasjoner mulig i alle nettlesere og mobilenheter, og slør linjene mellom disse forskjellige transportmekanismer. Det er bekymringsfritt, sanntid og 100% JavaScript.
Som de andre modulene må vi inkludere det i vår server.js fil. Vi vil også kjede på vår ekspressserver for å lytte etter tilkoblinger fra samme adresse og port.
var io = krever ('socket.io'). lytt (app); Den første hendelsen vi skal bruke er tilkoblingshendelsen. Den avfyres når en klient forsøker å koble til serveren; Socket.io lager en ny stikkontakt som vi vil bruke til å motta eller sende meldinger til klienten.
La oss begynne med å initialisere tilkoblingen:
io.sockets.on ('connection', funksjon (socket) // våre andre hendelser ...); Denne funksjonen tar to argumenter, den første er hendelsen, og den andre er tilbakeringingsfunksjonen, med sokkelobjektet.
Ved å bruke kode som dette, kan vi opprette nye hendelser på klienten og på serveren med Socket.io. Vi vil sette "Pseudo" arrangement og "budskap" hendelsen neste.
For å gjøre dette er det veldig enkelt, vi bruker bare samme syntaks, men denne gangen med vår stikkontakt objekt og ikke med "io.sockets" (med et "s" -objekt). Dette gjør at vi kan kommunisere spesielt med en klient.
Så inne i forbindelsesfunksjonen, la oss legge til i "Pseudo" arrangementskode.
socket.on ('setPseudo', funksjon (data) socket.set ('pseudo', data);); Tilbakeringingsfunksjonen tar ett argument, dette er dataene fra klienten, og i vårt tilfelle inneholder den pseudo. Med "sett" funksjon, tilordner vi en variabel til stikkontakten. Det første argumentet er navnet på denne variabelen, og det andre er verdien.
Deretter må vi legge til koden for "budskap" begivenhet. Det vil få brukerens pseudo, kringkaste en matrise til alle klienter som inneholder meldingen vi mottok, samt brukerens pseudo og logg den inn i konsollen vår.
socket.on ('message', funksjon (melding) socket.get ('pseudo', funksjon (feil, navn) var data = 'message': melding, pseudo: navn; socket.broadcast.emit melding ", data); console.log (" bruker "+ navn +" send dette: "+ melding);)); Dette fullfører konfigurasjonen av server-side. Hvis du vil, kan du gå videre og bruke andre hendelser for å legge til nye funksjoner i chatten.
Det fulle med Socket.io er at vi ikke trenger å bekymre oss for å håndtere klient frakoblinger. Når den kobles fra, vil Socket.io ikke lenger motta svar på "hjerteslag" meldinger og deaktiverer sesjonen som er knyttet til klienten. Hvis det bare var en midlertidig frakobling, vil klienten koble til og fortsette med økten.
Nå som vår server er konfigurert til å administrere meldinger, trenger vi en klient til å sende dem.
Klientsiden av Socket.io er nesten det samme som server-siden. Det fungerer også med tilpassede arrangementer, og vi vil opprette de samme som på serveren.
Så først opprett en "script.js" fil inne i offentlig mappe. Vi lagrer alle våre funksjoner inne i den.
Vi må først starte socket.io-forbindelsen mellom klienten og serveren. Den lagres i en variabel, som vi senere vil bruke til å sende eller motta data. Når tilkoblingen ikke er bestått, vil den automatisk koble til serveren som skal betjene siden.
var socket = io.connect ();
Deretter la vi opprette noen hjelpefunksjoner som vi trenger senere. Den første er en enkel funksjon for å legge til en melding på skjermen med brukerens pseudo.
funksjon addMessage (msg, pseudo) $ ("# chatEntries"). append (''+ pseudo +': '+ msg +'
'); Denne hjelperen bruker append-funksjonen fra jQuery for å legge til en div på slutten av #chatEntries div.
Nå skal vi skrive en funksjon som vi kan ringe når vi vil sende en ny melding.
funksjon sendMessage () hvis ($ ('# messageInput') .val ()! = "") socket.emit ('message', $ ('# messageInput') .val ()); addMessage ($ ('# messageInput') .val (), "Me", ny dato (). toISOString (), true); $ ('# messageInput') .val ("); Først bekrefter vi at tekstområdet vårt ikke er tomt, så sender vi en pakke som heter "budskap" til serveren som inneholder meldingsteksten, skriver vi ut den på skjermen med vår "AddMessage" funksjon, og til slutt fjerner vi all tekst fra tekstområdet.
Nå, når klienten åpner siden, må vi sette brukerens pseudo først. Denne funksjonen vil sende pseudoen til serveren og vise tekstområdet og send-knappen.
funksjon setPseudo () if ($ ("# pseudoInput") .val ()! = "") socket.emit ('setPseudo', $ ("# pseudoInput") .val ()); $ ( '# ChatControls') viser (.); $ ( '# PseudoInput') skjule (.); $ ( '# PseudoSet') skjule (.); I tillegg skjuler vi innstillingene for pseudoinnstilling når den sendes til serveren.
Nå som vi gjorde på server-siden, må vi sørge for at vi kan motta innkommende meldinger, og denne gangen skriver vi ut dem på skjermen. Vi bruker samme syntaks, men denne gangen kaller vi "AddMessage" funksjon.
socket.on ('message', funksjon (data) addMessage (data ['message'], data ['pseudo']);); Akkurat som med vår serverkonfigurasjon, er pakken som sendes til klienten en matrise som inneholder meldingen og pseudoen. Så vi ringer bare vår "AddMessage" funksjon som passerer i meldingen og pseudoen, som vi trekker ut fra den mottatte datapakken.
Nå trenger vi bare å legge til initialiseringsfunksjonen som avfyres når siden er fulllastet.
$ (funksjon () $ ("# chatControls"). Hide (); $ ("# pseudoSet"). klikk (funksjon () setPseudo ()); $ ("# submit"). ) sentMessage (););); Først skjuler vi chat kontrollene før pseudoen er angitt, og deretter setter vi to klikk lyttere som lytter etter klikk på våre to sende knapper. Den første er for pseudoen og den andre er for meldingene.
Og det bryter opp vårt klientsideskript.
Vi har nå en fungerende chat-tjeneste. For å starte det, bare kjør følgende kommando:
node server.js
I terminalen din bør du få en melding fra Socket.io som sier at serveren er startet. For å se siden din gå til 127.0.0.1:3000 (eller hvilken port du valgte tidligere).
Designet er veldig grunnleggende, men du kan enkelt legge til i et stilark med CSS3-overganger for innkommende meldinger, HTML5-lyder eller Bootstrap fra Twitter.
Som du ser, er server- og klientskriptene ganske like: dette er kraften til Node.js. Du kan bygge et program uten å skrive koden to ganger.
Til slutt har du kanskje lagt merke til at det bare tok 25 kodelinjer inne i vår server.js fil for å lage en funksjonell chat-app, med fantastisk ytelse. Det er veldig kort, men det fungerer også veldig bra.
Nå, hvis du er interessert, har jeg opprettet et bedre chat-tjenesteprogram, med et flott design, sammen med noen ekstra funksjoner. Det er vert på Nodester og kildekoden er på Github.
Her er en forhåndsvisning av den.
Takk for at du leste.
