websocket-示例-白红宇

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。

WebSocket 协议本质上是一个基于 TCP 的协议。同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

首先申请一个 websocket的构造方法构建一个websocket对象，参数是需要连接的服务器端的地址。 var Socket = new WebSocket(url, [protocol] ); 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

特点:

事件驱动

异步

使用ws或者wss协议的客户端socket

能够实现真正意义上的推送功能

缺点：

少部分浏览器不支持，浏览器支持的程度与方式有区别。

websocket 两大好处：

Header 互相沟通的Header是很小的-大概只有 2 Bytes

Server Push 服务器可以主动传送数据给客户端

WebSocket的工作流程：

浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过

TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小了很多。

socket 是双向通讯，数据只要渲染到页面上，后台有改动的话，页面会实时更新。

构建websocket对象：

首先申请一个 websocket的构造方法构建一个websocket对象，参数是需要连接的服务器端的地址。 var Socket = new WebSocket(url, [protocol] ); 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

在支持WebSocket的浏览器中，在创建socket之后。可以通过onopen，onmessage，onclose即onerror四个事件实现对socket进行响应。

WebSocket 事件（监听函数）：

open Socket.onopen 连接建立时触发

message Socket.onmessage 客户端接收服务端数据时触发

error Socket.onerror 通信发生错误时触发

close Socket.onclose 连接关闭时触发

WebSocket 方法：

Socket.send() 使用连接向远程服务器发送数据

Socket.close() 关闭该websocket链接

webSocket.readyState（webSocket的属性）

readyState属性返回实例对象的当前状态，共有四种：

CONNECTING：值为0，表示正在连接。

OPEN：值为1，表示连接成功，可以通信了。

CLOSING：值为2，表示连接正在关闭。

CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

jquery项目 demo：

参考示例： client 先发起握手请求服务器端响应交互数据

复制代码

Vue项目 demo：


    复制代码

复制代码