前端之大屏

前端开发_大屏技术

——李郑雄 2018-04-26

一、开发流程概述：

主要流程包含如下步骤：需求调研，场景布局， UI设计， DEMO确认，场景切图，场景开发，测试部署，上线演示，迭代调整，数据同步及接入，正式上线。

二、 requireJS框架： requireJS使用教程连接

require是一个轻量级框架，用于模块化的设计网页中的各组成部分而后再将这些模块组合在一块儿。各模块间相对独立、互不影响。

require.js使用了不一样于传统<script>标签的脚本加载步骤，其主要目的是为了代码的模块化，用于显示页面数据。它以一个相对于baseUrl的地址来加载全部的代码，页面顶层<script>标签含有一个特殊的属性data-main， require.js使用它来启动脚本加载过程，而baseUrl通常设置到与该属性相一致的目录。

三、Echarts框架(网页视图技术)： 

Echarts官方API：http://echarts.baidu.com/index.html

Echarts是一个使用JavaScript实现的开源可视化库,能够流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。遵循原则：交互是从数据中发掘信息的重要手段，“总览为先，缩放过滤按需查看细节”是数据可视化交互的基本需求。

四、webSocket技术(来自于网络)：

1)、web socket基本概念：

Web socket是Web领域的一种实时推送技术也被称做Realtime技术,这种技术要达到的目的是让用户不须要刷新浏览器就能够得到实时更新。其本质上是一个基于TCP的协议，协议经过第一个request创建了TCP链接以后，以后都不须要再发送 HTTP header就能交换数据。websocket协议是一种名为"ws"的全新的协议(不属于http无状态协议)，所以websocket链接地址一般是这样的写法：ws://**。

2)、js中的web sockets: 

为了实如今单独的持久链接上提供全双工、双向通讯的功能，HTML5中增长了链接API-WebSockets。在js中建立了WebSocket以后，会有一个HTTP请求发送到浏览器以发起链接。在取得服务器响应后，创建的链接会使用HTTP升级，从HTTP协议转变为web socket协议。具体的过程以下：

a）客户端经过发送HTTP请求执行双方握手过程，发送的数据报文格式以下:

************************************************************************

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Origin: http://example.com

************************************************************************

Upgrade：websocket参数值代表这是WebSocket类型的请求，

Sec-WebSocket-Key是WebSocket客户端发送的一个 base64编码的密文，要求服务端必须返回一个对应加密的

Sec-WebSocket-Accept应答，不然客户端会抛出Error during

WebSocket handshake错误，并关闭链接。

b）服务器端处理完请求以后生成响应报文返回给web端,表示已成功创建了Websocket链接：

************************************************************************

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

Sec-WebSocket-Protocol: chat

************************************************************************

参数Sec-WebSocket-Accept是通过服务器确认而且加密事后的Sec-WebSocket-Key，Sec-WebSocket-Protocol则表示最终使用的协议。能够查阅WebSocket协议栈了解WebSocket客户端和服务端更详细的交互数据格式。

3)、web sockets API:

要建立Web Socket，先实例化一个webSocke对象并传入URL，浏览器解析和识别后，就会经过HTTP请求 建立该URL所指向的链接：

************************************************************************

var socket= new WebSocket('ws:www.example.com/server.php');

************************************************************************

在这里必须给WebSocket传入绝对URL，同源策略对Web Sockets不适用，所以能够经过它打开任何站点的链接。

WebSocket是个协议归属于IETF, WebSocket API 是一个Web API，归属于W3C, 两个规范是独立发布的。 广义上的HTML5里面包含的是WebSocket API，并非WebSocket。简单的说能够把 WebSocket当成 HTTP，WebSocket API 当成 Ajax。

WebSocke有一个表示当前状态的readyState属性：

WebSocket.OPENING(0)：正在建立链接

WebSocket.OPEN(1)：已经创建链接

