Socket.io Practice (I. Implementation of simple chart push)

Introduction: With Nodejs booming, although the main business system because of the robustness of the architecture will not choose the Nodejs seat application server. However, a large number of internal systems can use Nodejs test water, a large number of front-end developers into the whole heap development is also a factor.

The study of this case is mainly for the later BI software, the CRM icon system uses the NODEJS socket to do the foreshadowing. The main implementation is the push of an analytic table diagram.

Socketio.io code base and official website

Https://github.com/socketio/socket.io

http://socket.io/

Use Redis for cluster read and write messages (policies with subscription distribution)

Https://github.com/socketio/socket.io-redis

Send the socket event in a non-socket customer behavior (This example is called in HTTP)

Https://github.com/socketio/socket.io-emitter

1. Install and basic use NPM install Socketio.io--save

Use because I write an example is Express copy official website description

var app = require (' Express ') (); var server = require (' http '). Createserver (app); var io = require (' Socket.io ') (server); Io.on (' Connection ', function () {/* *}); Server.listen (3000);

　　

2. Use WebSocket to initialize a echart picture

Socket.js some basic functions of socket.io under simple encapsulation

var = [    [Mockdata], 334, 390, 220]];var iocreater = function (server) {    var io = require (' Socket.io ') (server);    Io.on (' Connection ', function (socket) {        socket.emit (' Init chart data ', {data:mockdata[0]});   The socket client sends a message to init chart data, which contains a set of        socket.on (' Disconnect ', function () {            console.log (' User Disconnected ');        });        Socket.on (' message ', function () {            Console.log (' received a message ');        });        Socket.on (' Connect ', function () {            console.log (' Connect a Socket client ');});    

var Redis = require (' Redis ');
var adapter = require (' Socket.io-redis ');
var pub = Redis.createclient ({host: "192.168.0.13", Port: "6379", Password: "123456"});
var sub = redis.createclient ({host: "192.168.0.13", Port: "6379", Password: "123456", return_buffers:true});
Io.adapter (Adapter ({pubclient:pub, subclient:sub}));

return IO; } module.exports = Iocreater;

　

App.js Express Project main portal, creating a socket service when creating a 8080-port Web server

var socket = require ('./socket/socket '); var port = normalizeport (Process.env.PORT | | ' 8080 '); App.set (' Port ', port); var server = Http.createserver (app); var io = socket (server); Server.listen (port);

Push-in Port, an express route charts.js

var express = require (' Express '); var router = Express. Router (); var server = Express (); Server.use ('/charts ', Router);var emitter = require ('..  /tools/socket.io-emitter.js '); Change here from Socket.io-emitter.jsvar mockdata = [[10, 52, 200, 334, 390, 330, 220], [10, 52, 200, 334, 390, 330, 220], [88, 32, 87, 432, 4, 30, 8  7], [42, 52, 87, 23, 390, 42, 87], [42, 52, 200, 334, 390, 42, 876], [53, 52, 321, 324, 42, 330, 32], [44, 87, 4, 32, 390, 42, 32], [53, 87, 42, 334, 54, 330, 220], [530, 52, 54, 43, 43, 330, 32], [88, 13, 233, 98, 43, 44, 32]];var count =1;const disablelayout ={layout:false};//Disable interface Layout.hbs user config layout:falserouter.ge    T ('/simplebarchart ', function (req, res, next) {var result = Object.assign ({title: ' Chart demo '},disablelayout); Res.render (' charts/simplebarchart ', result);}); Router.get ('/pollingchartdata ', function (req, res, next) {//10.10.10.96:8080 var io = emitter ({host: ' 192.168.0.13    ', port:6379, Password: "123456"});        SetTimeout (function () {count++;        Io.emit (' Init chart data ', {data:mockdata[count%10]}); Res.render (' index ', {title: ' Push a message successfully!    ‘}); }, 500);}); Module.exports =Server 

　　

　　

Front Page

<! DOCTYPE html>
　　
Finally, a simple Echart chart is obtained through Http://localhost:8080/charts/simpleBarChart access,
Redraw the chart with Http://localhost:8080/charts/pollingChartData access push new data, send a request one time, and redraw the picture again.
Socket.io Practice (I. Implementation of simple chart push)