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.

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

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