webScoket之使用学习

418 阅读2分钟

为什么使用webscoket

1、WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

2、WebSocket允许服务端主动向客户端推送数据。在WebSocketAPI中,浏览器和服务器只需要完成一次握手, 浏览器和服务器之间就形成了一条快速通道,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

常见的API

1、创建通道

var ws = new WebSocket("ws://url");

发送请求创建通道。协议转化是http转换为ws。这个通道是唯一的,创建开始就存在

2、状态

ws.readyState(只读)

0 - 表示连接尚未建立。
1 - 表示连接已建立,可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

3、WebSocket.onopen: readyState === 1

当WebSocket的连接状态readyState 变为“OPEN”时调用;这意味着当前连接已经准备好发送和接受数据。

ws.onopen((event)=>{
        console.log(event); //事件触发
        //连接准备好之后才能send
        ws.send('data');//发送需要发送的数据。
    })

4、WebSocket.onclose:关闭连接。

和onopen差不多。

5、WebSocket.onmessage: 从服务端接收到数据之后触发。

ws.onmessage((MessageEvent)=>{
    console.log(MessageEvent); //data、origin
    //MessageEvent.data取到数据之后的操作
})

6、WebSocket.onerror:连接失败触发

比如通道被关闭。服务端end连接。之前项目之中有一个问题是:在服务端当WebSocket线程正在sleep时,客户端给服务端send了一条消息,造成当WebSocket线程关闭;这个问题服务端为解决,所以前端在onerror时,又重建通道。

ws.close((code,reason)=>{ //参数可选
    ws = new WebSocket("ws://url");
});

7、WebSocket.send 发送数据。

类型:USVString、ArrayBuffer、Blob、ArrayBufferView

8、WebSocket.binaryType 返回websocket连接所传输二进制数据的类型

关于WebSocket和Socket

Socket 其实并不是一个协议,是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口。可以存在两台服务器之间的数据通信。而WebSocket 则是一个典型的应用层协议。

Socket 是传输控制层协议,WebSocket 是应用层协议。

相对于原生ajax请求的异同点

1、创建--相同

var xhr = new XMLHttpRequest();

2、状态---小异

xhr.readyState{
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   4: 请求已完成,且响应已就绪
}

3、状态改变之后触发方式----不同

ajax: readyState改变之后触发onreadystatechange 进行回调;response参数取值处。

WebSocket.onopen\onclose表示:通道建立完成\通道关闭

4、send ---相似

都可以发送数据 ajax:get请求不同,send();

5、onmessage巨大差异

ajax没有接受数据