• Acasă
  • Despre noi
  • Autori
  • Mărturii
  • Arhivă
  • Trimite Articol
  • Contact

WORLDIT

Lumea în 1 și 0.

  • Știri
    • Tehnologie
    • Tehnologie mobilă
    • Securitate
    • Developers
    • Știință
    • Benzi desenate
    • Jocuri
    • Intern
  • Tehnic
    • Browser
    • C#
    • C/C++
    • Challenge
    • HTML/CSS
    • Javascript, Ajax, jQuery
    • Open Source
    • PHP
    • Python
    • Securitate IT
    • Socializare
    • WordPress
    • Altele
  • Recenzii
  • Interviuri
  • Evenimente

Introducere în Node.js – cum să faci un chat realtime?

0
  • Publicat de Andrei Avădănei
  • în Javascript, Ajax, jQuery · Open Source · Socializare · Tehnic
  • — 13 aug., 2011 at 4:46 pm

Nota editorului : Articolul a fost scris de Roland Szabo pe blogul lui.

V-ați distrat cu ce am învățat în postul anterior despre web-dev cu Node.js? Lux, hai să continuăm.
Să începem cu primirea de date de la browser. Vom face asta cu un simplu XMLHttpRequest. Să modificăm pagina SSE.html să conțină următoarele elemente:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body><input type='text' id='message'/>
<button value='Send' id='send'>Send</button>
<script>
document.getElementById('send').addEventListener('click', sendmessage);
document.getElementById('message').addEventListener('keydown', function(event) {
    if (event.keyCode == 13) {
        sendmessage();
    }
});
function sendmessage() {
    var req = new XMLHttpRequest();
    req.open('POST', '/xhr');
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    req.send(document.getElementById('message').value);
    req.onreadystatechange = function (e) {
        if (req.readyState == 4) {
            if (req.status == 200)
                ;//console.log(req.responseText);
            else
                console.log("Error loading page\n");
        }
    };
}; </script>
</body>
</html>

Ce avem aici? Un tag input și un button. Codul Javascript conține o funcție și două event listeners care cheamă acea funcție: una când facem click pe butonul Submit, iar cealaltă când apăsăm Enter în căsuța de „chat”. Funcția nu face altceva decât să trimită prin POST conținutul inputului la /xhr.
Cum arată acum fișierul chat.js?

var http = require('http');
var fs = require('fs');
http.createServer(function(req, res) {
        if (req.method == "POST" && req.url == '/xhr') {
            var data = '';
            req.addListener('data', function(chunk) {
                data += chunk;
            });
            req.addListener('end', function() {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.write(data);
                res.end();
                console.log(data);
            });
        } else {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write(fs.readFileSync(__dirname + '/sse.html'));
            res.end();
        }
}).listen(8000);

Dacă cererea este prin POST și la adresa /xhr, atunci ne pregătim să primim conținutul prin POST. Mai întâi inițializăm variabila data cu un șir de caractere gol. Apoi atașăm funcții la două evenimente specifice requesturilor HTTP: data și end. Eventul data se trimite atunci când se primește o bucată nouă de date, iar cel de end se primește la … sfârșitul trimiterii. La fiecare „data” adăugăm ce s-a primit la acel event la ce am primit mai înainte, iar când s-a terminat transmisia, atunci prelucrăm. În acest caz trimitem înapoi ce am primit și scriem la consolă conținutul mesajului primit.
Dacă este orice alt tip de cerere, atunci afișăm pagina sse.html.
Okay, acum e timpul să combinăm ce am învățat data trecută (trimiterea de mesaje de la server la browser) cu ce am învățat azi (prelucrarea datelor primite de server).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
	<ul>

	</ul>
	<input type='text' id='message' />
	<button value='Send' id='send'>Send
	<script>
	var source = new EventSource('/events');
	source.addEventListener('message', function(e) {
		var ul = document.getElementsByTagName('ul')[0];
		var li = document.createElement('li');
		var data = e.data.split('\n')
		li.innerHTML = '<strong>'+data[0]+'</strong>:'+data[1];
		ul.appendChild(li);
		console.log(e);
	}, false);

	source.addEventListener('open', function(e) {
	  console.log('open');
	}, false);

	source.addEventListener('error', function(e) {
	  if (e.eventPhase == EventSource.CLOSED) {
		console.log('close');
	  }
	}, false);
	document.getElementById('send').addEventListener('click',sendmessage);
	document.body.addEventListener('keydown',function(event) {
		if (event.keyCode == 13) {
			sendmessage();
		}
	});
	function sendmessage() {
		var req = new XMLHttpRequest();
		req.open('POST', '/xhr');
		req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		req.send(document.getElementById('message').value);
		req.onreadystatechange = function (e) {
			if (req.readyState == 4) {
				if (req.status == 200)
					;//console.log(req.responseText);
				else
					console.log("Error loading page\n");
			}
		};
	};
	</script>
</body>
</html>

Asta e aproape perfect combinația celor două fișiere de dinainte, cu excepția faptului că avem o listă în care o să inserăm mesajele de chat, iar când primim un mesaj de la server, îl despărțim la ‘\n’. Datele de la server vor veni astfel încât pe un rând va fi numele celui care a trimis mesajul, iar pe al doilea rând va fi mesajul propriu-zis.

var http = require('http');
var fs = require('fs');

//Array to contain active resources
var resources = new Array();

