Deepinder Singh

nov 25, 2019 · 7 min lese

denne artikkelen er flyttet hit. For siste versjon av denne artikkelen, vennligst besøk lenken gitt.

div>bilde av pankaj patel på unsplash

dette kan være den mest fryktede spørsmålet blant nye utviklere om hvordan å lage en app med Angular og Socket.io.som de fleste appene bruker stikkontakter for sanntidskommunikasjon av Frontend med Backend. Så, i dag skal jeg snakke om hvordan å integrere socket.io med En Angular app. Denne koden vil fungere for Alle Vinkelversjoner over Angular1.

Oppdatert-denne artikkelen har blitt oppdatert i desember 2020 for å håndtere den nyeste versjonen v3 endringer av socket.io

La oss starte med å lage et node prosjekt først.

Opprett en ny directory og skriv den inn.

mkdir socketio-node

dette vil opprette en tom mappe med navn socketio-node.

Vi skal bruke Noden.JS web frameworkexpress. Kontroller At Node.JS er installert på systemet ditt.

la Oss først lage en package.json manifest-fil som beskriver prosjektet vårt.
Opprett en fil med navnet package.json og lim inn koden nedenfor i den.(Du kan også gjøre det med npm init)

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

Nå, for å enkelt fylledependenciesegenskapen vi må installereexpress, skriv inn dette i terminalen.

npm install express

det vil installere og legge til den nyeste versjonen av express i vårt prosjekt og dindependencies vil nå se ut

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

nå som express er installert kan vi lage enindex.js fil som vil sette opp vår søknad.

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');
});

denne koden er forklart i følgende trinn:

  • Express initialisererapp for å være en funksjonshåndterer som du kan levere TIL EN HTTP-server (som vist i linje 2).
  • vi definerer en rutehåndterer / som blir kalt når vi treffer vår hjemmeside hjem.
  • vi gjør http-serveren lytte på port 3000.

hvis du kjører node index.js vil du se følgende:

åpninghttp://localhost:3000i nettleseren vil det se ut som:

la oss nå integrere socket.io i vår node app. For det første må vi installeresocket.io avhengighet i vår app. Kjør dette i terminalen.

npm install socket.io

dette vil installere modulen og legge til avhengigheten til package.json. La oss nå redigere index.js for å legge til det:

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');
});

Legg Merke til at jeg initialiserer en ny forekomst avsocket.io på linje 3 ved å sende http (HTTP server) – objektet og cors-alternativene (oppdatert for socket.io v3) for å tillate vår angular localhost url, kan du sette inn url eller din frontend klient, i mitt tilfelle var det localhost:4200
så hører jeg på connection og disconnection hendelser for innkommende stikkontakter, og jeg logger den på konsollen.

Vår Backend er god å gå for nå, vil vi komme tilbake til vår node kode når vi vil gjennomføre flere hendelser videre.

La oss begynne med å lage enAngular app nå. Jeg skal lage en nyAngular app fra bunnen av, mens de fleste av dere allerede vil ha en opprettet med deg.
de som allerede har en fungerendeAngular app kan hoppe over følgende kode:

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

dette vil installere den nyeste versjonen avAngular CLI og opprette en Ny Vinkel app fra bunnen av.

la oss nå legge til socket.io dependency i Vår Vinkelapp.

cd socketio-angular
npm install socket.io-client

dette vil installere den nyestesocket.io-client bibliotek i Vår Angular app.

la Oss nå begynne med å lage en service å håndtere socket.io tilkobling. Jeg ville lage et rotnivå singleton tjeneste kalt socketio.service.ts og inkludere det i AppModule . Du kan opprette tjenesten i henhold til prosjektstrukturen.
du kan opprette tjenesten ved å kjøre følgende kommando.

ng g s socketio

dette ville skape en tjeneste kalt socketio.service.ts . Katalogstrukturen ville se noe ut som dette. Dette er bare en enkel en side demo, så jeg la til tjenesten i basemappen som dette.

nå går du inn i socketio.service.ts – filen og importerer følgende:

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

la Oss nå legge til socket endepunktet som vi ville koble kontakten til innsiden environment.ts fil.

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

la Oss nå prøve å koble til kontakten og opprette en socket conenction. Først må vi legge til SocketioService i vårAppModule og injisere tjenesten i vårapp.component.ts . La oss legge til tjenesten i våre leverandører først. Iapp.module.ts gjør dette:

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

Og la oss gå til socketio.service.ts og skriv en socket init-funksjon.

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

dette vil erklære en variabel som heter socket og deretter etter å ha ringt setupSocketConnection – metoden, socket variabelen vil inneholde det tilkoblede socket-objektet.

nå, la oss kalle denne metoden fra app.component.ts inne ngOnInit.

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

hvis Du bruker Angular 6 og over, kan du støte på denne feilen.

Uncaught ReferenceError: global is not defined

dette er fordi På versjon 6 Av Angular Cli Angular team removind shim for global og andre node innebygd. Hvis vi bruker et bibliotek som antar at disse globalene er til stede(socket.io-client i vårt tilfelle), kan du prøve å manuelt skinne det inne i polyfills.ts fil:

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

Legge til denne linjen i polyfills.ts fil ville fikse problemet, og appen din ville fungere igjen. For å lese mer om problemet ovenfor, følg denne link.

Etter å ha kjørt Angular app nå, kan du se kontakten tilkoblet og vår node app konsollen viser a user connected som dette:

når du kobler fra kontakten eller lukker nettsiden, kan du seuser disconnectedmelding på konsoll.

Med dette har vi fullført vår initiliazation av stikkontakter. Nå vil vi lære om hvordan å sende ut og lytte til hendelser.

la oss registrere en hendelse kalt my message inne i vår index.js nodefil og konsolere dataene, og vi vil sende ut den samme hendelsen fra Angular 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); });});

Og la oss sende den samme hendelsen Fra Angular code

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

denne koden vil avgi hendelsen hetermy message og det ville skrive ut følgende på vår node konsollen. Du kan se meldingen ‘Hello there from Angular’. Våre tilpassede hendelser jobber nå.

la oss nå emit en hendelse fra server side. Vi vil kringkaste hendelsen til alle tilkoblede brukere. Vi vil kringkaste den samme meldingen som vi mottok fra klienten og prepend en serverstreng til den.

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

La oss legge til en lytter formy broadcast hendelse på Vår Angular app nå.

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

etter å ha gjort dette, kan du sjekkebroswer console, det villeprint noe som dette. Den skriver ut en melding fra serveren, som sendte ut sendingen.

vi har dekket basic deler av tilkobling av en node socket.io app med En Vinkelapp.

Bonus tips: Du kan også sende query parametersTil Backend når du kobler til kontakten ved å brukeoptions med url i en tilkobling.

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

til fetch denne informasjonen På Backend, må vi gjøre det slik:

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

dette vil returnere verdien cde passert av frontend.

du kan sjekke all den ovennevnte skriftlige eksempelkoden på github.

dette avslutter artikkelen min om å opprette en real time application med Angular og Socket.io med NodeJS. Jeg har dekket basics for å koble appene. Det er mye mer informasjon om stikkontakter som kan utforskes som rom, online offline status, sende mer data, hente nettbrukere. Denne informasjonen kan ikke dekkes i en enkelt artikkel. Vil write på disse emnene hvis du liked my work på denne bloggen.

skriv ned dine vurderinger.

Likte arbeidet mitt? Spandere kaffe.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.