Questo articolo è stato spostato qui. Per l’ultima versione di questo articolo si prega di visitare il link dato.
Questa potrebbe essere la domanda temuta tra i nuovi sviluppatori su come fare un app con Angular e Socket.io. Come la maggior parte delle app che fanno uso di socket per la comunicazione in tempo reale del Frontend con il Backend. Quindi, oggi parlerò di come integrare socket.io con un’app angolare. Questo codice funzionerebbe per tutte le versioni angolari sopra Angular1.
Aggiornato — Questo articolo è stato aggiornato a dicembre 2020 per gestire le ultime modifiche alla versione v3 di socket.io
Iniziamo creando prima un progetto node.
Crea un nuovo directory e poi inseriscilo.
mkdir socketio-node
Questo creerà una cartella vuota con il nomesocketio-node.
Useremo il Nodo.JS web framework express. Assicurarsi Nodo.JS è installato sul sistema.
Per prima cosa creiamo unpackage.json file manifesto che descrive il nostro progetto.
Creare un file denominato pacchetto.json e incolla il codice sottostante in esso.(Puoi farlo anche connpm init)
{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}
Ora, per popolare facilmente la proprietàdependencies dobbiamo installareexpress, digitare questo nel terminale.
npm install express
installa e aggiungere l’ultima versione di express nel nostro progetto e il dependencies sarà come
"dependencies": {
"express": "^4.17.1"
}
Ora che express è installato, possiamo creare un index.js in un file di configurazione nostra applicazione.
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');
});
Questo codice è spiegato nei seguenti passaggi:
- Express inizializza
appper essere un gestore di funzioni che è possibile fornire a un server HTTP (come visto nella riga 2). - Definiamo un gestore di route
/che viene chiamato quando raggiungiamo il nostro sito web. - Facciamo ascoltare il server http sulla porta 3000.
Se si esegue node index.js si dovrebbe vedere la seguente:
Apertura http://localhost:3000 nel browser sarebbe simile:
Ora integriamo presa.io nel nostro nodo app. Innanzitutto, dobbiamo installare la dipendenzasocket.io nella nostra app. Esegui questo nel terminale.
npm install socket.io
Questo installerà il modulo e aggiungerà la dipendenza apackage.json. Ora modifichiamo index.js per aggiungerlo:
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');
});
si Noti che I inizializzare una nuova istanza di socket.io sulla linea 3, passando il http (server HTTP) l’oggetto e il cors opzioni(aggiornato per la presa.io v3) per permettere ai nostri angolare localhost url, è possibile inserire l’url o il vostro client frontend, nel mio caso è stato localhost:4200Allora io ascolto il connection e disconnection eventi in arrivo per le prese, e mi collego alla console.
Il nostro backend è buono per ora, torneremo al nostronode codice quando implementeremo più eventi più avanti.
Cominciamo con la creazione di unAngular app ora. Creerò una nuova appAngular da zero, mentre la maggior parte di voi ne avrebbe già creata una con voi.
Coloro che hanno già un lavoroAngular app può saltare il seguente codice:
npm install -g @angular/cli
ng new socketio-angular
Questo installerebbe l’ultima versione diAngular CLI e creare una nuova applicazione angolare da zero.
Ora aggiungiamo socket.io dependency nella nostra app angolare.
cd socketio-angular
npm install socket.io-client
Questo installerebbe l’ultima libreria socket.io-client nella nostra app angolare.
Ora iniziamo creando un service da gestire socket.io connessione. Vorrei creare un livello root singleton servizio denominato socketio.service.tse includerlo in AppModule. È possibile creare il servizio in base alla struttura del progetto.
È possibile creare il servizio eseguendo il seguente comando.
ng g s socketio
Questo creerebbe un servizio chiamatosocketio.service.ts. La struttura della directory sarebbe simile a questa. Questa è solo una semplice demo di una pagina, quindi ho aggiunto il servizio nella cartella di base in questo modo.
Ora, andare in socketio.service.ts file e importare i seguenti:
import { io } from 'socket.io-client';
Ora aggiungiamo l’endpoint del socket a cui colleghiamo il socket all’interno del file environment.ts.
export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};
Ora proviamo a connetterci al nostro socket e creare una connessione socket. Per prima cosa dobbiamo aggiungere SocketioService nel nostro AppModule e iniettare il servizio nel nostro app.component.ts . Aggiungiamo prima il servizio ai nostri fornitori. In app.module.ts fai questo:
@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }
E andiamo asocketio.service.ts e scrivere una funzione socket init.
export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}
Questo dichiarerà una variabile denominatasockete poi dopo aver chiamato ilsetupSocketConnectionmetodo,socket variabile sarebbe contenente l’oggetto socket collegato.
Ora, chiamiamo questo metodo daapp.component.ts all’interno di ngOnInit.
export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}
Se stai usando Angular 6 e versioni successive, potresti incorrere in questo errore.
Uncaught ReferenceError: global is not defined
Questo perché sulla versione 6 di Angular CLI Angular team rimuove lo shim perglobal e altri nodi incorporati. Se stiamo usando una libreria che si assume le variabili globali sono presenti(socket.io-client nel nostro caso), si può provare manualmente spessoramento all’interno di un polyfills.ts file:
// Add global to window, assigning the value of window itself.
(window as any).global = window;
Aggiungere questa riga al tuo polyfills.ts file sarebbe risolvere il problema e la vostra applicazione potrebbe funzionare nuovamente. Per saperne di più sul problema di cui sopra, segui questo link.
Dopo l’esecuzione Angolare app ora, si può vedere il socket connesso e il nostro nodo applicazione console che mostra a user connected come questo:
Quando si scollega la presa o chiudere la pagina web, si può vedere user disconnected messaggio su console.
Con questo, abbiamo completato la nostra inizializzazione dei socket. Ora impareremo come emettere e ascoltare gli eventi.
Registriamo un evento chiamatomy message all’interno del nostroindex.js file di nodo e console i dati e emetteremo lo stesso evento daAngular 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); });});
Ed emettiamo lo stesso evento dal codice angolare
setupSocketConnection() { this.socket = io(environment.SOCKET_ENDPOINT); this.socket.emit('my message', 'Hello there from Angular.');}
Questo codice emetterebbe l’evento denominato my message e stamperebbe quanto segue sulla nostra console di nodo. Puoi vedere il messaggio ‘Ciao da Angular’. I nostri eventi personalizzati stanno ora funzionando.
Ora, let’s emit un evento dall’ server side. Trasmetteremo l’evento a tutti gli utenti connessi. Trasmetteremo lo stesso messaggio che abbiamo ricevuto dal client e anteporremo una stringa del server ad esso.
io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});
Aggiungiamo un listener per my broadcast evento sulla nostra app angolare ora.
this.socket.on('my broadcast', (data: string) => {
console.log(data);
});
Dopo aver fatto questo, puoi controllare il tuobroswer console, sarebbeprint qualcosa del genere. Stampa un messaggio dal server, che ha emesso la trasmissione.
Abbiamo coperto il basic parti di collegamento di un nodo di presa.io app con un Angolare app.
Suggerimento bonus: È inoltre possibile inviare query parametersal Backend quando ci si connette al socket utilizzandooptions con url in una connessione.
this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});
Afetch questa informazione sul Backend, dobbiamo farlo in questo modo:
io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});
Questo restituirebbe il valorecde passato di Frontend.
Puoi controllare tutto il codice di esempio scritto sopra sul mio github.
Questo si conclude il mio articolo sulla creazione di un real time application con Angular e Socket.io con NodeJS. Ho coperto basics di collegare le app. Ci sono molte più informazioni sulle prese che possono essere esplorate come stanze, stato offline online, invio di più dati, recupero di utenti online. Queste informazioni non possono essere trattate in un unico articolo. Sarà writesu questi argomenti se siliked my work su questo blog.
Scrivi le tue recensioni.
È piaciuto il mio lavoro? Offrimi un caffè.