Share
Node.js en WebSockets zijn de perfecte combinatie om zeer snelle, lag-free applicaties te schrijven die gegevens naar een groot aantal clients kunnen verzenden. Dus waarom beginnen we niet te leren over deze twee onderwerpen door een chatservice te bouwen! We zullen zien hoe Node.js-pakketten te installeren, een statische pagina aan de client te serveren met een eenvoudige webserver en Socket.io te configureren voor communicatie met de client.
Dus waarom deze combo gebruiken?
Er zijn veel platforms die een chat-applicatie kunnen draaien, maar door Node.js te kiezen hoeven we geen compleet andere taal te leren, het is gewoon JavaScript, maar server-side.
Node.js is een platform gebouwd op de JavaScript-runtime van Chrome om het bouwen van applicaties in JavaScript op de server eenvoudig te maken. Node.js maakt gebruik van een evenementgestuurd, niet-blokkerend I / O-model, waardoor het perfect is voor het bouwen van real-time apps.
Er worden steeds meer Node.js-applicaties geschreven met realtime communicatie in gedachten. Een beroemd voorbeeld is BrowserQuest van Mozilla, een MMORPG volledig geschreven in Node.js waarvan de broncode is vrijgegeven op Github.
Node.js wordt geleverd met een ingebouwde pakketbeheerder: npm. We zullen het gebruiken om pakketten te installeren die ons ontwikkelingsproces van de applicatie zullen versnellen.
We gebruiken drie pakketten voor deze zelfstudie: Jade, Express en Socket.io.
Het belangrijkste kenmerk van onze applicatie is de real-time communicatie tussen de client en de server.
HTML5 introduceert Websockets, maar het wordt nog lang niet door alle gebruikers ondersteund, dus we hebben een back-upoplossing nodig.
Socket.io is onze back-upoplossing: het test de compatibiliteit met websockets en als het niet wordt ondersteund, gebruikt het Adobe Flash, AJAX of een iFrame.
Ten slotte ondersteunt het een zeer groot aantal browsers:
Het biedt ook zeer eenvoudige functies om te communiceren tussen de server en de client, aan beide kanten.
Laten we beginnen met het installeren van de drie pakketten die we nodig hebben.
Npm stelt ons in staat om pakketten zeer snel te installeren, gebruikmakend van één regel, dus ga eerst naar je directory en download npm de benodigde pakketten:
npm installeer express jade socket.io
Nu kunnen we beginnen met het bouwen van onze server-side controller om de hoofdpagina te bedienen.
We gaan alle server-side code opslaan in a "Server.js" bestand dat zal worden uitgevoerd door Node.js.
Om onze statische pagina te bedienen, gebruiken we Express, een pakket dat het hele verzendproces van de serverzijde vereenvoudigt.
Laten we dit pakket opnemen in ons project en de server starten:
Accentsconagua
var express = require ('express'), app = express.createServer (); Vervolgens moeten we Express configureren om de pagina vanuit de weergaven van het repertorium te bedienen met de Jade-template-engine die we eerder hebben geïnstalleerd.
Express maakt standaard gebruik van een lay-outbestand, maar we hebben het niet nodig omdat we slechts één pagina weergeven, dus in plaats daarvan zullen we het uitschakelen.
Express kan ook een statisch repertoire voor de klant dienen als een klassieke webserver, dus we zullen een "openbaar" map die al onze JavaScript-, CSS- en afbeeldingsbestanden bevat.
app.set ('views', __dirname + '/ views'); app.set ('view engine', 'jade'); app.set ("weergaveopties", layout: false); app.configure (function () app.use (express.static (__ dirname + '/ public'));); Laten we vervolgens twee mappen maken in onze projectmap met de naam "openbaar" en "keer bekeken".
Nu moeten we Express configureren om een server te kunnen gebruiken "Home.jade" bestand, dat we in een oogwenk creëren, en vervolgens Express instellen om naar een specifieke poort te luisteren.
Ik zal poort 3000 gebruiken, maar je kunt gebruiken wat je maar wilt.
app.get ('/', functie (req, res) res.render ('home.jade');); app.listen (3000); 
Node.js maakt gebruik van templating-engines om webpagina's te presenteren. Het is handig om dynamische pagina's te verzenden en deze sneller op te bouwen.
In deze tutorial gebruiken we Jade. De syntaxis is heel duidelijk en het ondersteunt alles wat we nodig hebben.
"Jade is een high performance template-engine die sterk wordt beïnvloed door Haml en geïmplementeerd met JavaScript voor Node."
Nu ga ik niet in detail over Jade gaan, als je meer hulp nodig hebt, kun je heel goed geschreven documentatie vinden over zijn Github repo.
We hebben Jade eerder geïnstalleerd, maar we moeten het in onze opnemen server.js bestand zoals we deden voor Express.
Bij conventie voegen we onze bibliotheken bovenaan ons bestand toe om ze later te gebruiken, zonder te controleren of ze al zijn opgenomen. Plaats dus de volgende code bovenaan je "Server.js" het dossier :
var jade = require ('jade'); En daarmee is onze Jade-configuratie voltooid. Express is al ingesteld om Jade te gebruiken met onze weergavebestanden, om een HTML-antwoord te verzenden, we hoeven alleen dat bestand aan te maken.
Als we onze server nu starten, crashen we omdat we onze app vragen een pagina te verzenden die nog niet bestaat.
We gaan geen pagina met volledige functies maken, maar iets basaals met een titel, een container voor de berichten, een tekstgebied, een verzendknop en een gebruikersteller.
Ga je gang en maak een "Home.jade" pagina binnen de "keer bekeken" map met de volgende code:
doctype 5 html head title 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 Een chat-applicatie met Node.js en Socket.io input (type = 'text') # pseudoInput button # pseudoSet Set Pseudo div # chatEntries div # chatControls input (type = 'text') # messageInput knop # submit Verzenden
"Jade gaat helemaal over inspringen"
De Jade-taal heeft alles te maken met inspringen. Zoals u kunt zien, hoeven we onze containers niet te sluiten, alleen het inspringen van de kinderen van de bovenliggende container is voldoende.
We gebruiken ook een punt "" en een hekje "#" om de klasse of ID van het element aan te geven, net als in een CSS-bestand.
We koppelen ook in drie scripts aan de bovenkant van het bestand. De eerste is jQuery van Google CDN, vervolgens hebben we het Socket.io-script dat automatisch door het pakket wordt geserveerd, en ten slotte een "Script.js" bestand dat al onze aangepaste JS-functies behoudt.
Socket.io is op gebeurtenissen gebaseerd, net als Node. Het doel is om real-time apps mogelijk te maken in elke browser en elk mobiel apparaat, waardoor de grenzen tussen deze verschillende transportmechanismen vervagen. Het is zorgeloos, realtime en 100% JavaScript.
Net als de andere modules, moeten we het opnemen in onze server.js het dossier. We zullen ook ketenen op onze express-server om te luisteren naar verbindingen vanaf hetzelfde adres en dezelfde poort.
var io = vereisen ('socket.io'). listen (app); De eerste gebeurtenis die we zullen gebruiken, is de verbindingsgebeurtenis. Het wordt geactiveerd wanneer een client verbinding met de server probeert te maken; Socket.io maakt een nieuwe socket die we gebruiken om berichten te ontvangen of te verzenden naar de client.
Laten we beginnen met het initialiseren van de verbinding:
io.sockets.on ('verbinding', functie (socket) // onze andere evenementen ...); Deze functie heeft twee argumenten nodig, de eerste is de gebeurtenis en de tweede is de callback-functie, met het socket-object.
Met behulp van deze code kunnen we nieuwe events maken op de client en op de server met Socket.io. We zullen de "pseudo" evenement en de "bericht" evenement volgende.
Om dit te doen, het is heel eenvoudig, we gebruiken gewoon dezelfde syntaxis, maar deze keer met onze stopcontact object en niet met de "Io.sockets" (met een "s") object. Dit stelt ons in staat om specifiek met één klant te communiceren.
Dus laten we binnen onze verbindingsfunctie de "pseudo" gebeurteniscode.
socket.on ('setPseudo', functie (gegevens) socket.set ('pseudo', data);); De callback-functie neemt één argument, dit zijn de gegevens van de client en in ons geval bevat het de pseudo. Met de "Set" functie, wijzen we een variabele toe aan de socket. Het eerste argument is de naam van deze variabele en de tweede is de waarde.
Vervolgens moeten we de code toevoegen voor de "bericht" evenement. Het krijgt de pseudo van de gebruiker, zendt een array naar alle clients met het bericht dat we hebben ontvangen, evenals de pseudo van de gebruiker en logt het in op onze console.
socket.on ('bericht', functie (bericht) socket.get ('pseudo', functie (fout, naam) var data = 'message': message, pseudo: name; socket.broadcast.emit (' message ', data); console.log ("gebruiker" + naam + "verzend dit:" + bericht);)); Hiermee is onze serverconfiguratie voltooid. Als je wilt, kun je doorgaan en andere evenementen gebruiken om nieuwe functies aan de chat toe te voegen.
Het leuke aan Socket.io is dat we ons geen zorgen hoeven te maken over het afhandelen van verbroken verbindingen met clients. Wanneer de verbinding wordt verbroken, ontvangt Socket.io geen reacties meer op 'heartbeat'-berichten en wordt de sessie die aan de client is gekoppeld gedeactiveerd. Als het slechts een tijdelijke verbreking was, zal de client opnieuw verbinding maken en doorgaan met de sessie.
Nu onze server is geconfigureerd om berichten te beheren, hebben we een client nodig om deze te verzenden.
De client-kant van Socket.io is bijna hetzelfde als de server. Het werkt ook met aangepaste evenementen en we zullen dezelfde maken als op de server.
Dus maak eerst een "Script.js" bestand in de openbaar map. We zullen al onze functies erin opslaan.
We moeten eerst de socket.io-verbinding starten tussen de client en de server. Het wordt opgeslagen in een variabele, die we later zullen gebruiken om gegevens te verzenden of te ontvangen. Wanneer de verbinding geen argumenten doorgeeft, maakt deze automatisch verbinding met de server die de pagina zal bedienen.
var socket = io.connect ();
Laten we vervolgens een aantal helperfuncties maken die we later nodig hebben. De eerste is een eenvoudige functie om een bericht aan het scherm toe te voegen met de pseudo van de gebruiker.
functie addMessage (msg, pseudo) $ ("# chatEntries"). append (''+ pseudo +': '+ msg +'
'); Deze helper gebruikt de append-functie van jQuery om een toe te voegen div aan het einde van de #chatInstellingen div.
Nu gaan we een functie schrijven die we kunnen bellen wanneer we een nieuw bericht willen sturen.
functie sendMessage () if ($ ('# messageInput'). val ()! = "") socket.emit ('message', $ ('# messageInput'). val ()); addMessage ($ ('# messageInput'). val (), "Me", nieuwe datum (). toISOString (), true); $ ('# messageInput'). val ("); Eerst verifiëren we dat ons tekstvak niet leeg is en sturen we een pakket met de naam "bericht" naar de server die de berichttekst bevat, drukken we deze op het scherm af met onze "bericht toevoegen" functie, en ten slotte verwijderen we alle tekst uit het tekstgebied.
Wanneer de client de pagina opent, moeten we eerst de pseudo van de gebruiker instellen. Deze functie stuurt de pseudo naar de server en toont het tekstveld en de verzendknop.
function setPseudo () if ($ ("# pseudoInput"). val ()! = "") socket.emit ('setPseudo', $ ("# pseudoInput"). val ()); $ ( '# ChatControls') geven (.); $ ( '# PseudoInput') te verbergen ().; $ ( '# PseudoSet') te verbergen ().; Bovendien verbergen we de pseudo-instellingstoetsen wanneer deze naar de server wordt verzonden.
Nu, net als aan de serverkant, moeten we ervoor zorgen dat we inkomende berichten kunnen ontvangen en deze keer zullen we ze op het scherm afdrukken. We zullen dezelfde syntaxis gebruiken, maar deze keer noemen we het "bericht toevoegen" functie.
socket.on ('message', function (data) addMessage (data ['message'], data ['pseudo']);); Net als bij onze serverconfiguratie is het pakket dat naar de client wordt verzonden een array met het bericht en de pseudo. Dus we bellen gewoon onze "bericht toevoegen" functie passeren in het bericht en de pseudo, die we extraheren uit het ontvangen datapakket.
Nu hoeven we alleen maar de initialisatiefunctie toe te voegen die wordt geactiveerd zodra de pagina volledig is geladen.
$ (function () $ ("# chatControls"). hide (); $ ("# pseudoSet"). klik (functie () setPseudo ()); $ ("# submit"). klik (functie ( ) verzonden bericht();); ); Eerst verbergen we de chatknoppen voordat de pseudo is ingesteld en vervolgens stellen we luisteraars met twee klikken in die luisteren naar klikken op onze twee verzendknoppen. De eerste is voor de pseudo en de tweede is voor de berichten.
En dat omhult ons client-side script.
We hebben nu een werkende chatservice. Om het te starten, voert u gewoon de volgende opdracht uit:
knooppunt server.js
In uw terminal zou u een bericht van Socket.io moeten krijgen dat zegt dat de server is gestart. Om uw pagina te zien ga naar 127.0.0.1:3000 (of welke poort je eerder hebt gekozen).
Het ontwerp is erg eenvoudig, maar je kunt eenvoudig een stylesheet toevoegen met CSS3-overgangen voor inkomende berichten, HTML5-geluiden of Bootstrap van Twitter.
Zoals u ziet, zijn de server- en client-scripts redelijk vergelijkbaar: dit is de kracht van Node.js. U kunt een applicatie bouwen zonder de code twee keer te hoeven schrijven.
Ten slotte is het u misschien opgevallen dat er slechts 25 regels code in ons zijn ingevoerd server.js bestand om een functionele chat-app te maken, met verbluffende prestaties. Het is erg kort, maar het werkt ook erg goed.
Als u nu geïnteresseerd bent, heb ik een betere chatservice-app gemaakt met een goed ontwerp en enkele extra functies. Het wordt gehost op Nodester en de broncode staat op Github.
Hier is een voorproefje van.
Bedankt voor het lezen.
