Deepinder Singh
Deepinder Singh

Follow
marras 25, 2019 · 7 min read

tämä artikkeli on siirretty tänne. Uusimman version tämän artikkelin Käy linkki annettu.

div>

photo by Pankaj Patel on Unsplash

Tämä saattaa olla uusien kehittäjien pelätyin kysymys siitä, miten sovellus tehdäänAngularjaSocket.io. useimmat sovellukset käyttävät pistorasioita reaaliaikaiseen viestintäänFrontend kanssaBackend. Joten, tänään aion puhua siitä, miten integroida socket.io Kulmasovelluksella. Tämä koodi toimisi kaikille Kulmaversioille Kulma1: n yläpuolella.

Päivitetty-tämä artikkeli on päivitetty joulukuussa 2020 käsittelemään uusimman version v3 muutoksia socket.io

aloitetaan luomalla node projekti ensin.

Luo uusi directory ja anna se sitten.

mkdir socketio-node

Tämä luo tyhjän kansion, jonka nimi on socketio-node.

käytämme solmua.JS web framework express. Varmista, että Node.JS on asennettu järjestelmään.

luodaan ensin package.json manifest-tiedosto, joka kuvaa projektiamme.
Luo tiedosto nimeltä package.json ja liitä alla oleva koodi siihen.(Voit tehdä sen myös npm init)

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

nyt, jotta dependencies ominaisuus on asennettava express, kirjoita tämä päätteeseen.

npm install express

se asentaa ja lisää Expressin uusimman version projektiimme ja dependencies näyttää nyt

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

nyt kun express on asennettu, voimme luoda index.js tiedosto, joka määrittää sovelluksemme.

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

tämä koodi selitetään seuraavasti:

  • Express alustaa app funktionkäsittelijäksi, jonka voi toimittaa HTTP-palvelimelle (KS.rivi 2).
  • määrittelemme reitin käsittelijän /, joka saa kutsun, kun osumme verkkosivuillemme kotiin.
  • saamme http-palvelimen kuuntelemaan portilla 3000.

jos juokset node index.js

avaushttp://localhost:3000selaimessa näyttäisi:

nyt integroidaan socket.io solmusovellukseemme. Ensinnäkin, meidän täytyy asentaa socket.io riippuvuus sovellukseemme. Aja tämä terminaalissa.

npm install socket.io

Tämä asentaa moduulin ja lisää riippuvuuden package.json. Nyt muokataan index.js ja lisätään se:

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

Notice that I initialize a new instance of socket.io on line 3 by passing the http (the HTTP server) object and the cors options(updated for socket.io v3) jotta kulmikas localhost-url-osoitteemme olisi mahdollista laittaa url-osoitteeseen tai frontend-asiakasohjelmaan, minun tapauksessani se oli localhost:4200
sitten kuuntelen connection ja disconnection tapahtumia saapuville pistorasioille, ja kirjaan sen konsolille.

meidän Backend on hyvä mennä nyt, tulemme takaisin meidän node koodi, kun toteutamme lisää tapahtumia eteenpäin.

aloitetaan luomalla Angular sovellus nyt. Aion luoda uuden Angular sovelluksen tyhjästä, kun suurin osa teistä olisi jo luonut sellaisen kanssasi.
ne, joilla on jo toimiva Angular sovellus voi ohittaa seuraavan koodin:

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

Tämä asentaisi uusimman version Angular CLI ja loisi uuden Kulmasovelluksen tyhjästä.

nyt lisätään socket.io dependency Kulmasovelluksessamme.

cd socketio-angular
npm install socket.io-client

tämä asentaisi uusimman socket.io-client kirjaston Kulmasovellukseemme.

nyt aloitetaan luomalla service käsittelemään socket.io yhteys. Loisin juuritason singleton palvelun nimeltä socketio.service.ts ja sisällyttäisin sen myös AppModule . Voit luoda palvelun projektirakenteesi mukaan.
voit luoda palvelun suorittamalla seuraavan komennon.

ng g s socketio

Tämä loisi palvelun nimeltä socketio.service.ts . Hakemistorakenne näyttäisi tältä. Tämä on vain yksinkertainen yhden sivun demo, joten lisäsin palvelun peruskansioon näin.

