Sharing Top Content from the Angular-sphere.

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

☞ 

#Angular

  • 😄 – Initializing server applicationCreate a package.json file and then install the following dependencies: – npm install –save express socket.io @types/express @types/socket.ioWe’ll need to install some devDependencies to allow integrate gulp and typescript so that we can define build tasks easily with these tools later: – npm install –save-dev typescript…
  • The first one allows us to create and export our ChatServer app, while the last one contains express and socket.IO configurations: – Server ClassesThe previous code will give a result of the following classes and relationships: – – Build and Run the ServerIn order to have JavaScript files needed by the…
  • As part of using best practices in our project structure, we can create shared and materialmodules: – client/ – |- src/ – |- app/ – |- chat/ – |- shared/ – |- material/ – |- material.module.ts – |- shared.module.ts – |-app.module.tsWe can do that from the command line interface: -…
  • Adding express and socket.IOWe’ll need to add express and socket.io modules into our client App: – npm install express socket.io –saveChat Modules and ComponentsLet’s create a new module before starting to create components for our chat application: – ng generate module chat –module appNow add a component into newest module:…
  • This time inside chat directory: – ng generate service chat/shared/services/socket –module chat – ng generate class chat/shared/model/user – ng generate class be ending with a structure similar to: – client/ – |- src/ – |- app/ – |- chat/ – |- shared/ – |- model/ – |- user.ts – |-…

Some time ago I implemented a simple chat application using TypeScript language only. The main goal was to write a demo to explain how you can use this programming language on the client side and on…

Real Time Apps with TypeScript: Integrating Web Sockets, Node  AngularBuilding a Real Time Chat app from scratch using TypeScriptSome time ago I implemented a simple chat application using TypeScript language only. The main goal was to write a demo to explain how you can use this programming language on the client side and on the server. The client app is using latest Angular features.

In this post I will show you how I implemented the app from scratch.

Demo: TypeScript Chat ApplicationWhat is a Real Time Application?According this Wikipedia definition, a real-time application allows information to be received as soon as it is published, rather than requiring a source to be checked periodically for updates. Therefore, this kind of app should give a feeling to users that events and actions happen is a protocol that provides a bi-directional communication channel. This means that a browser and web server can maintain real-time comms, sending messages back and forth while the connection is open.

Websockets communicationApplication StructureWe will separate server related code and client code. I will go into details when most important files will are explained. For now, this is the expected structure of our application:

server/

|- src/

|- package.json

|- tsconfig.json

|- gulpfile.jsclient/

|- src/

|- package.json

|- tsconfig.json

|- .angular-cli.jsonServer CodeSince WebSockets is a specification, we can find several implementations about it. We can…

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular