Deepinder Singh
Deepinder Singh

följ
Nov 25, 2019 · 7 min läs

den här artikeln har flyttats hit. För senaste versionen av den här artikeln besök länken.

foto av Pankaj Patel på Unsplash

detta kan vara den mest fruktade frågan bland nya utvecklare om hur man gör en app medAngular och Socket.io. eftersom de flesta appar använder uttag för realtidskommunikation av Frontend med Backend. Så idag kommer jag att prata om hur man integrerar socket.io med en vinkel app. Denna kod skulle fungera för alla Vinkelversioner ovanför Angular1.

uppdaterad-den här artikeln har uppdaterats i December 2020 för att hantera den senaste versionen v3 ändringar av socket.io

låt oss börja med att skapa ett node – projekt först.

skapa ett nytt directory och ange det sedan.

mkdir socketio-node

detta skapar en tom mapp med namnet socketio-node.

vi ska använda noden.JS web framework express. Se till nod.JS är installerat på ditt system.

låt oss först skapa enpackage.json manifest-fil som beskriver vårt projekt.
skapa en fil med namnet paket.json och klistra in nedanstående kod i den.(Du kan också göra det mednpm init)

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

nu, för att enkelt fylla i egenskapendependencies måste vi installeraexpress, skriv detta i terminalen.

npm install express

det kommer att installera och lägga till den senaste versionen av express i vårt projekt och din dependencies kommer nu att se ut

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

nu när express är installerat kan vi skapa en index.js fil som kommer att ställa in vår ansökan.

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

denna kod förklaras i följande steg:

  • Express initierar app för att vara en funktionshanterare som du kan leverera till en HTTP-server (som visas i rad 2).
  • vi definierar en rutthanterare / som kallas när vi träffar vår hemsida hem.
  • vi gör http-servern lyssna på port 3000.

om du kör node index.js bör du se följande:

öppning http://localhost:3000 i webbläsaren skulle se ut:

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.

Lämna ett svar

Din e-postadress kommer inte publiceras.