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

 

六、优秀的参考资料

阮一峰老师《WebSocket 教程》

《socket.io让每个人都可以开发属于自己的即时通讯》

posted @ 2022-05-27 14:28  PeriHe  阅读(240)  评论(0编辑  收藏  举报