一、socket.io是什么？

先夸一下socket.io吧，它相对于websocket来讲，封装了服务端和客户端，使用简单方便。可以选择在服务端或是客户端开发实时应用。会根据浏览器来自己决定是使用WebSocket、Ajax长轮询还是Iframe流等方式去选择最优方式，甚至支持IE5.5...这里是它的 官网 。

那么...websocket又是什么呢？

二、http与websocket

简而言之，http是单向传递的，只能由客户端向服务器请求并获得返回信息，不可以由服务器直接推送数据给客户端。而websocket可以做到。浏览器端和服务器端都不断开的话，websocket连接就不会断开。在很多实时更新数据的场景下十分有用，例如聊天室，游戏，，还有我手头上正在写的反馈仪器使用情况的需求（仪器一旦故障，立即反馈到站点管理页面）。

三、websocket

3.1  websock的基本使用

创建websocket实例

var ws = new WebSocket('ws://localhost:3000')

连接成功后的回调函数，send方法向服务器发送数据

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!"); //向服务器发送数据
};

从服务器收到信息的回调函数

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
};

关闭连接后的回调函数

ws.onclose = function(event) {
    var code = event.code;
    var reason = event.reason;
    var wasClean = event.wasClean;
};

出错回调函数

ws.onerror=function(){
    console.log('出错啦！')
}

3.2 常用属性

WebSocket.onclose

WebSocket.onerror

WebSocket.onmessage

WebSocket.onopen

WebSocket.url：websocket的绝对路径

WebSocket.readyState：当前连接的状态

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

 

WebSocket.bufferAmount：未发送至服务器的字节数

　　实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

WebSocket.binaryType：使用二进制的数据类型连接

　　服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型。

WebSocket.protocol：服务器选择的下属协议

WebSocket.extensions：服务器选择的扩展

3.3 方法

WebSocket.close()

WebSocket.send(data)

3.4 调试

控制台 -> Network -> filter图标 -> WS

websocket请求的特点: Connection: Upgrade  Upgrade: websocket

Headers：查看请求信息

Frames -> data：查看数据，绿色的是发送的数据, 白色的是收到的数据