Angular2 and socket.io integration on Total.js platform

In this article I will focus on Angular2 and socket.io integration on Total.js platform. Logic of solution in case of  total.js and socket.io will be the same like in previous article http://maxprog.net.pl/real-time-io/total-js-socket-io-realtime-communication/ and we will focus only on angular2 part. Socket.io (www.socket.io) 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 socket.io 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 socket.io library for realtime communication

Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/total.js-socket.io-angular2

Structure of angular 2 directories is following:

Structure of Total.js directories is following:

The most important:

In case of integration Total.js  with socket.io You have to do following steps described on http://maxprog.net.pl/real-time-io/total-js-socket-io-realtime-communication/ but with the one very important change in config Total.js file

In case of angular2:

1. Install two socket.io libraries: socket.io-client and @types/socket.io-client (without second one transpilation process of angular2 will be finished with errors). This two mentioned libraries are necessary to integration our client side with socket.io

npm install socket.io-client --save
npm install @types/socket.io-client --save

2. Place index.html in /view server total.js directory

4. Implement service to handle communication with total.js by socket.io

4. Bind functions of socket.io 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 socket.io. 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

April 10th, 2017

Leave a Reply

Your email address will not be published. Required fields are marked *