webSoket的用法

说起websoket，我们先来了解一下：

（一）为什么会有webSoket？

HTTP协议：通信只能从客户端发起，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。【即：HTTP协议为单向请求】。

这注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"的方式获取服务器的数据变化：也就是需要每隔一段时候，就发出一个询问（请求），了解服务器有没有新的信息。轮询效率低，且非常浪费资源 【因为必须不停连接，或者 HTTP 连接始终打开）】

websoket协议：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

 HTTP协议和webSoket协议通信过程示意图

webSoket其他特点如下：

（1）建立在TCP协议之上，服务器端的实现比较容易。

（2）与HTTP协议有这良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因

        此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

(二)、如何使用webSoket?

(1)首先需要判断浏览器是否支持webSoket

（2）在组件加载的时候连接websoket，在组件销毁的时候断开websoket

（三）、用法示例

//WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例
var ws = new WebSocket("wss://echo.websocket.org");  //此时已建立webSoket连接

//实例对象的onopen属性，用于指定连接成功后的回调函数。
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};
//如果要指定多个回调函数，可以使用addEventListener方法。
// ws.addEventListener('open', function (event) {
//  ws.send('Hello Server!');
// })

//实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

//实例对象的onclose属性，用于指定连接关闭后的回调函数。
ws.onclose = function(evt) {
  console.log("Connection closed.");
};      

webSocket.readyState

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

• CONNECTING：值为0，表示正在连接。
• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败

webSocket.send()：实例对象的send()方法用于向服务器发送数据。