html5事件属性(html5实验室)

  

  陈展

  陈展

  去哪儿大住宿事业部UED中心Touch组前端工程师,主要从事移动端前端开发。

  关注并热衷于React技术栈、canvas技术、css3及node技术。

  过去的一年多时间里,本人参与了公司web ochat项目的开发和持续维护、升级、外接服务等。该项目是一个基于WebSocket的即时通信服务的网页端服务。服务包含了即时聊天、好友、群等各种功能,支持文字、表情、图片、分享、定位、文件、语音等各种消息类型,并包含断线重连、消息补偿等机制。下面跟大家分享一下本人对于WebSocket知识的一些梳理。

  

  一、 什么是WebSocket?

  大家都知道,HTML5中新来了个叫WebSocket的会员。WebSocket是什么大家也应该多多少少有所了解,它能实现客户端浏览器与服务器的双向通讯。说到双向通讯,可能有人首先会想到即时通讯,没错WebSocket可以用于网页即时通讯。当然还有很多其他的应用场景。

  WebSocket有什么优势?以往我们在网页上做即时通讯通常来说是这样的:浏览器网页隔几秒就打个电话(发个http请求)给服务器问下有没有新消息,服务器回应没有消息或者把新信息告诉网页;拿到新消息的网页通过js操作显示消息给使用者看。当然也有这样的场景:浏览器网页隔几秒就发个微信消息(发个http请求)给服务器问下有没有新消息,没有时服务器就不回复微信,有的话服务器就把消息回复给网页。这样子看起来十分美好,功能也实现了,但其实有一些问题没有很好地处理,比如:由于http通信是无状态的,网页第一次请求某人的新消息,需要带上所有的请求头及请求参数,隔几秒后的下一次请求依然还要带上完整的请求头和相同的参数,这很浪费资源,而且对服务器处理速度也有要求。那么,最好就是不用网页去询问,当有新消息时服务器直接把新消息推送给网页来显示。WebSocket正是为这种需求而生,它的基本通信原理简单来说就是:浏览器与服务器打开一条tcp通道并维持通道持续畅通,然后服务器和浏览器就可以自由的随时的发消息给对方。

  二、 WebSocket打开阶段握手

  从实质上来说,WebSocket应该是一种协议,与HTML版本无关,为什么跟HTML5牵扯在一起?WebSocket协议是在HTML5中提出的协议规范,并且HTML5制定了一套使用WebSocket的Java API。和http协议一样,WebSocket协议也是基于传输层协议TCP的应用层协议。

  WebSocket在建立tcp连接的握手阶段,需要借助于http(https)协议,这一握手过程如图1所示。

  

图1. WebSocket握手过程

  按照步骤来看,首先第一步是发送一个http(https)请求,请求服务器升级到WebSocket通信协议。在这一步的请求头中会包含这些信息:

  Connection: Upgrade Upgrade: websocket Sec-WebSocket-Key: XXXXXXXXXXXXXXXXXXXXXX== Sec-WebSocket-Protocol: xxxx Sec-WebSocket-Version: 13

  在服务器的理解下,这个请求的作用就是告诉服务器这个请求是请求升级连接协议到WebSocket协议,并且附上验证key、服务协议名(区分多个ws应用)、WebSocket版本。之后,如果服务器接受了这个请求,就会返回一个状态码为101的http response,并在header中包含这些信息:

  Upgrade: websocket Connection: Upgrade Sec-Websocket-Accept: YYYYYYYYYYYYYYYYYYYYYYY= Sec-Websocket-Protocol: xxxx

  状态码101表示协议切换(Switching Protocols),告诉浏览器协议已经切换到WebSocket并建立了连接。到这里客户端与服务器就已经建立起WebSocket连接,可以使用ws(wss)协议头发消息来进行双向通讯了。

  三、 WebSocket客户端API

  利用HTML5的WebSocket API,在前端发送和处理WebSocket消息相对来说是比较简单的。

类型

说明

url

string

服务器地址

protocol

string

服务器选择的应用协议名

readyState

number

表示连接状态,取值0-3之间

binaryType

string

  取值'blob'或'arraybuffer', 用来区分传输的二进制数据使用

  DOMBlob对象还是ArrayBuffer对象。

onopen

EventListener

连接打开的事件监听器

EventListener

发生错误的事件监听器

onmessage

EventListener

有消息到达的事件监听器

onclose

EventListener

连接关闭的事件监听器

send

Function

