websockect入门(一)
可能很多人会问明明有http协议为什么还需要websockect呢?那是因为http协议也是有缺陷啊:http只能单向的通信,即http的通信只能是客户端发起。当然如果要实现双向的通讯,也是可以的,那么 只能通过轮询来实现。
那么何为轮询呢?每隔一段时间,就发出一个询问,询问服务器有没有新的消息。大概就是这种吧:
场景1:
客户端:啦啦啦,有没有新信息(Request)
服务端:没有(Response)
客户端:啦啦啦,有没有新信息(Request)
服务端:没有。。(Response)
客户端:啦啦啦,有没有新信息(Request)
服务端:你好烦啊,没有啊。。(Response)
客户端:啦啦啦,有没有新消息(Request)
服务端:好啦好啦,有啦给你。(Response)
客户端:啦啦啦,有没有新消息(Request)
服务端:。。。。。没。。。。没。。。没有(Response)
这种轮询就要求http始终是打开的,并且轮询的效率非常的低。
接下来继续介绍websockect吧。
websockect最大的特点是:服务器可以主动的向客户端推送消息,客户端也可以向服务器发送消息,是真正的双向对话,属于服务器推送技术的一种。
场景2:
客户端:啦啦啦,我需要建立websockect协议。
服务端:嗯嗯,已经帮你建立起来了。
客户端:麻烦有新的消息要推送给我哦!
服务端:好的,一定会的。
当然websockect其他的特点:
(1)建立在http协议上,实现服务器端相对容易一些。
(2)与http协议有很好的兼容性,并且握手阶段采用的是http协议,这样握手时不容易被屏蔽啊,能通过各种的http代理服务器。
(3)数据格式比较轻量,性能消耗小,通讯高效
(4)可以发送文字,也可以发送二进制数据(blob和arraybuffer)
(5)没有同源限制,可以与任何的服务器进行通讯。
(6)协议的标识符ws(加密的wws),服务器的网址就是url;
下面来一个简单的客户端的实例吧
var ws= new WebSocket(“wss://echo.websocket.org”);
ws.onopen =function(event){
console.log("connection open....");
ws.send("皮皮猫是只喜欢撒娇的大笨猫对不对?")
}
ws.onsend=function(event){
console.log(event.data);
ws.close();
}
ws.onclose=function(event){
console.log("connection close....")
}
以下是客户端的api
websocket构造函数
websocket对象作为一个构造函数,用于创建websocket实例
var ws= new WebSocket(“wss://echo.websocket.org”)
执行这句话服务器端将于客户端建立起连接
WebSocket.readyState(只读)
readyState属性返回当前的连接状态,一共有四种:
(1)CONNECTING 值为0,表示的是正在建立连接
(2)OPEN 值为1,表示连接已经建立起来了,可以进行通信
(3)CLOSING 值为2,表示连接正在关闭
(4)CLOSED值为3,表示连接已经关闭或者连接无法建立。
WebSocket.onopen
实例化对象的open属性,用与指定连接成功后的的回调函数;
ws.onopen=function(ev){
ws.send("皮皮是只喜欢卖萌的猫!")
}
当然如果要指定多个回调函数,可以使用addEventLister()方法。
wx.addEventLister(‘open’,function(ev){
ws.send("皮皮是只喜欢卖萌的猫!")
})
WebSocket.onclose
实例化对象的close属性,用于指定连接关闭后的回调函数;
ws.onclose=function(event){
}
WebSocket.onmessage
实例化对象的message属性,用与指定收到服务器数据后的回调函数;
ws.onmessage=function(ev){
var data=ev.data;
//数据处理
}
这里需要注意的是:服务器数据可能是文本,也有可能是二进制数据(blob对象或者Arraybuffer对象)
WebSocket.onsend()
实例对象的send()方法,用与向服务器发送数据
WebSocket.bufferAmount
实例对象的bufferAmount属性,表示还有多少二进制的字节数据还没有发送出去,用与判断是否发送结束。
var data=new ArrayBuffer(100000);
socket.send(data);
If(socket.bufferAmount === 0 ){
console.log(“发送完毕”)
}
else{
console.log(“发送未结束哦!”)
}
WebSocket.onerror
实例化对象的onerrror属性,用于指定报错是的回调函数
Socket.onerror=functionevent(){
}
主要是看的阮一峰老师的博客。
看到了一篇讲websockect 原理的感觉讲的很不错耶!
下面附上链接:https://blog.csdn.net/frank_good/article/details/50856585