资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020/7/20 Monday,#,HTML5,网络,通信,与多线程,HTML5,1,学习,导图,学习导图,11.1 WebSocket,11.1 WebSocket,3,11.1.1 WebSocket,协议概述,在传统的,TCP/IP,网络编程中，可以使用,socket,接口建立网络连接，实现客户端和服务器之间的数据传输,。,在,Web,开发环境下，浏览器与服务器之间主要以,HTTP,协议进行连接，由,HTTP,客户端发起一个请求，创建一个到服务器指定端口（默认是,80,端口）的,TCP,连接,。,HTTP,服务器则在那个端口监听客户端的请求，一旦收到请求，服务器会向客户端返回一个状态，比如,HTTP/1.1 200 OK,，以及返回的内容，如请求的文件、错误消息、或者其它信息,。,HTTP,协议是非持久化的，单向的网络协议，在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的,数据。,11.1.1 WebSocket协议概述在传统的TCP/IP,11.1.1 WebSocket,协议概述,对于网站上的即时通讯开发，如网页,QQ,、多人在线聊天系统等，需要维持客户端与服务端的实时通信,。,在,WebSocket,之前，通常采用,AJAX,轮询和,Long Polling,长轮询技术,。,WebSocket,是一种在单个,TCP,连接上进行全双工通信的协议。,WebSocket,的,出现使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在,WebSocket,中，只需要服务器和浏览器通过,HTTP,协议进行一个握手的动作，两者之间就直接可以创建持久性的连接，并进行双向数据,传输。,11.1.1 WebSocket协议概述对于网站上的即时通讯,11.1.1 WebSocket,协议概述,对于网站上的即时通讯开发，如网页,QQ,、多人在线聊天系统等，需要维持客户端与服务端的实时通信,。,11.1.1 WebSocket协议概述对于网站上的即时通讯,11.1.2 WebSocket,连接过程,为了,建立,WebSocket,连接，客户端浏览器首先要向服务器发起一个,HTTP,握手请求，这个请求和通常,的,HTTP,请求,不同，包含了一些附加头,信息。,11.1.2 WebSocket连接过程为了建立WebSoc,11.1.3 WebSocket API,为了建立,WebSocket,连接，客户端浏览器首先要向服务器发起一个,HTTP,握手请求，这个请求和通常的,HTTP,请求不同，包含了一些附加头信息。,服务端负责响应协议升级，返回报文。,11.1.3 WebSocket API为了建立WebSoc,11.1.3 WebSocket API,WebSocket,的实现分为客户端和服务端两部分。目前，,WebSocket,服务端在各个主流应用服务器厂商中已获得符合,JSR356,标准规范,API,的支持，通过使用,javax.websocket.*,的,API,，可以将一个普通,Java,对象（,POJO,）使用,ServerEndpoint,注释作为,WebSocket,服务器端。,11.1.3 WebSocket APIWebSocket的,11.1.3 WebSocket API,客户端,WebSocket API,已经在各个主流浏览器厂商中实现了统一，使用标准,HTML5,定义的,WebSocket,客户端的,JavaScript API,即可。,11.1.3 WebSocket API客户端WebSock,11.1.3 WebSocket API,客户端通过浏览器向聊天服务器发起请求，服务器端解析客户端发出的握手请求并产生应答信息返回给客户端，从而在客户端和服务器之间建立连接通道。,服务器支持广播功能，每个聊天用户发送的信息会实时的发送给所有的用户，当用户退出聊天室时，服务器端需要清理相应用户的连接信息，避免资源的泄漏。,基于,WebSocket,聊天室应用,11.1.3 WebSocket API客户端通过浏览器向聊,组成：,WebSocketServer,、,SocketConnection,两个核心类。,功能：实现,WebSocket,握手信息的处理逻辑,过程：服务器端启动一个套接字，监听来自客户端的连接请求，服务器端解析,WebSocket Upgrade,信息，,Sec-WebSocket-Key1,，,Sec-WebSocket-Key2,和,8-byte security key,头信息，并根据,WebSocket,规范的要求产生应答信息。,基于,WebSocket,聊天室应用：服务器端,11.1.3 WebSocket API,组成：WebSocketServer、SocketConne,基于,WebSocket,聊天室应用：客户端,11.1.3 WebSocket API,基于WebSocket聊天室应用：客户端11.1.3 Web,11.2 XMLHttpRequest,11.2 XMLHttpRequest,14,11.2.1XMLHttpRequest,对象,XMLHttpRequest,称为可扩展的超文本传输请求，英文缩写为,XHR,，它可以在不刷新页面的情况下更新网页中的某个部分，能够在页面加载后从服务器请求或接收数据，此外还能够在后台向服务器发送数据。,微软早在,IE5,浏览器中就引进了,XMLHttpRequest,接口，随后这一技术在,AJAX,中得到了广泛的应用。,HTML5,规范发布后，,W3C,开始考虑标准化这个接口，并于,2008,年,2,月提出了,XMLHttpRequest Level 2,草案。,11.2.1XMLHttpRequest对象XMLHttpR,11.2.1XMLHttpRequest,对象,在,Level1,版本中，,XMLHttpRequest,对象的使用比较简单，一般包括新建对象实例，向远程主机发送,HTTP,请求，等待远程主机做出回应等操作。,11.2.1XMLHttpRequest对象在Level1版,11.2.2,改进的,XMLHttpRequest,对象,HTML5,发布了,XMLHttpRequest Level 2,规范，,Level 2,版本对,Level 1,进行了改进，新增了一些功能,。,为了解决响应事件长的问题，增加了,timeout,属性，用来设置,HTTP,请求的时限,。,新增了,FormData,对象，该对象既可以用来获取网页表单的值，也可以添加自定义的表单项,11.2.2改进的XMLHttpRequest对象HTML5,11.2.2,改进的,XMLHttpRequest,对象,新版本的,XMLHttpRequest,对象，可以向不同域名的服务器发出,HTTP,请求,，即“跨域资源共享”,（,Cross-origin resource sharing,，简称,CORS,）。,XMLHttpRequest,对象支持的另一重要特性是从服务器端获取二进制数据,。,XMLHttpRequest,对象新增了,responseType,属性和,response,属性。其中,responseType,属性用于指定服务器端返回的数据类型，属性值包括,text,、,arraybuffer,、,blob,、,json,或,document,，默认取值,text,。,response,属性则根据,responseType,属性值返回对应的服务端响应,数据。,在传送数据时，新版,XMLHttpRequest,对象还提供了,progress,事件，用来返回进度信息。,11.2.2改进的XMLHttpRequest对象新版本的X,11.3 Web Worker,11.3 Web Worker,19,11.3.1 Web Worker,对象,JavaScript,语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事,。,Web Worker,的作用，就是为,JavaScript,创造多线程环境，允许主线程创建,Worker,线程，将一些任务分配给后者运行。在主线程运行的同时，,Worker,线程在后台运行，两者互不干扰。等到,Worker,线程完成计算任务，再把结果返回给主线程。,这样一些,计算密集型或高延迟的任务，,被,Worker,线程负担了，主线程（通常负责,UI,交互）就会很流畅，不会被阻塞或拖慢。,11.3.1 Web Worker对象JavaScript,11.3.1 Web Worker,对象,检测浏览器,对,Worker,的支持情况,。,在外部,JavaScript,中创建,worker,线程，命名为,workerTest.js,，子线程监听,message,事件，当收到主线程发来的数据时，调用,postMessage,方法向主线程发送信息。,11.3.1 Web Worker对象检测浏览器对Worke,11.3.1 Web Worker,对象,在主线程中使用,Worker,构造函数进行调用，构造函数的参数就是上面定义的,Worker,子线程文件。,11.3.1 Web Worker对象在主线程中使用Work,11.3.2,Web,Worker,应用实例,使用,Web Worker,计算指定范围内的所有素数。,11.3.2 Web Worker应用实例使用Web Wor,11.3.2,Web,Worker,应用实例,子,线程,worker.js,11.3.2 Web Worker应用实例子线程worker,
展开阅读全文