nyt, menesocketio.service.tstiedostoon ja tuo seuraavat:

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

nyt lisätään se socket endpoint, että liittäisimme socket Inside environment.ts file.

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

nyt yritetään muodostaa yhteys pistorasiaan ja luoda pistorasia. Ensin täytyy lisätä SocketioService meidän AppModule ja pistää palvelu meidän app.component.ts . Lisätään palvelu ensin tarjoajiimme. In app.module.ts tee näin:

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

ja mennään socketio.service.ts ja kirjoitetaan socket init-funktio.

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

tämä julistaa muuttujan nimeltä socket ja sen jälkeen soitettuaan setupSocketConnection metodi, socket muuttuja sisältäisi liitetyn socket-objektin.

nyt kutsutaan tätä menetelmää app.component.ts sisällä ngOnInit.

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

Jos käytät kulmikasta 6 tai sitä korkeampaa, Saatat törmätä tähän virheeseen.

Uncaught ReferenceError: global is not defined

Tämä johtuu siitä, että Angular CLI Angular Teamin versiossa 6 global ja muut solmuun sisäänrakennetut. Jos käytämme kirjastoa, joka olettaa, että nämä globaalit ovat läsnä(socket.io-client meidän tapauksessamme), voit kokeilla manuaalisesti hohtaa sitä polyfills.ts file:

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

lisäämällä tämän rivin polyfills.ts tiedosto korjaisi ongelman ja sovelluksesi toimisi taas. Lue lisää yllä olevasta aiheesta tästä link.

kun Kulmasovellus on nyt ajettu, voit nähdä pistorasian kytkettynä ja solmusovelluskonsolimme näyttävän a user connected näin:

kun kytket pistorasian irti tai suljet verkkosivun, näetuser disconnectedviestin konsolilla.

tällä olemme saaneet valmiiksi pistorasioiden alustuksen. Nyt opetellaan, miten päästetään ja kuunnellaan tapahtumia.

rekisteröidään tapahtuma nimeltä my message meidän index.js node-tiedosto ja konsoloidaan tiedot ja päästämme saman tapahtuman 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); });});

ja päästetään sama tapahtuma Kulmakoodista

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

tämä koodi emittoisi tapahtuman nimeltä my message ja se tulostaisi seuraavan solmukonsolillemme. Näet viestin ”Hei siellä Kulmikas”. Tilaustapahtumamme toimivat nyt.

nyt emit tapahtuma server side. Lähetämme tapahtuman kaikille yhdistetyille käyttäjille. Lähetämme saman viestin, jonka saimme asiakkaalta ja valmistamme palvelinmerkkijonon siihen.

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

lisätään kuulija my broadcast tapahtuma Kulmasovelluksessamme nyt.

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

tämän jälkeen voi tarkistaa broswer console, se olisi print jotain tällaista. Se tulostaa viestin palvelimelta, joka lähetti lähetyksen.

olemme kattaneetbasic solmun yhdistämisen osat socket.io app Kulmikas app.

Bonusvinkki: Voit myös lähettää query parameters taustapuolelle, kun kytket pistorasiaan, käyttämällä options url-osoitteen yhteydessä.

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

To fetch tämä tieto Backendistä, meidän on tehtävä se näin:

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

tämä palauttaisi arvon cde läpäissyt frontend.

voit tarkistaa kaiken yllä olevan kirjoitetun esimerkkikoodin githubistani.

tähän päättyy artikkelini real time application with Angular and Socket.io with NodeJS. Olen käsitellyt sovellusten yhdistämisen basics. On paljon enemmän tietoa pistorasiat, joita voidaan tutkia, kuten huoneita, Online offline tila, lähettää enemmän tietoja, noutaa online-käyttäjiä. Näitä tietoja ei voida käsitellä yhdessä artikkelissa. Will write näistä aiheista, jos liked my work tässä blogissa.

Kirjoita arvostelusi ylös.

Tykkäsitkö työstäni? Tarjoa minulle kahvi.

Vastaa

Sähköpostiosoitettasi ei julkaista.