引子:随着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 = [
[10, 52, 200, 334, 390, 330, 220],
[10, 52, 200, 334, 390, 330, 220],
[88, 32, 87, 432, 4, 30, 87],
[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: false
router.get(‘/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: ‘推送一条消息成功！‘});
}, 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 protected]"/>
<!-- 搜索引擎抓取 -->
<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=‘/css/style.css‘/>
<link rel=‘stylesheet‘ href=‘/css/charts/charts.css‘/>
<script type="text/javascript" src="/js/library/echart/3.3.2/echarts.min.js"></script>
<script type="text/javascript" src="/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 = data;
mychart.setOption(option);
};
var socket = io("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访问推送新数据重绘图表,每次发送一次请求，重新绘制一次图片。
时间： 2024-11-01 22:59:00