Acest articol a fost mutat aici. Pentru cea mai recentă versiune a acestui articol vă rugăm să vizitați link-ul dat.

aceasta ar putea fi cea mai temută întrebare dintre noii dezvoltatori despre cum să faci o aplicație cu Angular și Socket.io. deoarece majoritatea aplicațiilor folosesc prize pentru comunicarea în timp real a Frontendcu Backend. Deci, astăzi voi vorbi despre cum să se integreze socket.io cu o aplicație unghiulară. Acest cod ar funcționa pentru toate versiunile unghiulare de mai sus Angular1.

actualizat-acest articol a fost actualizat în decembrie 2020 pentru a gestiona cea mai recentă versiune v3 modificări ale socket.io

să începem prin crearea unui proiectnode mai întâi.

creați un nou directory și apoi introduceți-l.

mkdir socketio-node

aceasta va crea un folder gol cu numelesocketio-node.

vom folosi nodul.JS web framework express. Asigurați-vă că nod.JS este instalat pe sistemul dvs.

Mai întâi să creăm unpackage.json fișier manifest care descrie proiectul nostru.
Creați un fișier numit pachet.JSON și lipiți codul de mai jos în el.(O puteți face și cu npm init)

{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}

acum, pentru a popula cu ușurință dependencies proprietatea trebuie să instalăm express, tastați acest lucru în terminal.

npm install express

se va instala și adăuga cea mai recentă versiune a express în proiectul nostru și dumneavoastrădependencies va arata acum ca

"dependencies": {
"express": "^4.17.1"
}

acum, că express este instalat putem crea unindex.js fișier care va configura aplicația noastră.

const app = require('express')();
const http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});

acest cod este explicat în următorii pași:

• Express inițializează app pentru a fi un handler de funcții pe care îl puteți furniza unui server HTTP (așa cum se vede în linia 2).
• definim un handler de traseu/ care este apelat atunci când ne-am lovit site-ul nostru acasă.
• facem serverul http asculta pe portul 3000.

Dacă executați node index.js ar trebui să vedeți următoarele:

deschidere http://localhost:3000 în browser-ul ar arata ca:

acum să integrăm socket.io în aplicația noastră nod. În primul rând, avem nevoie pentru a instala socket.io dependență în aplicația noastră. Rulați acest lucru în terminal.

npm install socket.io

aceasta va instala modulul și va adăuga dependența lapackage.json. Acum să edităm index.js pentru a-l adăuga:

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origins: 
}
});app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});http.listen(3000, () => {
console.log('listening on *:3000');
});

observați că inițializez o nouă instanță a socket.io pe linia 3 trecând obiectul http (serverul HTTP) și opțiunile cors (actualizate pentru socket.io v3) pentru a permite URL-ul nostru localhost unghiular, puteți pune în url-ul sau clientul frontend, în cazul meu a fost localhost:4200
apoi am asculta pe connection și disconnection evenimente pentru prize de intrare, și l-am conecta la consola.

Backend nostru este bun pentru a merge de acum, vom reveni la nostrunode cod atunci când vom implementa mai multe evenimente în continuare.

să începem prin crearea unei aplicațiiAngular acum. Voi crea o nouă aplicație Angular de la zero, în timp ce majoritatea dintre voi ar avea deja una creată cu dvs.
cei care au deja un lucruAngular app poate sări peste următorul cod:

npm install -g @angular/cli
ng new socketio-angular

aceasta ar instala cea mai recentă versiune aAngular CLI și de a crea o nouă aplicație unghiulară de la zero.

acum să adăugăm socket.io dependency în aplicația noastră unghiulară.

cd socketio-angular
npm install socket.io-client

aceasta ar instala cea mai recentăsocket.io-client bibliotecă în aplicația noastră unghiulară.

acum să începem prin crearea unui service pentru a gestiona socket.io conexiune. Aș crea un nivel rădăcinăsingleton serviciu numitsocketio.service.ts și includ că înAppModule . Puteți crea serviciul în funcție de structura proiectului.
puteți crea serviciul executând următoarea comandă.

ng g s socketio

