初学 SOCKTE.IO

• 引入相关模块

let express = require('express');let app = express();let http = require('http').createServer(app);let io = require('socket.io')(http);let mock = require('mockjs');

模仿候车厅显示屏幕

• 后台使用fastmock编写模拟数据

//读取静态资源文件
app.use('/',express.static('public'));//当客户端连接的时候io.on('connection', function(socket){    setInterval(() => {        let data = mock.mock({            'list|5':[{                'name':'G@integer(10,1000)',                'time':'@time',                'state|1':['延误','即将发车','停止检票']            }]        }).list        socket.broadcast.emit('tongzhi',JSON.stringify(data));    }, 3000);
 http.listen(3000, function(){    console.log('listening on *:3000');  });

• 前端引入socket.io.js，接收数据，渲染在页面上

<script src="/socket.io/socket.io.js"></script> 
mounted() {            this.socket = io();            this.socket.on('chat', data => {                this.msglist.push(data);            })
}

配合Echarts 动态渲染数据

• 引入Echarts.js

<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>

• 后台使用fastmock编写模拟数据

 setInterval(() => {        let data = mock.mock({                'xl|7':['@integer(10,1000)'],                'cb|7':['@integer(10,1000)'],        })        socket.broadcast.emit('changechart',JSON.stringify(data));    }, 3000);

this.myChart = echarts.init(document.getElementById('main'));  
socket.on('changechart', data => {                data = JSON.parse(data);                this.setChart(data);            })
}

setChart(data) {                // 指定图表的配置项和数据                var option = {                    tooltip: {},                    xAxis: {                        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]                    },                    yAxis: {},                    series: [                        {                            name: '销量',                            type: 'line',                            data: data.xl                        },                        {                            name: '成本',                            type: 'line',                            data: data.cb                        }                    ]                };                // 使用刚指定的配置项和数据显示图表。                this.myChart.setOption(option);            }