WebSocket.CLOSING(2)：正在关闭链接

WebSocket.CLOSING(3)：已经关闭链接

readyState的值永远从0开始。 要关闭socket链接，能够在任什么时候候调用close()方法：socket.close();

 

4)、发送和接收数据:  Web Socket打开以后，就能够经过链接发送和接收数据。要向服务器发送数据，使用send()方法，并传入任意字符串。下: 

************************************************************************

var socket = new WebSocket('ws:www.example.com/server.php');

socket.send('hello world'); 

************************************************************************

在这里须要注意：由于WebSockets只能经过链接发送纯文本数据，因此对于复杂的数据结构，在经过链接发送以前，必须进行序列化。 当服务器向客户端发来消息时，WebSocket对象就会触发message事件。这个message事件与其余传递消息的协议相似，也是把返回的数据保存在event.data属性中：

************************************************************************

socket.onmessage = function(e){ var data = e.data; 。。。。。。 }；

************************************************************************

值得一提的是data的数据格式也是字符串，若是想获得其余格式的数据，必须手工解析这些数据。

5)、其余事件:WebSocket对象还有在链接声明周期的不一样阶段触发的其余三个事件：

open：在成功创建链接时触发

error： 在发生错误时触发，链接不能持续

close：在链接关闭时触发

WebSocket对象不支持DOM2级事件侦听器，所以必须使用DOM0级语法分别定义每一个事件处理程序。在这三个事件中，只有close事件的event对象有额外的信息。这个事件的事件对象有三个额外的属性:wasClean、code和reason。其中wasClean是一个布尔值，表示链接是否已经明确的关闭；code是服务器返回的数值状态码；而reason是一个字符串，包含服务器发回的信息。能够将这些信息显示给用户。

************************************************************************

socket.onclose = function(event){

console.log(‘wasclean?+event.wasClean+’,code=’+event.code+’reason=’+event.reason);

}

************************************************************************

6)、创建链接的握手：

当Web应用程序调用new WebSocket(url)接口时，Browser就开始了与地址为url的WebServer创建握手链接的过程：

a). Browser与WebSocket服务器经过TCP三次握手创建链接，若是这个创建链接失败，那么后面的过程就不会执行，Web应用程序将收到错误消息通知。

b). 在TCP创建链接成功后，Browser/UA经过http协议传送WebSocket支持的版本号，协议的字版本号，原始地址，主机地址等等一些列字段给服务器端。

c). WebSocket服务器收到Browser/UA发送来的握手请求后，若是数据包数据和格式正确，客户端和服务器端的协议版本号匹配等等，就接受本次握手链接，并给出相应的数据回复，一样回复的数据包也是采用http协议传输。

d). Browser收到服务器回复的数据包后，若是数据包内容、格式都没有问题的话，就表示本次链接成功，触发onopen消息，此时Web开发者就能够在此时经过send接口想服务器发送数据。不然，握手链接失败，Web应用程序会收到onerror消息，而且能知道链接失败的缘由。

这个握手很像HTTP，可是实际上却不是，它容许服务器以HTTP的方式解释一部分handshake的请求，而后切换为websocket。

7)、数据传输：WebScoket协议中，数据以帧序列的形式传输。考虑到数据安全性，客户端向服务器传输的数据帧必须进行掩码处理。服务器若接收到未通过掩码处理的数据帧，则必须主动关闭链接。服务器向客户端传输的数据帧必定不能进行掩码处理。客户端若接收到通过掩码处理的数据帧，则必须主动关闭链接。针对上状况，发现错误的一方可向对方发送close帧(状态码1002，表示协议错误)以关闭WebSocket(握手) 链接。

webSocket的优势:

1)、服务器与客户端之间交换的标头信息很小,大概只有2字节;

2)、客户端与服务器均可以主动传送数据给对方;

3)、不用频繁建立及销毁TCP请求，减小网络带宽资源的占用节省服务器资源;