Share
NodeJS geeft me de mogelijkheid om backend-code te schrijven in een van mijn favoriete talen: JavaScript. Het is de perfecte technologie voor het bouwen van real-time toepassingen. In deze zelfstudie laat ik je zien hoe je een webchatapp maakt met behulp van ExpressJS en Socket.io.
Trouwens, als je een kant-en-klare chat-oplossing wilt vinden met Node.js, kijk dan eens naar Yahoo! Messenger node.JS BOT op Envato Market.
Yahoo! Messenger node.JS BOT op Envato Market Natuurlijk, het eerste wat je moet doen is NodeJS op je systeem laten installeren. Als u een Windows- of Mac-gebruiker bent, kunt u nodejs.org bezoeken en het installatieprogramma downloaden. Als u in plaats daarvan Linux prefereert, raad ik u aan naar deze link te verwijzen. Hoewel ik hier niet verder op inga, als u problemen ondervindt met de installatie, help ik u graag verder; laat een reactie achter dit bericht achter.
Zodra u NodeJS hebt geïnstalleerd, bent u klaar om de benodigde instrumenten in te stellen.
Doorgaan, binnen een lege map, maak een package.json bestand met de volgende inhoud.
"name": "RealTimeWebChat", "version": "0.0.0", "description": "Real time web chat", "dependencies": "socket.io": "latest", "express": " nieuwste "," jade ":" nieuwste "," auteur ":" ontwikkelaar "
Door de console te gebruiken (onder Windows - opdrachtprompt) navigeert u naar uw map en voert u uit:
npm installeren
Binnen een paar seconden heb je alle benodigde afhankelijkheden gedownload naar de node_modules directory.
Laten we beginnen met een eenvoudige server, die de HTML-pagina van de toepassing zal opleveren en vervolgens doorgaan met de meer interessante bits: de real-time communicatie. Creëer een index.js bestand met de volgende core expressjs code:
Accentsconagua
var express = require ("express"); var app = express (); var-poort = 3700; app.get ("/", functie (req, res) res.send ("Het werkt!");); app.listen (poort); console.log ("Luisteren op poort" + poort); Hierboven hebben we een applicatie gemaakt en zijn poort gedefinieerd. Vervolgens hebben we een route geregistreerd, in dit geval een eenvoudige GET-aanvraag zonder parameters. Voorlopig stuurt de handler van de route gewoon wat tekst naar de client. Eindelijk, natuurlijk, aan de onderkant, draaien we de server. Om de applicatie te initialiseren, voert u vanaf de console:
node index.js
De server draait, dus je zou moeten kunnen openen http://127.0.0.1:3700/ en zie:
Het werkt!
Nu, in plaats van "Het werkt" we zouden HTML moeten dienen. In plaats van pure HTML, kan het nuttig zijn om een sjabloonengine te gebruiken. Jade is een uitstekende keuze, die een goede integratie heeft met ExpressJS. Dit gebruik ik meestal in mijn eigen projecten. Maak een directory, genaamd tpl, en zet het volgende page.jade bestand erin:
!!! html head title = "Realtime webchat" 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 = 'button', value = "send")
De syntaxis van de Jade is niet zo ingewikkeld, maar voor een volledige gids, stel ik voor dat je naar jade-lang.com verwijst. Om Jade met ExpressJS te kunnen gebruiken, hebben we de volgende instellingen nodig.
app.set ('views', __dirname + '/ tpl'); app.set ('view engine', 'jade'); app.engine ('jade', vereisen ('jade') .__ express); app.get ("/", functie (req, res) res.render ("page");); Deze code informeert Express waar uw sjabloonbestanden zijn en welke sjabloonmotor moet worden gebruikt. Het specificeert allemaal de functie die de code van de sjabloon zal verwerken. Zodra alles is ingesteld, kunnen we de .geven methode van de antwoord object en stuur gewoon onze Jade-code naar de gebruiker.
De uitvoer is op dit moment niet speciaal; niets meer dan een div element (degene met id inhoud), die wordt gebruikt als een houder voor de chatberichten en twee bedieningselementen (invoerveld en knop), die we zullen gebruiken om het bericht te verzenden.
Omdat we een extern JavaScript-bestand gebruiken dat de front-endlogica bevat, moeten we ExpressJS op de hoogte stellen waar naar dergelijke bronnen moet worden gezocht. Maak een lege map, openbaar, en voeg de volgende regel toe vóór de oproep naar de .luister methode.
app.use (express.static (__ dirname + '/ public'));
Tot zover goed; we hebben een server die met succes reageert op GET-verzoeken. Nu is het tijd om toe te voegen Socket.io integratie. Verander deze regel:
app.listen (poort);
naar:
var io = vereisen ('socket.io'). listen (app.listen (poort)); Hierboven passeerden we de ExpressJS-server naar Socket.io. In feite zal onze real-time communicatie nog steeds plaatsvinden op dezelfde poort.
Vooruitkijkend moeten we de code schrijven die een bericht van de klant ontvangt en deze naar alle anderen sturen. Elke Socket.io-applicatie begint met een verbinding handler. We zouden er een moeten hebben:
io.sockets.on ('connection', function (socket) socket.emit ('message', message: 'welcome to the chat'); socket.on ('send', function (data) io. sockets.emit ('message', data););); Het object, stopcontact, die wordt doorgegeven aan uw handler, is eigenlijk de socket van de client. Zie het als een kruising tussen uw server en de browser van de gebruiker. Na een succesvolle verbinding sturen we een Welkom type bericht en, natuurlijk, binden aan een andere handler die zal worden gebruikt als een ontvanger. Dientengevolge, zou de cliënt een bericht met de naam moeten uitzenden, sturen, die we zullen vangen. Hierna sturen we de gegevens die door de gebruiker zijn verzonden eenvoudig door naar alle andere sockets met io.sockets.emit.
Met de bovenstaande code is onze back-end klaar om berichten te ontvangen en naar de clients te verzenden. Laten we wat front-end code toevoegen.
creëren chat.js, en plaats het in de openbaar directory van uw applicatie. Plak de volgende code:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var field = document.getElementById ("field"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("inhoud"); socket.on ('message', function (data) if (data.message) messages.push (data.message); var html = "; for (var i = 0; i Onze logica is ingepakt in een .onload handler om ervoor te zorgen dat alle opmaak en externe JavaScript volledig zijn geladen. In de volgende paar regels maken we een array, waarin alle berichten worden opgeslagen, een stopcontact object en enkele snelkoppelingen naar onze DOM-elementen. Nogmaals, vergelijkbaar met het back-end, binden we een functie die reageert op de activiteit van de socket. In ons geval is dit een evenement met de naam bericht. Wanneer een dergelijke gebeurtenis plaatsvindt, verwachten we een object te ontvangen, gegevens, met de eigenschap, bericht. Voeg dat bericht toe aan onze opslag en werk het inhoud div. We hebben ook de logica toegevoegd voor het verzenden van het bericht. Het is vrij eenvoudig, eenvoudig een bericht uitzenden met de naam, sturen.
Als je opent http: // localhost: 3700, je komt een aantal foutmeldingen tegen. Dat komt omdat we moeten updaten page.jade om de noodzakelijke JavaScript-bestanden te bevatten.
head title = "Realtime webchat" script (src = '/ chat.js') script (src = '/ socket.io/socket.io.js')
Merk op dat Socket.io de levering van beheert socket.io.js. U hoeft zich geen zorgen te maken over het handmatig downloaden van dit bestand.
We kunnen onze server opnieuw gebruiken node index.js in de console en open http: // localhost: 3700. U zou het welkomstbericht moeten zien. Als u iets verzendt, moet dit uiteraard in de inhoud worden weergegeven div. Als u zeker wilt weten dat het werkt, opent u een nieuw tabblad (of beter een nieuwe browser) en laadt u de applicatie. Het mooie van Socket.io is dat het werkt, zelfs als u de NodeJS-server stopt. De front-end blijft werken. Zodra de server opnieuw is opgestart, is uw chat ook in orde.
In de huidige staat is onze chat niet perfect en vereist enkele verbeteringen.
De eerste verandering die we moeten aanbrengen, is de identiteit van de berichten. Momenteel is het niet duidelijk welke berichten door wie worden verzonden. Het goede ding is dat we onze NodeJS-code niet hoeven bij te werken om dit te bereiken. Dat komt omdat de server gewoon de gegevens voorwerp. Dus we moeten daar een nieuwe eigenschap toevoegen en deze later lezen. Voordat u correcties aanbrengt chat.js, laten we een nieuw toevoegen invoer veld, waar de gebruiker zijn / haar naam kan toevoegen. Binnen page.jade, verander de controls div:
.controles | Naam: input # naam (style = 'width: 350px;') br input # field (style = 'width: 350px;') input # send (type = 'button', value = "send")
Volgende, in code.js:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var field = document.getElementById ("field"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("inhoud"); var name = document.getElementById ("name"); socket.on ('message', function (data) if (data.message) messages.push (data); var html = "; for (var i = 0; i'; html + = berichten [i]. bericht + '
'; content.innerHTML = html; else console.log ("Er is een probleem:", data); ); sendButton.onclick = function () if (name.value == "") alert ("Typ uw naam!"); else var text = field.value; socket.emit ('send', message: text, username: name.value); ; Om de wijzigingen samen te vatten, hebben we:
invoer veld-gebruikersnaam eigenschap van het object, die naar de server wordt verzondenAls het aantal berichten te hoog wordt, moet de gebruiker scrollen door de div:
content.innerHTML = html; content.scrollTop = content.scrollHeight;
Houd er rekening mee dat de bovenstaande oplossing waarschijnlijk niet werkt in IE7 en lager, maar dat is oke: het is tijd voor IE7 om te vervagen. Als u echter ondersteuning wilt bieden, kunt u jQuery gebruiken:
$ ( "# Content") scrollTop ($ ( "# content") [0] .scrollHeight).;
Het zou ook leuk zijn als het invoerveld wordt gewist na het verzenden van het bericht:
socket.emit ('send', message: text, username: name.value); field.value = ""; Het laatste saaie probleem is het klikken op de sturen knop elke keer. Met een vleugje jQuery kunnen we luisteren wanneer de gebruiker op de invoeren sleutel.
$ (document) .ready (function () $ ("# field"). keyup (functie (e) if (e.keyCode == 13) sendMessage (););); De functie, bericht versturen, kan worden geregistreerd, zoals zo:
sendButton.onclick = sendMessage = function () ...;
Houd er rekening mee dat dit geen best practice is, omdat het is geregistreerd als een globale functie. Maar voor onze kleine test hier komt alles goed.
NodeJS is een uiterst nuttige technologie en biedt ons veel kracht en vreugde, vooral als we er rekening mee houden dat we pure JavaScript kunnen schrijven. Zoals u ziet, hebben we met slechts een paar regels code een volledig functionele real-time chat-applicatie kunnen schrijven. Best netjes!
Wilt u meer weten over het bouwen van web-apps met ExpressJS? We hebben je gedekt!
