vue引入DataV和echarts,实现大屏可视化

创建项目

vue create 项目名称

引入组件库dataV

DataV官网

npm install @jiaminghi/data-view 

// 将自动注册所有组件为全局组件 
import dataV from '@jiaminghi/data-view' 
//在main.js里全局挂载
Vue.use(dataV)

通过DataV可以快速搭建一个大屏可视化页面,DataV中提供了一些开发组件,但是类型较少,可以使用DataV中的结构组件,搭建出一个框架,页面内容可以通过引入Echarts来实现

引入echarts

下载插件
npm i echarts -s
在main.js 中引入
import "./assets/css/index.css";
import * as echarts from "echarts";

websocket

相对于传统的http协议,通信只能由客户端发起,服务端不会向客户端主动推送消息,

websocket是html5新增的协议,它诞生的目的就是在客户端和服务器之间建立一个不受限的双向通信通道

传统的http协议是客户端主动向服务器获取数据

为什么传统的http协议不能做到websocket实现的功能?

因为http协议是一个请求,相应协议,本身来说就是被动的,请求必须先有浏览器发送给服务器,服务器才会有相应

在没有websocket之前,要是写一个在线聊天的网站,就是用轮询的方法,每隔多长时间去请求服务器(实时性不够,服务器压力大)

websocket的出现就是为了解决实时通讯的问题

websocket的好处:

双向实时通信,允许在单个,长时间的连接上进行双向实时通信,比http更加高效

降低延迟,链接一旦建立便会保持开放,数据可以在客户端和服务器之前比http更低的延迟传输

跟高效的资源利用,可以减少重复请求和响应的开销,因为他的链接只需要建立一次

initWebsocket() {
            // 创建WebSocket连接  客户端与服务端建立连接
            var socket = new WebSocket('ws://127.0.0.1:8090');
            // 监听socket连接
            socket.onopen = function () {
                alert('连接成功')
            };
            socket.onerror = function () {
                alert('连接失败')
            };
            // 监听socket消息
            socket.onmessage = function (event) {
                console.log(event.data);
            }
        }

在mounted生命周期中调用此方法

以上是我个人的一些见解,希望大家批评指正~