HTML5 - Websocket

 

关键词：

• HTML5
• 网络通信协议
• 并肩HTTP
• 基于TCP
• 客户端与服务器 全双工通信
• 双向数据传输
• 实现长连接、持久性连接
• HTTP是非持久性

 

总结：

Websocket是一种在单个TCP链接上进行全双工通信的协议，他可以容许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只须要完成一次握手，二者之间就直接能够建立持久性的链接，并进行双向数据传输。

（在 WebSocket API 中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。）

 

做用：

实现推送技术

 

优势：

节省服务器资源和带宽，而且可以更实时地进行通信

 

 

应用：聊天室

传统HTTP协议要实现聊天室功能须要用到AJAX轮询

Websockets协议实现聊天室功能很简单。

AJAX轮询原理：

轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，而后由服务器返回最新的数据给客户端的浏览器。返回以后，连接断开。下次通信须要从新发送ajax请求了。

这种传统的模式带来很明显的缺点。

AJAX轮询缺点：即浏览器须要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费不少的带宽等资源。

 

ajax轮询与Websockets长链接 

两者原理图对比：

 

websockets创建一次连接，长久通信；

ajax轮询须要每秒发送一次请求。每请求一次都要三次握手。请求完毕就会断开连接，每断开一次都要四次挥手；啊哈哈哈。

 

性能来讲，Websocket更优。

 

 

Websocket API 使用方法：

1、建立

 

2、事件

 

open：当客户端和Websocket服务端链接成功的时候就会触发

事件须要用addEventListener绑定：好比open事件注册示例

websocket.addEventListener('open',function(e){

  console.log(e,websocket.readyState);

});

 

客户端接受到服务器返回的数据时，会触发message事件，因此咱们监听这个事件并注册回调函数就行：

1 websocket.addEventListener('message',function(event){
2 
3   console.log(event);
4 
5   console.log(event.data);// event里的data属性，就是服务器返回的数据
6 
7 });

  

close就是链接断开的时候出发的事件，同上绑定方法。

 

 

三、属性

 

 

4、方法

 

send()：客户端主动向服务端发送消息

send使用演示 - 好比在连接成功后，发送一端文案过去：

websocket.addEventListener('open',function(e){

  console.log(e,websocket.readyState);

  websocket.send('发送一个方法')

});

 

 

五、其余api讲解能够看MDN

 

 

 

控制台查看websocket请求发送的状况：

绿色表示发送，红色表示接受的。

ps：图中之因此长这样（指请求和响应的文案都同样），是由于咱们借用官网的echo这个服务器，是咱们给他发送啥，他就原封不动给咱们返回啥。