WebSocket是什么?

本次教程讲述WebSocket介绍及方法~

前言

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议;它的目的是要在浏览器和服务器之间建立一个不受限的双向通信的通道,比如服务器可以在任意时刻发送消息给浏览器;

与HTTP协议的不同

HTTP协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起、服务端对请求作出应答处理-----即HTTP协议无法实现服务器主动向客户端发起消息;

这种单向请求的特点,注定了若服务器有连续的状态变化,客户端要获知就非常麻烦。大多数Web应用程序将通过频繁的异步Ajax请求实现长轮询,该种方法效率低,推送延迟,非常浪费资源(因为必须不停连接,或者HTTP连接始终打开);

WebSocket是什么?_第1张图片

HTTP轮询请求 

另外,HTTP长连接中,每次数据交换除了真正的数据部分外,服务器和客户端还要大量交换HTTP header,信息交换效率很低;而Websocket协议通过第一个握手request建立了TCP连接之后,之后交换的数据都不需要发送 HTTP header就能交换数据;

WebSocket

WebSocket并不是全新的协议,而是利用了HTTP协议来建立连接:

WebSocket是什么?_第2张图片

为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢:

实际上HTTP协议是建立在TCP协议之上的,TCP协议本身就实现了全双工通信,但是HTTP协议的请求-应答机制限制了全双工通信。WebSocket连接建立以后,其实只是简单规定了一下:接下来,咱们通信就不使用HTTP协议了,直接互相发数据吧。

WebSocket是什么?_第3张图片

 该协议有两部分:握手和数据传输:

①握手:握手阶段基于http协议,来自客户端的握手看起来像如下形式:

GET ws: //localhost/chat HTTP/1.1
Host: localhost
Upgrade: websocket // 协议升级为WebSocket协议
Connetion: Upgrade // 标识该HTTP请求是一个协议升级请求
Sec-WebSocekt-Key: dcglajglajlganglaego== // 客户端采用base64编码的24位随机字符序列,服务器接受客户端HTTP协议升级的证明,要求服务端响应一个对应加密的Sec-WebSocket-Accept头信息作为应答
Sec-WebSocket-Extension: permessage-deflate // 协议扩展类型
Sec-WebSocket-Version: 13 // 客户端支持Websocket的版本

握手请求成功后服务器发来的响应看起来像如下形式:

HTTP/1.1 101 Switching Protocols // 101表示本次连接的HTTP协议即将被更改
Upgrade: websocket // 更改后的协议就是websocket协议
Connetion: Upgrade
Sec-WebSocekt-Accept: ddlmslsejglajlganglaego==
Sec-WebSocket-Extension: permessage-deflate

②数据传输(客户端实现)

  • 新建一个WebSocket对象

实现WebSocket的Web浏览器将通过WebSocket对象公开所有必须的客户端功能(主要是指支持HTML5的浏览器);

var ws = new WebSocket(url) // 新建WebSocket对象
// url为websocket服务地址,格式为 ws://ip地址:端口号/资源名称
  • WebSocket对象相关事件
事件 事件处理程序 描述
open webSocket对象.onopen 连接建立时触发
message websocket对象.onmessage 客户端接收服务端数据时触发
error websocket对象.onerror 通信发生错误时触发
close websocket对象.onclose 连接关闭时触发
  • WebSocket对象的相关方法

send()表示使用连接发送数据;

close()表示关闭连接;

  • WebSocket实例状态

利用实例上的readyState 属性可以得到返回实例对象的当前状态,共有四种状态:

0 - 表示正在连接;

1 - 表示连接成功,可以进行通信

2 - 表示连接正在关闭

3 - 表示连接已经关闭,或者打开连接失败

一旦WebSocket连接建立后,后续数据都将以帧序列的形式传输。在客户端断开WebSocket连接或服务器端终端连接前,不需要客户端和服务端重新发起连接请求

安全的WebSocket连接机制和HTTPS类似。首先,浏览器用wss://xxx创建WebSocket连接时,会先通过HTTPS创建安全的连接,然后,该HTTPS连接升级为WebSocket连接,底层通信走的仍然是安全的SSL/TLS协议。

关于WebSocket协议的具体使用在下篇文章~敬请期待

你可能感兴趣的:(前端知识,websocket,网络,tcp/ip)