låt oss nu integrera socket.io i vår node app. För det första måste vi installera socket.io beroende i vår app. Kör detta i terminalen.

npm install socket.io

detta installerar modulen och lägger till beroendet till package.json. Låt oss nu redigera index.js för att lägga till 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');
});

Lägg märke till att jag initierar en ny instans avsocket.io på rad 3 genom att skickahttp (HTTP server) – objektet och cors-alternativen (uppdaterad för socket.io v3) för att tillåta vår angular localhost-url kan du lägga in webbadressen eller din frontend-klient, i mitt fall var det localhost:4200
då lyssnar jag på connection och disconnection händelser för inkommande uttag, och jag loggar den till konsolen.

vår Backend är bra att gå för nu, vi kommer tillbaka till vårnode kod när vi kommer att genomföra fler händelser vidare.

Låt oss börja med att skapa en Angular app nu. Jag kommer att skapa en nyAngular app från början, medan de flesta av er redan skulle ha en skapad med dig.
de som redan har en fungerandeAngular app kan hoppa över följande kod:

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

detta skulle installera den senaste versionen avAngular CLI och skapa en ny Angular app från början.

låt oss nu lägga till socket.io dependency I vår Angular app.

cd socketio-angular
npm install socket.io-client

detta skulle installera det senaste socket.io-client biblioteket i vår Angular app.

låt oss nu börja med att skapa ett service för att hantera socket.io anslutning. Jag skulle skapa en rotnivå singleton tjänst som heter socketio.service.ts och inkludera det i AppModule . Du kan skapa tjänsten enligt din projektstruktur.
Du kan skapa tjänsten genom att köra följande kommando.

ng g s socketio

detta skulle skapa en tjänst med namnet socketio.service.ts . Katalogstrukturen skulle se ut så här. Det här är bara en enkel sida demo, så jag lade till tjänsten i basmappen så här.

gå nu in i filen socketio.service.ts och importera följande:

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

låt oss nu lägga till socket endpoint som vi skulle ansluta uttaget till inuti environment.ts fil.

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

låt oss nu försöka ansluta till vårt uttag och skapa en uttagskoncentration. Först måste vi lägga till SocketioService I vårt AppModule och injicera tjänsten i vårt app.component.ts . Låt oss lägga till tjänsten i våra leverantörer först. I app.module.ts gör detta:

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

och låt oss gå till socketio.service.ts och skriv en socket init-funktion.

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

detta kommer att deklarera en variabel med namnet socket och sedan efter att ha anropat setupSocketConnection – metoden, socket variabeln skulle innehålla det anslutna socket-objektet.

låt oss nu kalla den här metoden från app.component.ts inuti ngOnInit.

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

Om du använder Angular 6 och senare kan du stöta på det här felet.

Uncaught ReferenceError: global is not defined

detta beror på version 6 av Angular CLI Angular team removind shim för global och andra nod inbyggda ins. Om vi använder ett bibliotek som antar att dessa globaler är närvarande(socket.io-client I vårt fall) kan du försöka manuellt shimming det inuti din polyfills.ts fil:

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

lägga till den här raden till din polyfills.ts filen skulle lösa problemet och din app skulle fungera igen. För att läsa mer om ovanstående problem, följ detta link.

Efter att ha kört Angular-appen nu kan du se uttaget anslutet och vår node-appkonsol som visar a user connected så här:

När du kopplar ur uttaget eller stänger webbsidan kan du se user disconnected meddelande på konsolen.

med detta har vi slutfört vår initiliazation av uttag. Nu kommer vi att lära oss hur man avger och lyssnar på händelser.

låt oss Registrera en händelse som heter my message inuti vår index.js nodfil och konsolera data och vi kommer att avge samma händelse från 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); });});

och låt oss avge samma händelse från Vinkelkod

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

denna kod skulle avge händelsen med namnet my message och det skulle skriva ut följande på vår nodkonsol. Du kan se meddelandet ’Hej där från Angular’. Våra anpassade evenemang fungerar nu.

låt oss nu emit en händelse från server side. Vi kommer att sända evenemanget till alla anslutna användare. Vi kommer att sända samma meddelande som vi fick från klienten och lägga till en serversträng till den.

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

Låt oss lägga till en lyssnare för my broadcast händelse på vår Angular app nu.

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

Efter att ha gjort detta kan du kontrollera ditt broswer console, det skulle print något så här. Den skriver ut ett meddelande från servern, som utsände sändningen.

vi har täckt basic delar av anslutning av en nod socket.io app med en vinkel app.

bonus tips: Du kan också skicka query parameters till Backend när du ansluter till uttaget genom att använda options med url i en anslutning.

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

till fetch denna information på Backend måste vi göra så här:

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

detta skulle returnera värdet cde passerade från frontend.

Du kan kontrollera alla ovanstående skrivna exempelkoden på min github.

detta avslutar min artikel om att skapa en real time application med Angular och Socket.io med NodeJS. Jag har täckt basics för att ansluta apparna. Det finns mycket mer information om uttag som kan utforskas som Rum, online offline-status, skicka mer data, hämta onlineanvändare. Denna information kan inte omfattas av en enda artikel. Kommer writeom dessa ämnen om du liked my work på den här bloggen.

skriv ner dina recensioner.

gillade mitt arbete? Köp mig en kaffe.