Websocket

webSocket

特点

服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送的技术的一种。

  1. 建立在TCP协议之上,服务器端的实现比较容易
  2. 与HTTP协议有着良好的兼容性,默认端口也是80和443,并且握手阶段采用HTTP协议,因此握手时不容易屏蔽,能通过各种HTTP代理服务器。
  3. 数据格式比较轻量,性能开销小,通信高效。
  4. 可以发送文本,也可以发送二进制数据。
  5. 没有同源限制,客户端可以与任意服务器通信。
  6. 协议标识符是ws,(如果加密,则为wws),服务器地址就是URL

简单示例

var ws = new WebSocket(‘wss://echo,websocket.org’);
ws.onopen = function(evt){
console.log(‘connection open…’);
ws.send(‘Hello websocket’);
}
ws.onmessage = function(evt){
console.log(‘received message’ + evt.data);
ws.close(

API

  1. websocket.readyState:
    (1) connecting:值为0,表示正在连接
    (2) open:值为1,表示连接成功,可以通信了
    (3) closing:值为2,表示连接正在关闭
    (4) closed:值为3,表示连接已经关闭,或者打开连接失败
    switch(ws.readyState){
    case websocket.connecting;
    //
    break;
    case websocket.open;
    //
    break;
    case websocket.closing;
    //
    break;
    case websocket.closed;
    //
    break;
    default;
  2. websocket.onopen
    实例对象的onopen属性,用于指定连接成功后的回调函数
    ws.onopen = function(evt){
    console.log(‘connection open…’);
    ws.send(‘Hello websocket’);
    }
    如果要指定多个回调函数,可以使用addEventLisnter方法
    ws.addEventListener(‘open’,function(event){
    ws.send(‘hello server’)
    })
  3. websocket.onclose
    实例对象的onclose属性,用于指定连接关闭后的回调函数
    ws.onclose = function(event) {
    var code = event.code;
    var reason = event.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. 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. websocket.send()
实例对象的send()方法用于向服务器发送数据
发送文本的例子
ws.send(‘your message’);

发送Blob对象例子
var file = document
.querySelector(‘input[type=“file”]’)
.files[0];
ws.send(file);
发送ArrayBuffer对象的例子
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
ws.send(binary.buffer);
5. websocket.onerror
实例对象的onerror属性,用于指定报错时的回调函数
socket.onerror = function(event) {
// handle error event
};

socket.addEventListener(“error”, function(event) {
// handle error event
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值