前端开发_大屏技术

——李郑雄 2018-04-26

1、开发流程概述：

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

2、 requireJS框架：requireJS使用教程链接

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

require.js使用了不同于传统

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

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

4、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请求，减少网络带宽资源的占用节省服务器资源;