初学websocket

转载于 阮一峰教程,只是做个记录,自个看看。

  初次接触websocket的人,都会问同样的问题,我们已经有了http协议,为什么还需要另一个协议,它能带来什么好处?

  答案很简单,因为http协议有一个缺陷:通信只能由客户端发起。

  举例来说,我们想了解今天的天,只能是客户端向服务器发出请求,服务器返回查询结果,http协议做不到服务器主动向客户端推送信息。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用“轮询”:每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低,非常浪费资源(因为必须不停链接,或者http链接始终打开)。因此,工程一直在思考,有没有更好的办法,WebSocket就是这样发明的。

二 简介

------------------------------------------------------------------------------

  WebSocket协议在2008年诞生,2011年成为国际标准,所有浏览器都已经支持了。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

其他特点包括:

  1. 建立在TCP协议之上,服务器端的实现比较容易。

  2. 与HTTP协议有良好的兼容性,默认端口也是80和443,并且握手阶段采用HTTP协议,因此握手时,不容易屏蔽,能通过各种HTTP代理服务器。

  3. 数据可视比较轻量,性能开销小,通信高效。

  4. 可以发送文本,也可以发送二进制数据

  5. 没有同源限制,客户端可以与任意服务器通信

  6. 协议标识是ws,(如果加密,则为wss),服务器网址就是url。

    ws://example.com:80/some/path
    

三 客户端的简单示例

----------------------------------------------------------------------------------

WebSocket的用法相当简单

下面是一个网页脚本的例子,基本上一眼就能看明白

var ws = new WebSocket("wss://echo.websocket.rog");

ws.onopen= function(evt) {
    console.log('Connection open ...");
    ws.send('hello websocket!');
};

ws.onmessage = function (evt) {
    console.log("Received Message :" + evt.data);
    ws.close()
};

ws.onclose = function () {
    console.log("connection closed.");
};

四 客户端的API

4.1 WebSocket 构造函数

WebSocket对象作为一个构造函数,用于新建WebSocket实例

var ws = new WebSocket('ws://localhost:8080');

执行上面语句之后,客户端就会与服务器进行连接。

实例对象的所有属性和方法清单,参见这里

4.2 websocket.readyState

readyState 属性返回实例对象的当前状态,共有四种。

CONNECTING:值为0,表示正在连接
OPEN:值为1,表示连接成功,可以通信了
CLOSING:值为2,表示连接正在关闭
CLOSED:值为3,表示连接已经关闭,或者打开连接失败

下面是一个示例。

switch (ws.readyState) {
    case WebSocket.CONNECTING:
    //do someting
    break;
    case WebSocket.OPEN:
    // do something
    break;
    case WebSocket.CLOSING:
    //do something 
    break;
    case WebSocket.CLOSED:
    // do something
    break;
    default:
    // this never happens
    break;
}

4.3 WebSocket.onopen

  实例对象的onopen属性,用于指定连接成功后的回调函数。

ws.onopen = function (){
    ws.send('hello server!');
}

如果要指定多个回调函数,可以使用addEventListener 方法

ws.addEventListener('open',function(event){
    ws.send('Hello Server!);
})

4.4 WebSocket.onclose

实例对象的onclose属性,用于指定连接关闭后的回调函数。

ws.onclose = function (event){
    var code = event.code;
    var reason = enevt.reason;
    var wasClean = event.wasClean;
    // handle close event 
}

ws.addEventListener('close',function (event) {
    var code = event.code;
    var reason = event.reason;
    var wasClean = event.wasClean;
    // handle close event
})

4.5 webSocket.onmessage

实例对象的onmessage属性,用于指定收到服务器数据后的回调函数

ws.onmessage = function (event){
    var data = event.data;
//处理数据
}

 ws.addEventListener('message',function(event){
    var data= event.data
    // 处理数据
});

注意,服务器数据可能是文本,也可能是二进制数据(blob对象或Arraybuffer对象)

ws.onmessage = function (event){
    if(typeof event.data === String){
        console.log('Received data string!')
    }
    if (event.data instanceof ArrayBuffer){
        var buffer  = event.data
        console.log('Received arraybuffer');
    }
}

除了动态判断收到的数据类型,也可以使用binaryType属性,显示指定收到的二进制数据类型

// 收到的blob数据
ws.binaryType = 'blob';
ws.onmessage = function (e){
    console.log(e.data.size)
}

//收到的是ArrayBuffer 数据
ws.binaryType = 'arraybuffer';
ws.onmessage = function(e){
    console.log(e.data.byteLength);
}

4.6 WebSocket.send()

实例对象的send()方法用于向服务器发送数据

发送文本的列子

ws.send('your message');

发送blob对象的列子

var file = document.querySelector('input[type = "file"]').file[0]
ws.send(file)

4.7 webSocket.bufferedAmount

实例对象的bufferedAmount 属性,表示还有多少字节的二进制数据没有发送出去,它可以用来判断发送是否结束。

var data = new ArrayBuffer(1000000);
socket.send(data)
if(socket.bufferedAmount === 0) {
    // 发送完毕
}else {
    // 发送还没结束
}

4.8 webSocket.onerror 

实例对象的onerror属性,用于指定报错时的回调函数

socket.onerror = function (event) {
    // handle error event
}

socket.addEventListener('error',function (event) {
    // handle error event
})