html5_websocket通信协议

为什么需要webSocket协议

http协议是最常用的网络协议，既然有了http协议为什么还需要websocket协议呢？
—原因是因为 http协议是一个 半双工协议。

• http协议只能由客户端发起请求，服务端做出应答；这种单向请求的特点，注定了如果服务端有连续的状态变化，客户端要获取就只能采取轮询的方法–>每隔一段时间就发起一个轮询请求，了解服务器有没有更新信息。

—WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术

• websocket协议是一种双向的、保持长久的协议；通信请求方可以是客户端也可以是服务端，只需要建立一次连接，就可以一直保持连接状态。
• 像聊天室、消息中心这种服务端经常需要主动发送协议的就可以使用websocket协议。

websocket协议的特点

websocket协议最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种.

• 建立在 TCP 协议之上应用层协议
• 与 HTTP 协议有着良好的兼容性，默认端口也是80和443,与http相似，协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
• 通过一次握手建立服务端与客户端的关系–>握手阶段采用 HTTP 协议,因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器;
• 没有同源限制，客户端可以与任意服务器通信
• 数据格式比较轻量，性能开销小，通信高效，可以发送文本，也可以发送二进制数据

与http协议的相同点

1.都是基于Tcp协议的协议，安全性比较高。
2.都是处于应用层的协议

与http协议的区别

1.WebSocket是双向通信协议，双方均可发送与接收协议；http协议是半双工通信协议，仅能客户端主动发起请求，服务端应答，服务端不能主动发送消息。
2.WebSocket是需要浏览器和服务器握手进行建立连接的，而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接

与http协议的联系

WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的(WebSocket通过http协议建立服务器与客户端的关系)

03-websocket方法

连接websocket

websocket是通过http协议进行网络连接的
[1]客户端发送一个get请求，请求头的connection字段设置为Upgrade表示该请求用于websocket建立连接；
[2]服务端收到请求之后回复状态为Switching Protocol这样连接就成功了；

[1]创建实例

      const ws = new WebSocket(url,[options])

[2]连接成功建立的回调方法

ws.onopen=event=>{
  // 操作
}

[3]接收到消息的回调

ws.onmessage=event=>{
  // 操作 event为服务端发送的数据
}

[4]连接发生错误的回调

ws.onerror=event=>{
 // 操作
}

[5]连接关闭的回调

ws.onclose=event=>{
 // 操作
}

[6]主动关闭连接

ws.close();

[7]主动发送消息

ws.send(参数)

[8]连接状态

实例化对象的readyState属性表示websocket的连接状态

• 0 连接尚未建立
• 1 WebSocket的链接已经建立
• 2 连接正在关闭
• 3 连接已经关闭或不可用

[9]心跳检测

• 心跳检测的必要性
  • websocket是前后端交互的长连接，前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性，需要使用心跳检测；
  • 在使用webSocket的过程中，如果遇到网络断开，服务端并没有触发onclose事件，就会出现此状况：服务端会继续向客户端发送多余的连接，并且这些数据会丢失。
• 定义：
  • 以前端作为主动方，定时发送ping消息，用于检测网络和前后端连接问题。一旦发现异常，前端持续执行重连逻辑，直到重连成功；

[10]举例说明

示例