aceasta ar crea un serviciu numit socketio.service.ts . Structura directorului ar arăta cam așa. Acesta este doar un simplu demo de o pagină, așa că am adăugat serviciul în folderul de bază ca acesta.

acum, du-te în socketio.service.ts fișier și importați următoarele:

import { io } from 'socket.io-client';

acum să adăugăm punctul final al soclului la care vom conecta soclul în interiorul fișieruluienvironment.ts.

export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};

acum să încercăm să ne conectăm la priza noastră și să creăm o conencție de soclu. Mai întâi trebuie să adăugăm SocketioService în AppModule și să injectăm serviciul în app.component.ts . Să adăugăm mai întâi serviciul în furnizorii noștri. În app.module.ts faceți acest lucru:

@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }

și să mergem lasocketio.service.ts și scrie o funcție socket init.

export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}

aceasta va declara o variabilă numită socket și apoi după apelarea metodei setupSocketConnectionsocket variabila va conține obiectul socket conectat.

acum, să numim această metodă de laapp.component.ts în interiorul ngOnInit.

export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}

dacă utilizați Angular 6 și mai sus, s-ar putea rula în această eroare.

Uncaught ReferenceError: global is not defined

acest lucru se datorează faptului că pe versiunea 6 a Angular CLI Angular team removind shim pentruglobal și alte noduri încorporate. Dacă folosim o bibliotecă care presupune că aceste globale sunt prezente(socket.io-client în cazul nostru), puteți încerca să o ștergeți manual în polyfills.ts fișier:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

adăugând această linie la polyfills.ts fișier ar rezolva problema și aplicația ar fi de lucru din nou. Pentru a citi mai multe despre problema de mai sus, urmați acest link.

după rularea aplicației Angular acum, Puteți vedea socket conectat și consola noastră app nod arată a user connected ca aceasta:

când deconectați soclul sau închideți pagina web, puteți vedea user disconnected mesaj pe consolă.

cu aceasta, am finalizat inițializarea prizelor. Acum vom învăța cum să emitem și să ascultăm evenimente.

să înregistrăm un eveniment numitmy message în interiorul nostruindex.js fișier nod și consola de date și vom emite același eveniment dinAngular app.

io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('my message', (msg) => { console.log('message: ' + msg); });});

și să emitem același eveniment din Codul unghiular

setupSocketConnection() { this.socket = io(environment.SOCKET_ENDPOINT); this.socket.emit('my message', 'Hello there from Angular.');}

acest cod ar emite evenimentul numit my message și ar imprima următoarele pe consola nodului nostru. Puteți vedea mesajul ‘Bună ziua acolo de la Angular’. Evenimentele noastre personalizate Funcționează acum.

acum, să emit un eveniment din server side. Vom transmite evenimentul tuturor utilizatorilor conectați. Vom difuza același mesaj pe care l-am primit de la client și vom pregăti un șir de server pentru acesta.

io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});

să adăugăm un ascultător pentrumy broadcast eveniment în aplicația noastră unghiulară acum.

this.socket.on('my broadcast', (data: string) => {
console.log(data);
});

după ce faceți acest lucru, puteți verificabroswer console, arprint ceva de genul acesta. Se imprimă un mesaj de la server, care a emis de difuzare.

am acoperit basic părți ale conectării unui nod socket.io aplicație cu o aplicație unghiulară.

sfat Bonus: De asemenea, puteți trimite query parameters la Backend atunci când vă conectați la soclu utilizând options cu url-ul într-o conexiune.

this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});

la fetch aceste informații pe Backend, trebuie să o facem așa:

io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});

aceasta ar returna valoarea cde trecut prin frontend.

puteți verifica toate Codul De exemplu scris de mai sus la github meu.

aceasta încheie articolul meu despre crearea unui real time application cu Angular și Socket.io cu NodeJS. Am acoperit basics de conectare a aplicațiilor. Există mult mai multe informații despre prize care pot fi explorate cum ar fi camerele, starea offline online, trimiterea mai multor date, preluarea utilizatorilor online. Aceste informații nu pot fi incluse într-un singur articol. Va write pe aceste subiecte dacă liked my work pe acest blog.

nu scrie comentarii dumneavoastră.

mi-a plăcut munca mea? Cumpără-mi o cafea.