Monday, 10 April, 2017 UTC


In this article I will focus on Angular2 and integration on Total.js platform. Logic of solution in case of  total.js and will be the same like in previous article and we will focus only on angular2 part. ( is one of the most famous and professional library to real time communication. Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed. Most well-known usage this library was also described in previous mentioned article.
In below article will be presented integration Angular2 and on Total.js platform with the same layout view like in previous article.
Assumptions and Benefits our project:
  • Main objective: integration Angular2 and Total.js with library for realtime communication
Below presented skeleton/project You can find on my GitHub repository:
Structure of angular 2 directories is following:
Structure of Total.js directories is following:
The most important:
In case of integration Total.js  with You have to do following steps described on but with the one very important change in config Total.js file
In case of angular2:
1. Install two libraries: and @types/ (without second one transpilation process of angular2 will be finished with errors). This two mentioned libraries are necessary to integration our client side with
npm install --save
npm install @types/ --save
2. Place index.html in /view server total.js directory
4. Implement service to handle communication with total.js by
4. Bind functions of angular2 with html tags to handle events for incoming and sending message
component side:
html component side
The last operation it is installation process all necessary modules and run total.js server:
      1. Install the total.js  in project directory
        npm install 
      2. Install the dependencies for Angular2  in /client
        npm install
      3. run build and copy bundled files of client Angular 2 and Bundled files will be copied to /public directory
        npm run build && npm run deploy
      4. Start the server from the root directory of project
        npm start
      5. You should see information that react and total.js was started
Visit http://localhost:8000, open two or more browsers and start work on messenger