Monday, 10 April, 2017 UTC
Summary
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 --save2. 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:
- Install the total.js in project directory
npm install - Install the dependencies for Angular2 in /client
npm install - 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 - Start the server from the root directory of project
npm start - 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