《Web前端技术》教学ppt课件 11HTML5网络通讯与多线程.pptx

《《Web前端技术》教学ppt课件 11HTML5网络通讯与多线程.pptx》由会员分享，可在线阅读，更多相关《《Web前端技术》教学ppt课件 11HTML5网络通讯与多线程.pptx（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML5网络通信与多线程学习导图11.1 WebSocket11.1 WebSocket11.1.1 WebSocket协议概述n在传统的TCP/IP网络编程中，可以使用socket接口建立网络连接，实现客户端和服务器之间的数据传输。n在Web开发环境下，浏览器与服务器之间主要以HTTP协议进行连接，由HTTP客户端发起一个请求，创建一个到服务器指定端口（默认是80端口）的TCP连接。HTTP服务器则在那个端口监听客户端的请求，一旦收到请求，服务器会向客户端返回一个状态，比如HTTP/1.1 200 OK，以及返回的内容，如请求的文件、错误消息、或者其它信息。nHTTP协议是非持久化的，单向

2、的网络协议，在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。11.1.1 WebSocket协议概述n对于网站上的即时通讯开发，如网页QQ、多人在线聊天系统等，需要维持客户端与服务端的实时通信。n在WebSocket之前，通常采用AJAX轮询和Long Polling长轮询技术。nWebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket的出现使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket中，只需要服务器和浏览器通过HTTP协议进行一个握手的动作，两者之间就直接可以创建持久性的连接，并进行双向数据

3、传输。11.1.1 WebSocket协议概述n对于网站上的即时通讯开发，如网页QQ、多人在线聊天系统等，需要维持客户端与服务端的实时通信。11.1.2 WebSocket连接过程n为了建立WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP握手请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息。11.1.3 WebSocket APIn为了建立WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP握手请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息。n服务端负责响应协议升级，返回报文。11.1.3 WebSocket APInWebSocket

4、的实现分为客户端和服务端两部分。目前，WebSocket服务端在各个主流应用服务器厂商中已获得符合JSR356标准规范API的支持，通过使用javax.websocket.*的API，可以将一个普通Java对象（POJO）使用ServerEndpoint注释作为WebSocket服务器端。11.1.3 WebSocket APIn客户端WebSocket API已经在各个主流浏览器厂商中实现了统一，使用标准HTML5定义的WebSocket客户端的JavaScript API即可。11.1.3 WebSocket API客户端通过浏览器向聊天服务器发起请求，服务器端解析客户端发出的握手请求并产

5、生应答信息返回给客户端，从而在客户端和服务器之间建立连接通道。服务器支持广播功能，每个聊天用户发送的信息会实时的发送给所有的用户，当用户退出聊天室时，服务器端需要清理相应用户的连接信息，避免资源的泄漏。n基于WebSocket聊天室应用组成：WebSocketServer、SocketConnection两个核心类。功能：实现WebSocket 握手信息的处理逻辑过程：服务器端启动一个套接字，监听来自客户端的连接请求，服务器端解析WebSocket Upgrade信息，Sec-WebSocket-Key1，Sec-WebSocket-Key2和8-byte security key头信息，并根

6、据 WebSocket规范的要求产生应答信息。n基于WebSocket聊天室应用：服务器端11.1.3 WebSocket APIn基于WebSocket聊天室应用：客户端11.1.3 WebSocket API11.2 XMLHttpRequest11.2 XMLHttpRequest11.2.1XMLHttpRequest对象nXMLHttpRequest称为可扩展的超文本传输请求，英文缩写为XHR，它可以在不刷新页面的情况下更新网页中的某个部分，能够在页面加载后从服务器请求或接收数据，此外还能够在后台向服务器发送数据。n微软早在IE5浏览器中就引进了XMLHttpRequest接口，随后

7、这一技术在AJAX中得到了广泛的应用。HTML5规范发布后，W3C开始考虑标准化这个接口，并于2008年2月提出了XMLHttpRequest Level 2草案。11.2.1XMLHttpRequest对象n在Level1版本中，XMLHttpRequest对象的使用比较简单，一般包括新建对象实例，向远程主机发送HTTP请求，等待远程主机做出回应等操作。11.2.2改进的XMLHttpRequest对象nHTML5发布了XMLHttpRequest Level 2规范，Level 2版本对Level 1进行了改进，新增了一些功能。n为了解决响应事件长的问题，增加了timeout属性，用来设置

8、HTTP请求的时限。n新增了FormData对象，该对象既可以用来获取网页表单的值，也可以添加自定义的表单项11.2.2改进的XMLHttpRequest对象n新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求，即“跨域资源共享”（Cross-origin resource sharing，简称CORS）。nXMLHttpRequest对象支持的另一重要特性是从服务器端获取二进制数据。nXMLHttpRequest对象新增了responseType属性和response属性。其中responseType属性用于指定服务器端返回的数据类型，属性值包括text、arr

9、aybuffer、blob、json或document，默认取值text。response属性则根据responseType属性值返回对应的服务端响应数据。n在传送数据时，新版XMLHttpRequest对象还提供了progress事件，用来返回进度信息。11.3 Web Worker11.3 Web Worker11.3.1 Web Worker对象nJavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。nWeb Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。

10、在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样一些计算密集型或高延迟的任务，被Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。11.3.1 Web Worker对象n检测浏览器对Worker的支持情况。n在外部JavaScript中创建worker线程，命名为workerTest.js，子线程监听message事件，当收到主线程发来的数据时，调用postMessage方法向主线程发送信息。11.3.1 Web Worker对象n在主线程中使用Worker构造函数进行调用，构造函数的参数就是上面定义的Worker子线程文件。11.3.2 Web Worker应用实例n使用Web Worker计算指定范围内的所有素数。11.3.2 Web Worker应用实例n子线程worker.js