发送消息的方法

close

Function

关闭连接的方法

1. 建立WebSocket连接

  在使用websocket的时候,我们首先新建一个WebSocket实例:

  varws =newWebSocket('ws://localhost:9001/', 'app');

  这时就会和设置的服务器建立WebSocket连接,注意协议头使用ws://或wss://。此时ws.readyState属性将被设置为0,表示CONNECTING连接中。第二个参数用于设置一个自定义协议名,也可以是一个数组来传递多个,当连接建立成功后,服务器将会返回它选择的协议名,从 ws.protocol属性中可以看到。同时,ws.readyState将变为1,表示OPEN,连接已建立并可以进行通信。

  2. 监听连接打开事件及发送消息

  WebSocket是事件驱动型的,通过onopen, onmessage, onclose, 等事件来注册连接建立、收到消息、连接关闭、连接错误时的回调方法。监听连接打开的事件,之后就可以发消息给服务器:

  ws.onopen=function(e) { ws.send('Hello WebSocket!');};

  其中ws.send是WebSocket用于发送消息的方法,由于需要等连接建立之后才能发送消息,所以写在onopen的回调函数中。

  3. 处理收到的消息

html5事件属性(html5实验室),html5事件属性(html5实验室),html5事件属性,第1张

  连接打开后,除了发送消息,还要通过onmessage接受服务器发过来的消息加以处理,消息体在事件参数messageEvent的data属性中:

  ws.onmessage=function(messageEvent) {

  varmessage =JSON.parse(messageEvent.data);

  switch(message.type) {

  case'update':

  console.log('Update context: '+message.content);

  break;

  case'add':

  console.log('Add content: '+message.content);

  break;

  default: }};

  通过JSON.parse方法,把接受到的messageEvent.data数据重新转换为js对象,并对数据结构进行分析从而做出反应,通常都会这么做。当然除了text和json(需要序列化),也可以传递二进制数据Blob和ArrayBuffer,可通过ws.binaryType来区分两种类型。

  4. 关闭WebSocket连接

  当使用完WebSocket之后,可以通过ws.close方法关闭连接,此时ws.readyState变为2,表示CLOSING关闭过程中,关闭成功后,触发ws.onclose事件,ws.readyState变为3,表示CLOSED已断开。

  WebSocket API 文档:

  https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

  我们的公众号不支持外链,需要大家手动访问该网页。

  四、 WebSocket服务端实现

  要实现WebSocket服务器端服务,简单来说主要分为这几个步骤:

  (1)接受和处理握手阶段请求;

  (2)理解和解析websocket数据帧;

  (3)分发数据和维持心跳。

  基本处理流程如图2所示。

  

