Total.js + socket.io = realtime communication

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:

  • Real-time analytics – Push data to clients that gets represented as real-time counters, charts or logs.
  • Binary streaming – Starting in 1.0, it’s possible to send any blob back and forth: image, audio, video.
  • Instant messaging and chat – Socket.IO’s “Hello world” is a chat app in just a few lines of code.
  • Document collaboration – Allow users to concurrently edit a document and see each other’s changes.

In below article will be presented consolidation socket.io module with Total.js platform.

Assumptions and Benefits our project:

  • Main objective: integration 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.git

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:

1. Add to config line configuration allow-websocket: false to disable web socket lib

2. Implement integration socket.io library with total.js  in main total.js file server (e.g. debug.js, release.js or in any defined by You file)

3. Place in index.html javascript socket.io reference responsible for communication client side with node.js server

<script src=’/socket.io/socket.io.js’></script>

4. Implement javascript functionality responsible for communication by socket.io on client side (index.html or layout.html)

4. Bind functions of socket.io javascript with html tags to handle events for incoming and sending message

 

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. Start the server from the root directory of project
        node debug.js
        
      3. You should see information that total.js was started

Visit http://localhost:8000, open two or more browsers and start work on messenger

April 4th, 2017

Leave a Reply

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