websocket是什么?
是HTML5新增的属性,一种单个TCP连接上进行全双工通讯的网络通讯协议;
websocket有什么用?
为什么有了http协议,还需要websocket?因为http协议是单向通信协议,只能由客户端发起请求,无法做到服务端主动向客户端推送消息
当服务器有持续的变化时,客户端想要获取只能通过轮询的方法,每隔一段时间就发起一次请求,最典型的场景就是聊天发消息。
传统的http协议不能做到websocket实现的功能,因为http协议是一个请求-响应协议,只能由浏览器发起请求,服务器才能响应这个请求把数据发送给浏览器,服务器不能主动发起请求。
ajax轮询:每隔一段时间发起一个http请求,询问服务器有没有新消息,没有的话就一直发
长轮询:采用阻塞的方式,浏览器发起请求后,如果服务器没有新消息,就先拖一段时间一直不返回,直到有消息才返回,返回完之后,浏览器再次建立连接
ajax轮询和长轮询需要服务器有非常快的处理速度和很高的并发。
websocket最大的特点就是服务器可以主动向客户端发送消息。
其他特点:
- 建立在tcp协议之上(tcp本身是双向通信,http协议对他做了限制,所以http协议只能是单向的)
- 与http协议有着良好的兼容性。默认端口也是80和443,而且握手阶段采用http协议
- 数据格式比较轻量,性能开销小
- 可以发送文本,也可以发送二进制文件
- 没有同源限制
- 协议标识符是ws(如果加密,就是wss)
使用websocket
//在线运行https://jsbin.com/nobemozido/edit?js,console
if(!WebSocket){
alert('您的浏览器不支持WebSocket')
}else{
var ws = new WebSocket("url");
ws.onopen = (evt) => {
console.log("connection open...");
ws.send("hello")
}
ws.onmessage = (evt) => {
console.log("received message:"+ evt.data);
ws.close()
}
ws.onclose = (evt) =>{
console.log("connection closed");
}
ws.onerror = (evt) =>{
console.log("connection error");
}
}
API
1.WebSocket构造函数
2.WebSocket.readyState
WebSocket实例对象的状态,一共有四种
- 0:connecting,正在连接
- 1:open,连接成功,可以通信了
- 2:closeing,正在关闭
- 3:closed,已经关闭,或者打开失败
3.WebSocket.onopen
用于指定连接成功之后的回调函数
如果想指定多个回调函数,可以使用addEventListener监听WebSocket实例
ws.addEventListener("open", (evt)=>{
ws.send("send message")
})
4.WebSocket.onclose
用于指定连接关闭后的回调函数
5.WebSocket.onmessage
用于接收到服务器数据后的回调函数
6.WebSocket.send
用于向服务器发送数据
ws.send("hello")
7.WebSocket.close
用于关闭连接
ws.close()
8.WebSocket.onerror
用于指定连接错误时的回调函数