Reaaliaikaiset sovellukset TypeScriptillä: Web -pistorasioiden, solmun ja kulman integrointi

Blogi

Alkuperäinen julkaisija Luis Aviles klo medium.com

Jokin aika sitten otin käyttöön yksinkertaisen chat -sovelluksen, joka käytti vain TypeScript -kieltä. Päätavoitteena oli kirjoittaa demo, jossa selitetään, kuinka voit käyttää tätä ohjelmointikieltä asiakaspuolella ja palvelimella. Asiakassovellus käyttää uusimpia Angular -ominaisuuksia.

Tässä viestissä näytän sinulle, kuinka toteutin sovelluksen alusta.

Esittely: TypeScript Chat -sovellus

Mikä on reaaliaikainen sovellus?

Tämän mukaan Wikipedian määritelmä , reaaliaikainen sovellus mahdollistaa tietojen vastaanottamisen heti kun se on julkaistu sen sijaan, että vaadittaisiin lähteen tarkistamista säännöllisesti päivitysten varalta. Siksi tällaisen sovelluksen pitäisi antaa käyttäjille tunne, että tapahtumat ja toimet tapahtuvat välittömästi.

WebSockets

WebSockets on protokolla, joka tarjoaa kaksisuuntaisen viestintäkanavan. Tämä tarkoittaa, että selain ja verkkopalvelin voivat ylläpitää reaaliaikaisia ​​kommunikaatioita ja lähettää viestejä edestakaisin yhteyden ollessa auki.

Websockets -viestintä

Sovellusrakenne

Erotamme palvelimeen liittyvän koodin ja asiakaskoodin. Menen yksityiskohtiin, kun tärkeimmät tiedostot selitetään. Tällä hetkellä tämä on sovelluksemme odotettu rakenne:

client

Luodaan | _+_ | hakemistossa käyttäen uusinta Kulmikas CLI versio:

npm install

Asenna sitten riippuvuudet käynnissä | _+_ | (Käytän mieluummin Lanka tätä vaihetta varten) :

Angular CLI

Kulmamateriaalin lisääminen

Etsi uusin asennusopas ja noudata sitä Kulmikas materiaali sisälläsi | _+_ | hanke.

Osana parhaiden käytäntöjen käyttöä projektin rakenne , voimme luoda | _+_ | ja | _+_ | moduuleja:

shared

Voimme tehdä sen komentorivin käyttöliittymästä:

material

Tarkista muutokset | _+_ | ja | _+_ | nähdäksesi näiden moduulien väliset suhteet.

Lisätään express ja pistorasia.IO

Meidän on lisättävä | _+_ | ja | _+_ | moduulit asiakassovellukseemme:

app.module.ts

Chat -moduulit ja komponentit

Luodaan uusi moduuli ennen kuin aloitamme komponenttien luomisen chat -sovelluksellemme:

shared.module.ts

Lisää nyt komponentti uusimpaan moduuliin:

express

Jotta voimme käyttää verkkopistorasioita ja mukautettuja malleja, luomme toisen | _+_ | -kansion. Tällä kertaa sisällä | _+_ | hakemisto:

socket.io

Lopetamme seuraavanlaisella rakenteella:

shared

Havaittavat ja verkkopistokkeet

Koska Angular -sovelluksessamme on | _+_ |, voimme käyttää | _+_ | ottaa kiinni Pistorasia.IO Tapahtumat:

chat

}

Meidän on määriteltävä joitain summat hallita | _+_ | ja | _+_ | sovelluksessa:

RxJS

Nyt olemme valmiita kuunnella palvelimen viesteihin:

Observables

}

public sendMessage (viesti: merkkijono): void {
jos (! viesti) {
palata;
}

public initSocket(): void { this.socket = socketIo(SERVER_URL); } public send(message: Message): void { this.socket.emit('message', message); } public onMessage(): Observable { return new Observable(observer => { this.socket.on('message', (data: Message) => observer.next(data)); }); } public onEvent(event: Event): Observable { return new Observable(observer => { this.socket.on(event, () => observer.next()); }); }

}

public sendNotification (params: any, action: Action): void {
anna viestin: Viesti;

Actions

}
}

Materiaalikoodin ja käyttöliittymän tapahtumat on jätetty pois tästä tiedostosta

Kerran | _+_ | alustetaan, komponentti menee tilaa | _+_ | havaittavissa, jotta voidaan alkaa vastaanottaa yhteystapahtumia tai saapuvia viestejä.

| _+_ | ja | _+_ | toiminnot lähettävät vastaavan sisällön saman palvelun kautta. Tällä hetkellä lähetetyt ilmoitukset ovat Nimeä käyttäjä uudelleen ja Käyttäjä liittyi.

Lähdekoodi

Etsi koko projekti tästä GitHub -arkistosta:

paras kevään kehyskirja

github.com/luixaviles/socket-io-typescript-chat

Live -esittely

Käy läpi typecript-chat.firebaseapp.com ja avaa kaksi tai useampia välilehtiä suosikkiselaimessasi ja aloita keskustelu.

Alkuperäinen julkaisija Luis Aviles klo medium.com

================================================ ==

Kiitos, että luit: heart: Jos pidit tästä postauksesta, jaa se kaikkien ohjelmointikavereidesi kanssa! Seuraa minua Facebook | Viserrys

Lue lisää

TypeScriptin ymmärtäminen

TypeScript, Angular, Firebase & Angular Material Masterclass

Konekirjoitus: Täydellinen kehittäjän opas

Konekirjoitus Masterclass & ILMAINEN e-kirja

Angular 8 (aiemmin Angular 2) - Täydellinen opas

Täytä kulmikas 8 nollasta sankariin | Saada töitä

Opi ja ymmärrä AngularJS

Täydellinen kulmakurssi: aloittelijasta edistyneeseen

Angular Crash Course kiireisille kehittäjille

Angular Essentials (Angular 2+ ja TypeScript)

Kulmaopetus: Luo CRUD -sovellus, jossa on kulmikas CLI ja TypeScript

Advanced Kuinka hallita edistyneitä TypeScript -malleja

#muotoinen #kirjoituskone #node-js #web-kehitys

medium.com

Reaaliaikaiset sovellukset TypeScriptillä: Web -pistorasioiden, solmun ja kulman integrointi

Rakenna reaaliaikainen chat -sovellus tyhjästä TypeScriptin avulla