socket.io了解一下
一、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:查看数据,绿色的是发送的数据, 白色的是收到的数据
3.5 插播 =>用nodejs搭建一个服务器
需要用到一个模块——Nodejs Websocket:(https://github.com/sitegui/nodejs-websocket)
在控制台【node 文件名】来开启服务
收发消息需要JSON转换,冗余 -> 交由socket.io处理: (https://socket.io/docs/)
四、socket.io
五、demo