Sharing Top Content from the Angular-sphere.

Real Time Apps with TypeScript: Integrating Web Sockets, Node & 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 gulp gulp-typescriptTypeScript Compiler ConfigurationCreate a tsconfig.json…
  • let’s see further details into our server/src directory:server/|- src/ |- model/ |- message.model.ts |- user.model.ts |- index.ts |- server.ts|- package.json|- tsconfig.json|- gulpfile.jsChat Server ImplementationThe main files in server directory are index.ts and chat-server.
  • 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 V8 engine of Node.js, we…
  • js command to have the server running.Client CodeLet’s generate our client directory using the latest Angular CLI version:ng new typescript-chat-client –routing –prefix tcc –skip-installThen install your dependencies running npm install(I prefer to use Yarn for this step):cd typescript-chat-clientyarn installAdding Angular MaterialFind and follow the latest guide to install Angular Material inside…
  • This time inside chat directory:ng generate service chat/shared/services/socket –module chatng generate class chat/shared/model/userng generate class be ending with a structure similar to:client/|- src/ |- app/ |- chat/ |- shared/ |- model/ |- user.ts |- message.ts |- services/ |- socket.service.ts |- shared/ |-app.module.tsObservables and Web SocketsSince our Angular app comes with RxJS,…

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 choose JĚśaĚśvĚśaĚśSĚścĚśrĚśiĚśpĚśtĚś TypeScript or any other programming language.In this case we’ll use Socket.IO, which is one of the fastest and most reliable real-time engines.Why use TypeScript on server side code?TypeScript comes with really cool features and it…

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