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

 

posted @ 2018-06-20 15:36  zy1314  阅读(2823)  评论(0编辑  收藏  举报