http.createServer(function(req, res) {
	if (req.headers.accept && req.headers.accept == 'text/event-stream') {
		if (req.url == '/events') {
			res.writeHead(200, {
				'Content-Type': 'text/event-stream',
				'Cache-Control': 'no-cache',
				'Connection': 'keep-alive'
			});
			//Create a random ID for each guest in the chatroom
			res.chatID = 'guest'+Math.floor(Math.random()*1000);
			resources.push(res);
			//Remove from active chat resources if connection is closed
			req.addListener('close',function (event) {
				console.log('A connection was closed');
				var index = resources.indexOf(res);
				if (index != -1) {
					resources.splice(index,1);
				}
			});
		} else{
			res.writeHead(404);
			res.end();
		}
	} else {
		if(req.method == "POST" && req.url =='/xhr') {
			var data = '';
			req.addListener('data',function(chunk) {
				data+=chunk;
			});
			req.addListener('end',function() {
				res.writeHead(200, {'Content-Type': 'text/html'});
				res.write(data);
				res.end();
				//send the data to all the active chat resources
				for (var i=0; i<resources.length; i++) {
					constructSSE(resources[i],2,[resources[i].chatID,data]);
				}
			});

		}
		else {
			res.writeHead(200, {'Content-Type': 'text/html'});
			res.write(fs.readFileSync(__dirname + '/sse-node.html'));
			res.end();
		}
	}
}).listen(8000);

function constructSSE(res, id, data) {
	res.write('id: ' + id + '\n');
	//Adds the capability to send multiple lines of data if they are in an array
	if (data.constructor != Array)
		data = [data];
	for (var i = 0; i<data.length; i++)
		res.write("data: " + data[i] + '\n');
	res.write('\n');
}

Ce facem aici? Păi în primul rând, facem ceva ce nu putem face în PHP: stocăm într-un array fiecare response ca să știm la cine trebuie să trimitem informații înapoi. Când cineva se conecteză la event source, îl adăugăm la acest array, iar dacă se întrerupe conexiunea, îl eliminăm. Deasemenea, fiecărui response îi asociem un ID, ca să putem identifica fiecare utilizator care chatuiește. Când primim un mesaj prin XHR, îl trimitem mai departe la fiecare abonat din arrayul nostru.
Sper că ați înțeles și că v-a plăcut tutorialul. Se mai pot finisa multe la acest chat-page, dar aici e mai mult proof-of-concept.

Daca acest articol contine o greseala, selecteaza cuvintele sau fraza gresita si tasteaza combinatia de taste Shift + Enter sau apasa click aici pentru a o raporta. Multumim!

Etichete: chat realtimechat realtime cu node.jsdespre node.jsjavascriptnode.jsnode.js pentru incepatoritutorial node.js

— Andrei Avădănei a scris 1246 articole

Andrei scrie pe worldit.info din vara lui 2011. Este fondatorul Asociatiei Centrul de Cercetare in Securitate Informatica din Romania - CCSIR si coordoneaza DefCamp, cea mai importanta conferinta de securitate informatica & hacking din Europa Centrala si de Est. Andrei ofera in cadrul Bit Sentinel servicii de securitate informatica, penetration testing, security management, recuperarea de pe urma unui atac cibernetic, training-uri si workshop-uri.

  • Articolul anterior Introducere în Node.js – ce trebuie să ştii pentru a realiza aplicaţii realtime?
  • Articolul următor Germanii au reuşit să spargă serviciul de transmisie a datelor mobile

  • Facebook

    WorldIT.info
  • Ultimele Atacuri Cibernetice din Romania – RO Hacked

    • imacoolat-curat.ro
      | Published: februarie 3, 2020 - 2:00 am
    • hotel-palace.ro
      | Published: februarie 2, 2020 - 2:00 am
    • www.tahometru.ro
      | Published: februarie 1, 2020 - 2:00 am
    • alexisart.ro
      | Published: ianuarie 30, 2020 - 2:00 am
    • justshop.ro
      | Published: ianuarie 29, 2020 - 2:00 am
    RO Hacked este registrul atacurilor cibernetice din România.
  • Caută

  • Articole Recomandate

    • Recent Posts
    • Tags
    • Număr record de participanți la DefCamp 2015, cel mai important eveniment dedicat securității cibernetice din Europe Centrala si de Estdecembrie 2, 2015
    • La DefCamp 2015 vei afla prin ce tehnici pot fi evitate măsurile de securitate ale sistemelor informatice criticeoctombrie 16, 2015
    • Ultima sansa sa rezervi bilete de tip Early Bird la DefCamp 2015septembrie 1, 2015
    • 15 sfaturi despre cum poti deveni un programator bun venite de la specialisti romaniaugust 4, 2015
    • algoritmica Android antivirus Apple Avadanei Andrei benzi desenate BitDefender blog browser C++ Chrome concurs eveniment Facebook Firefox Google google chrome hacking html5 infografic informatica internet Internet Explorer IT javascript linux Microsoft Mozilla Firefox online PHP programare retea sociala review Romania securitate Tehnologie Twitter web Windows Windows 7 Wordpress WorldIT worldit.info Yahoo! YouTube
  • ianuarie 2021
    L Ma Mi J V S D
    « dec.    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031
  • Link-uri Sponsorizate

    • laptop second hand

    • Calculatoare Second Hand

    • cod voucher pc garage

  • Home
  • Tehnic
  • Javascript, Ajax, jQuery
  • Introducere în Node.js – cum să faci un chat realtime?
  • Important

    • Bit Sentinel
    • Centrul de Cercetare în Securitate Informatică din România
    • DefCamp
  • Prieteni

    • BetiT.ro
    • bijuterii handmade
    • Computerica | Resurse gratuite PC
    • Descopera.org
    • Gadgeturi si IT – Giz.ro
  • Prieteni

    • PC – Config
    • RO Hacked
    • Stiri IT

Copyright © 2009-2014 WORLDIT. Toate drepturile Rezervate.
Termeni și condiții | Contact | Licența Creative Commons

Multumim foarte mult ca ne-ai raportat greseala! O vom remedia in cel mai scurt timp posibil.