为什么使用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没有接受数据