图2. WebSocket服务端基本流程

  1. 处理握手请求

  客户端浏览器执行new WebSocket(ws://****/)时,首先会发起打开阶段握手请求,这个请求是http的,请求头等信息如图3所示。

  

图3. WebSocket握手请求

  在Request Headers中可以看到上文介绍过的几个字段。服务器接收到这个请求之后,首先要将这些字段解析出来,当理解到Connection: Upgrade以及Upgrade: websocket时,要意识到这是个WebSocket握手请求,需要升级到WebSocket协议,并提取与之相关的几个字段信息,即以Sec-WebSocket-开头的字段。其中,有个很重要的验证身份的key即Sec-WebSocket-Key(以下简写为key),需要根据这个值计算出另一串字符通过Response Headers中的Sec-WebSocket-Accept(以下简写为accept-key)字段返回给客户端,告诉它验证通过。

  计算accept-key的算法并不困难,大多数语言都已经提供相关的算法接口: 首先将key与协议规定的固定字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11相连得到新的字符串,然后对其使用SHA1安全散列算法计算出结果,再进行编码,就可以得到accept-key。将accept-key和其他头信息以101状态码回应客户端之后,即可完成握手,开始进行数据传输了。在nodejs中内置了crypto模块,提供了各种加密算法,包括SHA1,可以直接使用。

  2. 解析数据帧

  第二个基本要点是理解WebSocket协议的数据帧格式。图4和图5分别为rfc6455提供的数据帧格式结构图和《深入浅出node.js》(朴灵)一书中提供的数据帧格式图。其中第一幅图标示了每一位的结构,第二幅图则是按照字节分组,大家各自挑顺眼的看。

  

图4. RFC6455的WebSocket数据帧格式图

  

图5. WebSocket数据帧格式(《深入浅出node.js》)

  数据帧中的每一位的具体含义可以查找相应资料阅读了解详情,这里简单提一下重要的部分。

  标识为FIN的第一位,标识这一帧是否为消息的最后片段。然后是标识为opcode的第5-8共四位,所以取值为十进制的0-15,用于标识数据类型,比如1代表文本,2代表二进制,8代表连接关闭,9和10分别代表ping和pong的心跳帧。

  接着有一个标识为masked的位,用于表示是否进行掩码处理,客户端发送给服务器的数据应该标记为1,服务端发送给客户端应为0。服务器解掩码时需要用到标识为masking key的4个字节的数据,即将数据的每一字节与masking key的4字节轮流进行异或运算,但若masked为0时则没有这一段数据。

  在masked位后有7位的标识为payload length的数据,用来表示数据的长度,但7位最大可表示的10进制数为127,所以为了能表示更长的数据,同时又尽量节省数据帧空间,这里做了一个不同长度的分别处理:A. 当数据长度小于等于125时,这7位即可表示数据长度;B. 当这7位的值为126时,用7位后面的2个字节即16位来表示数据长度,此时最长可表示65535;C. 如果数据长度比65535还要更大,那么这7位的值为127,表示将7位之后的8个字节即64位全部用来表示数据长度,此时可以表示的最大长度为2的64次方-1,完全够用了。最后payload data不用说就是数据体本身了。

  3. 分发数据和维持心跳

  最后一个要点,就是向客户端分发消息和维持WebSocket心跳。为了准确推送消息给一定的客户端,服务端需要维护一份客户端接入字典,以此为依据向不同的客户端推送不同的消息或是广播消息。另外,服务端长时间不与客户端通信时,WebSocket连接将会被关闭,所以需要每隔一段时间发送一次心跳检测,看连接是否健在,若已断开,则需要客户端做出提示用户、退出应用或重连甚至重连后的消息补偿等反应。这一步十分简单,只需要设置一个timer向接入的客户端每隔个几十秒问候一句,或做一个回应即可,可以使用提供的ping、pong数据帧,也可为了数据格式统一使用其他类的数据帧。

  4. 使用node.js的ws模块的简易实现示例

  了解了以上这三点,就可以用任何服务端语言编写WebSocket服务了。当然若用于生产环境,还需要注意数据安全等问题。不过,现在各类语言基本都已经有成熟的WebSocket服务模块或插件或类库可以使用,比如用node.js编写的socket.io,自己写只是用于加深理解。下面简单介绍一下用node.js中的ws模块来构造WebSocket基本服务。

  为什么不用socket.io做示例?

  socket.io除了提供WebSocket服务端封装外,同时也封装了浏览器客户端的WebSocket接口。它能够在不支持WebSocket的浏览器中使用其他技术来兼容,如xhr-polling等,并且给使用者暴露了统一的一套api. 所以如果服务端用socket.io的话,浏览器也必须搭配使用socket.io,于是没法用HTML5原生的WebSocket API来编写示例代码。为了容易理解,浏览器端js代码还是用原生api来展现,于是服务端也不选用socket.io来示例了。这里选用了比较单纯的ws模块,仅封装服务端接口。值得一提的是,socket.io十分强大,兼容性好,实际生产中值得信赖。

  

图6. 服务端代码:nodejs+koa+ws

  服务使用koa框架,在3000接口同时提供http服务和WebSocket服务。与WebSocket相关的主要代码如图中19-24行,ws模块将会获取到connection为upgrade的握手请求,打开WebSocket连接并让WebSocket消息进入ws的处理流程,其他请求则继续走koa处理流程。其中使用了一个从当前目录引入的ws.js,该模块用来处理WebSocket消息流程,代码如下。

  

图7. ws.js

  ws模块提供了clients这一API用于客户端管理,而代码中的broadcast方法是自己实现的一个消息广播的方法,在这个方法里把接受到的消息参数遍历发给每一个client实体,适用于多人即时聊天、全体推送等。代码中的第二段每隔一段时间向客户端发送当前系统时间,用于维持心跳。第三段则监听onmessage,用于接受客户端发来的消息,并广播给所有客户端。

  

图8. 前端页面代码

  收到WebSocket消息后,根据其type字段为time还是chat来区别收到的是维持心跳的系统时间还是聊天内容,如果是时间则更新页面上的时间显示,如果是聊天内容则将聊天信息格式化添加到页面上。具体html不贴了,大家就凭空想象一下吧。附一个效果图。

  

图9. 简易聊天室demo效果图

  五、 WebSocket其他相关信息

  1. 浏览器支持情况

  

图10. WebSocket浏览器端支持情况(来自caniuse.com)

  目前的主流浏览器基本都已经很好的支持了WebSocket,IE从10开始、安卓web-browser从4.4开始也都支持了WebSocket。不过考虑到国内还有不少用户在使用ie8,如果要兼容这部分用户,可以考虑使用Socket.IO库,该库在不支持WebSocket的浏览器中会使用xhr-polling或jsonp-polling等来进行消息收发。Socket.IO还可以在服务端使用,例如可以在nodejs实现的服务端中使用socket.io来搭建WebSocket服务器,并且可以很好的与express框架结合使用。

  2. WebSocket与SPDY、HTTP2的关系

  

图11. WebSocket、SPDY、HTTP2功能对比

  WebSocket提供了浏览器与服务器的全双工通信,它与SPDY、HTTP/2关注的侧重点以及解决的问题都是有所不同的,也就是说他们并不是对立的竞争者。

  我们知道http/1.0协议是单通道无状态模式,一次请求单独创建一个socket短连接来传输数据,传输完即断开,而一个页面很可能会请求很多个css文件、js文件、图片文件等,因此会发出很多http请求,建立很多次连接,由于无状态每次都要带上完整的请求头以及重复的cookie,因此造成了http/1.0的性能瓶颈。我们通常上把许多小图片合并成一张雪碧图目的就是为了减少http请求的次数从而加快页面加载速度。后来的http/1.1增加了keep-alive功能,能够保持一次tcp连接不关闭,让多个http请求使用同一个tcp连接,节省了建立连接的时间,单仍需多次请求,且只能one by one。

  为了改善http/1.*的问题,Google提出了SPDY协议。SPDY实现了多路复用、http头压缩,并兼容https(必须依赖TLS),也实现了服务器推功能。多路复用是指建立一个tcp连接,将几个要传输的文件分成小块同时并行传输,到达之后再根据小块上贴的标签组装成几个文件,看上去就像同时传输了多个文件,配合优先级使用可以使重要数据更快到达。Http头压缩功能是指http请求时对请求头进行压缩,将头信息在客户端和服务端各保存一份map,相同的仅传输一个识别key值,有新增或修改的头信息再加上,去掉了不必要的头信息,减少了带宽占用,在请求密集时效果较明显。而服务器推技术则可以客户端请求之前就把需要的资源推送过来,例如根据浏览器请求的html地址,推测浏览器可能要继续请求这个html中用到的js、css、图片文件,那么就把这些资源随着这次tcp连接多派几辆车跟html文件一起送过去,省的浏览器再来拉资源。所以与WebSocket相比,SPDY的服务器推技术的侧重点是不同的,后者着重于给页面提速,而WebSocket则更注重为页面提供一种与服务器间的全双工通讯。

  SPDY提出后,微软借鉴了SPDY和WebSocket协议,提出了一种新的协议:HTTP Speed+Mobility,妄图揉合两种协议,来提高作为http/2标准候选人的竞争力(误)。HTTP SM 对两种协议进行取舍,例如抛弃了SPDY的ServerPush、不强制依赖TLS,采用了WebSocket的数据帧格式等,不详述。

  谷歌微软这么争下去也不是个办法,于是HTTP/2协议诞生了,其设计主要基于SPDY并有一些发展。比如HTTP/2不强制依赖TLS,传输报文使用二进制,采用了SPDY的数据帧格式,支持带优先级的单TCP连接多路复用传输,改善了请求头压缩的算法使得安全性得到提高。HTTP/2提供服务器推送功能,能将所需要的资源(css、js、图片等文件)与html整合起来放在一个响应中一次推送到浏览器。目前已有一些网站基于HTTP/2来实现,访问速度的确大大提高。

  总结

  同样的基于事件响应的编程模式加上Node擅长的高并发,WebSocket与nodejs之间的配合堪称完美,朴灵大神大概是这么说的。诸如即时聊天、消息推送、及时互动游戏、协同工作、实时股价、实况报道、直播、在线教育、等等等等之类,WebSocket有十分广泛的应用场景,不管是前端还是后端,都是时候来试试水了。说不定哪一天,就因为你会这个技术,走上人生巅峰,让别人高攀不起了呢!

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » html5事件属性(html5实验室)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论