Deepinder Singh
Deepinder Singh

Volgen

Nov 25, 2019 · 7 min lezen

Dit artikel is verplaatst naar hier. Voor de laatste versie van dit artikel kunt u terecht op de link gegeven.

Foto door Pankaj Patel op Unsplash

Dit is misschien wel het meest gevreesde vraag onder nieuwe ontwikkelaars over hoe te maken van een app met Angular en Socket.io. Zoals de meeste van de apps maken gebruik van sockets voor real-time communicatie van de Frontend met de Backend. Dus, vandaag zal ik het hebben over hoe te integreren socket.io met een hoekige app. Deze code zou werken voor alle hoekige versies boven Angular1.

bijgewerkt-Dit artikel is bijgewerkt in December 2020 om de laatste versie V3 wijzigingen van socket.io

laten we beginnen met het aanmaken van een node project.

Maak een nieuwe directory aan en voer het in.

mkdir socketio-node

Dit maakt een lege map aan met de naam socketio-node.

We gaan de Node gebruiken.JS web framework express. Zorg voor Node.JS is geïnstalleerd op uw systeem.

laten we eerst een package.json manifest bestand maken dat ons project beschrijft.
Maak een bestand aan met de naam pakket.json en plak de onderstaande code erin.(U kunt het ook doen met npm init)

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

nu, om de dependencies eigenschap die we nodig hebben om express te installeren, typt u dit in de terminal.

npm install express

Het zal de nieuwste versie van express installeren en toevoegen aan ons project en uw dependencies zal er nu uitzien als

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

nu express is geïnstalleerd, kunnen we een index.js bestand maken dat zal het opzetten van onze toepassing.

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

deze code wordt uitgelegd in de volgende stappen:

  • Express initialiseert app om een functieafhandeling te zijn die u kunt leveren aan een HTTP-server (zoals te zien in regel 2).
  • We definiëren een route handler / die wordt aangeroepen wanneer we onze website thuis raken.
  • we laten de http-server luisteren op poort 3000.

Als u node index.js ziet u het volgende:

Openen http://localhost:3000 in browser eruit zou zien:

laten we nu integreren socket.io in onze node app. Ten eerste moeten we socket.io afhankelijkheid installeren in onze app. Doe dit in de terminal.

npm install socket.io

Dit zal de module installeren en de afhankelijkheid toevoegen aan package.json. Laten we nu index.js bewerken om het toe te voegen:

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

Merk op dat ik het initialiseren van een nieuw exemplaar van socket.io op lijn 3 door het doorgeven van de http (de HTTP-server) object en de cors opties(bijgewerkt voor socket.io-v3) om onze hoekige localhost url, kun je in de url of uw front-end cliënt, in mijn geval was localhost:4200
Toen ik luister op de connection en disconnection evenementen voor inkomende voeten, en ik meld het aan de console.

onze Backend is nu klaar, we komen terug naar onze node code wanneer we meer gebeurtenissen verderop zullen implementeren.

laten we beginnen met het aanmaken van een Angular app nu. Ik zal een nieuwe Angular app vanuit het niets aanmaken, terwijl de meesten van jullie er al een bij je hebben aangemaakt.
degenen die al een werkende Angular app hebben, kunnen de volgende code overslaan:

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

Dit zou de nieuwste versie van Angular CLI installeren en een nieuwe hoekige app vanuit het niets maken.

laten we nu toevoegen socket.io dependency in onze Hoek app.

cd socketio-angular
npm install socket.io-client

Dit zou de nieuwste socket.io-client bibliotheek in onze Hoek app installeren.

laten we nu beginnen met het aanmaken van een service om af te handelen socket.io verbinding. Ik zou een root level singleton dienst genaamd socketio.service.ts aanmaken en die opnemen in AppModule . U kunt de dienst maken volgens uw projectstructuur.
U kunt de service aanmaken door het volgende commando uit te voeren.

ng g s socketio

