首页 > 代码库 > socket.io实践(一.实现简单的图表推送）

socket.io实践(一.实现简单的图表推送）

2024-08-24 18:07:57   212人阅读

引子:随着nodejs蓬勃发展，虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器。但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素。

研究本例主要为后期BI软件,CRM图标系统使用nodejs socket做铺垫.主要实现的是一个分析表图的推送。

 

socketio.io 代码库以及官网

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

http://socket.io/

使用redis来实现集群读写 消息 （采用订阅 分发的策略）

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

在非socket客户行为中发送socket事件(本例在http中调用)

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

 

 

1.安装和基本使用 npm install socketio.io --save

使用因为本人写的例子是Express照搬官网说明

var app = require(‘express‘)();
var server = require(‘http‘).createServer(app);
var io = require(‘socket.io‘)(server);
io.on(‘connection‘, function(){ /* … */ });
server.listen(3000);

　　

2.使用websocket初始化一个echart的图片

socket.js 简单封装下socket.io的一些基本功能

var mockData = [
    [10, 52, 200, 334, 390, 330, 220]
];


var ioCreater = function(server) {
    var io = require(‘socket.io‘)(server);
    io.on(‘connection‘, function (socket) {
        socket.emit(‘init chart data‘, {data:mockData[0]});   //socket客户端发送一个消息 init chart data ,内容为一组数据
        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项目主入口,创建8080端口web服务器的时候创建一个socket服务

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);

 

推送入口，一个express的路由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‘);  //此处修改来自socket.io-emitter.js

var mockData = http://www.mamicode.com/["123456"  });
    setTimeout(function(){
        count++;
        io.emit(‘init chart data‘, {data:mockData[count%10]});
        res.render(‘index‘, { title: ‘推送一条消息成功！‘});
    }, 500);

});



module.exports = server;

　　

 

　　

前端页面

<!DOCTYPE html>
<html>
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset=‘utf-8‘>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 页面描述 -->
    <meta name="description" content="chart demo"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content="chart demo"/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>chart</title>
    <link rel=‘stylesheet‘ href=http://www.mamicode.com/‘/css/style.css‘/>"text/javascript" src="http://www.mamicode.com/js/library/echart/3.3.2/echarts.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/socket.io/socket.io.js"></script>

</head>
<body>
<div class="chart-wrap" id="chart-wrap"></div>
<script type="text/javascript">
    var mychart = echarts.init(document.getElementById("chart-wrap"));
    var option = {
        color: [‘#3398DB‘],
        tooltip: {
            trigger: ‘axis‘,
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: ‘shadow‘        // 默认为直线，可选为：‘line‘ | ‘shadow‘
            }
        },
        grid: {
            left: ‘3%‘,
            right: ‘4%‘,
            bottom: ‘3%‘,
            containLabel: true
        },
        xAxis: [
            {
                type: ‘category‘,
                data: [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: ‘value‘
            }
        ],
        series: [
            {
                name: ‘直接访问‘,
                type: ‘bar‘,
                barWidth: ‘60%‘,
                data: [10, 52, 200, 334, 390, 330, 220]
            }
        ]
    };



    var drawChart = function(data){
        option.series[0].data = http://www.mamicode.com/data;"ws://10.10.10.96:8080");
    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‘);
    });
    socket.on(‘init chart data‘, function(data){
        console.log(‘init chart data‘);
        drawChart(data.data);
    });
    socket.on(‘new chart data‘, function(data){
        console.log(‘new chart data‘);
        drawChart(data.data);
    });



</script>
</body>
</html>

　　

最后结果，通过http://localhost:8080/charts/simpleBarChart访问获得一个简单的echart图表，

通过http://localhost:8080/charts/pollingChartData访问推送新数据重绘图表,每次发送一次请求，重新绘制一次图片。

技术分享

技术分享

 

socket.io实践(一.实现简单的图表推送）


联系
我们