webcoket浏览器兼容测试

[lcl-101]

1. url http://192.168.100.144:8088/v1/getUuid?callBack=abcdef

2. ws = new WebSocket('ws://192.168.100.144:8088/ws?uuid={uuid}');

3. 你发 i , 我会返回 o ，间隔 5s 在此发送

   HTTP协议是一种无状态、无连接、单向的应用层协议，只能由客户端发起请求，服务端响应请求。

   WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
   在了解webScoket之前，我们先了解一下http协议的工作方式，因为webScoket和http一样都是一种协议但不同的是，http属于”请求-响应”模型，只有客户端发起请求消息，服务器才会返回响应消息，没有请求就没有响应，一个请求，只能得一个响应，在一些场景，此模型就力不从心，而webScoket协议则属于”广播-收听”，客户端连接服务器就不再断开，永久连接，双方可以随时向对方发送消息。

   与传统 HTTP 报文不同的地方：

   Upgrade: websocket
   Connection: Upgrade

4. 客户端请求报文：
   GET / HTTP/1.1
   Upgrade: websocket
   Connection: Upgrade
   Host: example.com
   Origin: http://example.com
   Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
   Sec-WebSocket-Version: 13

webScoket使用：

1. 连接ws服务器
   var socket = new WebSocket(“ws://127.0.0.1:9001”);
2. 向服务器发消息
   socket.send(stringMsg)
3. 接收服务器消息
   socket.onmessage = function(e){e.data}
4. 断开连接
   socket.close();

对象的属性

1. Socket.readyState
   0 - 表示连接尚未建立。
   1 - 表示连接已建立，可以进行通信。
   2 - 表示连接正在进行关闭。
   3 - 表示连接已经关闭或者连接不能打开。
2. Socket.bufferedAmount
   只读属性bufferedAmount已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

兼容性

Can I use… Support tables for HTML5, CSS3, etc

ReconnectingWebSocket

reconnecting websocket是一个javascript封闭的websocket库，非常小，压缩后仅有3KB。它的功能是当websocket断线后自动帮你重连。
地址 reconnecting-websocket - npm

1. 使用
   var ws =new WebSocket(‘ws://….’);
2. 替换
   var ws =newReconnectingWebSocket(‘ws://….’);
   当websocket断开着它会帮你自动重连，socket永不断线！
3. 支持事件
   onopen
   onmessage
   onmessage
   onmessage
   onclose// At this point the WebSocket instance is dead.

断线重链接

1. 断线的可能原因1：websocket超时没有消息自动断开连接，应对措施：
   心跳检测
2. 断线的可能原因2: websocket异常包括服务端出现中断
   引入reconnecting-websocket.min.js
   GitHub - pladaria/reconnecting-websocket: Reconnecting WebSocket. For Web, React Native, cli (Node.js)

断网监测支持使用js库：offline.min.js
websocket断线重连实践解决方案_电脑小技巧_上网技巧_QQ地带