Dit zou een service aanmaken met de naam socketio.service.ts . De directory structuur zou er ongeveer zo uitzien. Dit is slechts een eenvoudige demo van één pagina, dus ik heb de service toegevoegd aan de basismap als deze.

nu, ga naar hetsocketio.service.tsbestand en importeer het volgende:

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

laten we nu het socket-eindpunt toevoegen waarmee we de socket zouden verbinden in environment.ts bestand.

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

laten we nu proberen verbinding te maken met onze socket en een socket conenction maken. Eerst moeten we SocketioService toevoegen aan onze AppModule en de service injecteren in onze app.component.ts . Laten we de service eerst toevoegen aan onze providers. In app.module.ts doe dit:

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

en laten we naar socketio.service.ts gaan en een socket init-functie schrijven.

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

Dit verklaart een variabele genaamd socket en na het aanroepen van de setupSocketConnection methode, socket variabele zou het verbonden socket object bevatten.

laten we deze methode nu aanroepen vanuit app.component.ts binnen ngOnInit.

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

Als u Angular 6 en hoger gebruikt, kunt u deze fout tegenkomen.

Uncaught ReferenceError: global is not defined

Dit komt omdat op versie 6 van Angular CLI Angular team de shim verwijdert voor global en andere ingebouwde node-ins. Als we een bibliotheek gebruiken die ervan uitgaat dat deze globalen aanwezig zijn(socket.io-client in ons geval), kunt u proberen het handmatig in uw polyfills.ts bestand te shimmen:

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

Deze regel toevoegen aan uw polyfills.ts bestand zou de probleem en uw app zou weer werken. Om meer te lezen over het bovenstaande probleem, volg deze link.

Na het uitvoeren van de Hoekige app, zie je het stopcontact is aangesloten en onze knooppunt app-console tonen a user connected zoals dit:

Wanneer u de stekker uit het stopcontact of sluit de webpagina, u kunt zien user disconnected bericht op de console.

hiermee hebben we onze initiliazatie van sockets voltooid. Nu zullen we leren hoe we gebeurtenissen kunnen uitzenden en beluisteren.

laten we een gebeurtenis genaamd my message registreren in onze index.js knooppuntbestand en de gegevens console en we zullen dezelfde gebeurtenis uitzenden vanuit 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); });});

en laten we dezelfde gebeurtenis uitzenden vanuit Hoekcode

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

deze code zou de gebeurtenis genaamd my message uitzenden en het zou het volgende afdrukken op onze node console. Je kunt het bericht ‘Hallo daar van hoekig’ zien. Onze aangepaste evenementen werken nu.

Nu, laten we emit een gebeurtenis uit de server side. We zullen het evenement uitzenden aan alle verbonden gebruikers. We zullen hetzelfde bericht uitzenden dat we van de client hebben ontvangen en er een serverstring aan toevoegen.

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

laten we nu een luisteraar toevoegen voor my broadcast event op onze hoekige app.

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

na dit te doen, kunt u uw broswer console controleren, het zou print zoiets als dit. Het drukt een bericht af van de server, dat de uitzending uitgezonden heeft.

we hebben de basicdelen van het verbinden van een knooppunt behandeld socket.io app met een hoekige app.

Bonustip: U kunt ook query parameters naar de Backend sturen wanneer u verbinding maakt met de socket met options met url in een verbinding.

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

To fetch deze informatie op de Backend, we moeten het als volgt doen:

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

Dit zou de waarde cde doorgegeven door Frontend retourneren.

je kunt alle bovenstaande geschreven voorbeeldcode controleren op mijn github.

mijn artikel over het maken van een real time application met Angular en Socket.io met NodeJS. Ik heb de basics van het aansluiten van de apps behandeld. Er is veel meer informatie over sockets die kunnen worden onderzocht, zoals kamers, Online offline status, het verzenden van meer gegevens, het ophalen van online gebruikers. Deze informatie kan niet in één artikel worden behandeld. Zal write op deze onderwerpen als u liked my work op deze blog.

schrijf uw beoordelingen op.

vond mijn werk leuk? Trakteer me op koffie.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.