åbning http://localhost:3000 :

lad os Nu integrere socket.io i vores node app. For det første skal vi installere socket.io afhængighed i vores app. Kør dette i terminalen.

npm install socket.io

dette vil installere modulet og tilføje afhængigheden tilpackage.json. Lad os nu redigere index.js for at tilføje 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');
});

Bemærk, at jeg initialiserer en ny forekomst afsocket.io på linje 3 ved at passerehttp (HTTP-serveren) objekt og cors-indstillingerne (opdateret til socket.io v3) for at tillade vores vinkel localhost url, kan du sætte i url ‘ en eller din frontend klient, i mit tilfælde var det localhost:4200
så lytter jeg på connection og disconnection begivenheder for indgående stikkontakter, og jeg logger det til konsollen.

vores Backend er god at gå for nu, vi kommer tilbage til vores node kode, når vi implementerer flere begivenheder videre.

lad os starte med at oprette enAngular app nu. Jeg vil oprette en ny Angular app fra bunden, mens de fleste af jer allerede ville have en oprettet med dig.
De, der allerede har en fungerendeAngular app kan springe over følgende kode:

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

dette ville installere den nyeste version afAngular CLI og oprette en ny Vinkelapp fra bunden.

lad os nu tilføje socket.io dependency i Vores vinkel app.

cd socketio-angular
npm install socket.io-client

dette ville installere det nyestesocket.io-client bibliotek i vores Vinkelapp.

lad os nu starte med at oprette en service at håndtere socket.io forbindelse. Jeg ville oprette et rodniveau singleton service navngivet socketio.service.ts og inkludere det i AppModule . Du kan oprette tjenesten i henhold til din projektstruktur.
Du kan oprette tjenesten ved at køre følgende kommando.

ng g s socketio

dette ville skabe en tjeneste ved navnsocketio.service.ts. Katalogstrukturen ville se sådan ud. Dette er bare en simpel demo på en side, så jeg tilføjede tjenesten i basismappen som denne.

gå nu ind i socketio.service.ts fil og importer følgende:

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

lad os nu tilføje stikkontakten, som vi ville forbinde stikket til indeenvironment.ts fil.

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

lad os nu prøve at oprette forbindelse til vores stikkontakt og oprette en stikkontakt. Først skal vi tilføje SocketioServicei voresAppModuleog injicere tjenesten i voresapp.component.ts. Lad os først tilføje tjenesten til vores udbydere. I app.module.ts gør dette:

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

og lad os gå til socketio.service.ts og skrive en socket init funktion.

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

dette vil erklære en variabel med navnetsocketog derefter efter at have kaldtsetupSocketConnectionmetode,socket variablen ville indeholde det tilsluttede sokkelobjekt.

lad os nu kalde denne metode fra app.component.ts inde i ngOnInit.

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

Hvis du bruger vinkel 6 og derover, kan du løbe ind i denne fejl.

Uncaught ReferenceError: global is not defined

dette skyldes, at version 6 af Angular CLI Angular team fjerner shim forglobal og andre node indbyggede. Hvis vi bruger et bibliotek, der antager, at disse globaler er til stede(socket.io-client i vores tilfælde), kan du prøve manuelt at shimme det inde i din polyfills.ts fil:

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

tilføjelse af denne linje til din polyfills.ts fil ville løse problemet, og din app ville arbejde igen. For at læse mere om ovenstående problem, Følg dette link.

Når du har kørt Vinkelappen nu, Kan du se stikket tilsluttet, og vores node-appkonsol viser a user connected som denne:

Når du afbryder stikket eller lukker hjemmesiden, kan du se user disconnected besked på konsollen.

med dette har vi afsluttet vores initialisering af stikkontakter. Nu vil vi lære om, hvordan man udsender og lytter til begivenheder.

lad os registrere en begivenhed kaldetmy message inde i voresindex.js nodefil og konsolere dataene, og vi udsender den samme begivenhed fraAngular 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 lad os udsende den samme begivenhed fra Vinkelkode

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

denne kode ville udsende begivenheden ved navnmy message og det ville udskrive følgende på vores node konsol. Du kan se beskeden ‘Hej der fra vinkel’. Vores brugerdefinerede begivenheder fungerer nu.

Nu, lad os emit en begivenhed fra server side. Vi sender begivenheden til alle tilsluttede brugere. Vi sender den samme besked, som vi modtog fra klienten, og forbereder en serverstreng til den.

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

lad os tilføje en lytter til my broadcast begivenhed på vores Vinkelapp nu.

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

Når du har gjort dette, kan du tjekke dinbroswer console, det villeprint noget som dette. Det udskriver en besked fra server, der udsendte udsendelsen.

Vi har dækket basic dele af tilslutning af en node socket.io-app med en Kantet app.

Bonus tip: Du kan også sende query parameterstil Backend, når du tilslutter til stikket ved hjælp af options med url i en forbindelse.

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

til fetch disse oplysninger på Backend, vi skal gøre det sådan:

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

dette ville returnere værdien cde bestået af frontend.

Du kan kontrollere alle ovenstående skriftlige eksempelkode på min github.

Dette afslutter min artikel om oprettelse af en real time application med Angular og Socket.io med NodeJS. Jeg har dækket basics for at forbinde apps. Der er meget mere information om stikkontakter, der kan udforskes som værelser, Online offline status, sende flere data, hente online brugere. Disse oplysninger kan ikke dækkes i en enkelt artikel. Vil writeom disse emner, hvis duliked my work på denne blog.

skriv ned dine anmeldelser.

kunne lide mit arbejde? Giv mig en kop kaffe.