前端开发WebSocket 基础内容

前端开发教程网
web前端开发 整套视频教程
前端开发视频教程百度云

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

1.WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。
var ws = new WebSocket(‘ws://localhost:8080’);

2.WebSocket 属性

Socket.readyState
只读属性 readyState 表示连接状态,可以是以下值:
0 – 表示连接尚未建立。
1 – 表示连接已建立,可以进行通信。
2 – 表示连接正在进行关闭。
3 – 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

switch (ws.readyState) {
    case 0:
        // do something
        break
    case 1:
        // do something
        break
    case 2:
        // do something
        break
    case 3:
        // do something
        break
    default:
        // this never happens
        break
}

3.WebSocket 事件

事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发
3.1 webSocket.onopen

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

ws.onopen = function() {
    ws.send(‘Hello!’)
}

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

ws.addEventListener(‘open’, function(event) {
    ws.send(‘Hello’)
})
3.2 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
})
3.3 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)
}
3.4 webSocket.onerror

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

socket.onerror = function(event) {
    // handle error event
}
socket.addEventListener(‘error’, function(event) {
    // handle error event
})

4.WebSocket 方法

|方法|描述|
|Socket.send()|使用连接发送数据|
|Socket.close()|关闭连接|

4.1 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)
4.2 webSocket.close()

关闭连接
websocket.close();

5.代码案例

//检查浏览器是否支持WebSocket
if (window.WebSocket) {
    console.log(‘This browser supports WebSocket’)
} else {
    console.log(‘This browser does not supports WebSocket’)
}
<!DOCTYPE html>
    <head lang=”en”>
        <meta charset=”UTF-8″ />
        <title>中国移动和粉俱乐部</title>
        <script language=”javascript” type=”text/javascript”>
            var wsUri = “ws://echo.websocket.org/”;
            var output; </p >
                 function init() {
             output = document.getElementById(“output”);
                    testWebSocket();
                    }
                 function testWebSocket() {
             websocket = new WebSocket(wsUri);
                    websocket.onopen = function(evt) {
             onOpen(evt)
                    };
                    websocket.onclose = function(evt) {
             onClose(evt)
                    };
                    websocket.onmessage = function(evt) {
             onMessage(evt)
                    };
                    websocket.onerror = function(evt) {
             onError(evt)
                    };
                    }
                 function onOpen(evt) {
             writeToScreen(“CONNECTED”);
                    doSend(“WebSocket rocks”);
                    }
                 function onClose(evt) {
             writeToScreen(“DISCONNECTED”);
                    }
                 function onMessage(evt) {
             writeToScreen(‘<span style=”color: blue;”>RESPONSE: ‘+ evt.data+'</span>’);
                    websocket.close();
                    }
                 function onError(evt) {
             writeToScreen(‘<span style=”color: red;”>ERROR:</span> ‘+ evt.data);
                    }
                 function doSend(message) {
             writeToScreen(“SENT: ” + message);
                    websocket.send(message);
                    }
                 function writeToScreen(message) {
             var pre = document.createElement(“p”);
                    pre.style.wordWrap = “break-word”;
                    pre.innerHTML = message;
                    output.appendChild(pre);
                    }
                 window.addEventListener(“load”, init, false);
        </script>
    </head>
    <body>
        <h2>WebSocket Test</h2>
        <div id=”output”></div>
    </body>
</html>

1、申请一个WebSocket对象

参数是需要连接的服务器端的地址,同http协议使用http://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。

var wsUri = ‘ws://echo.websocket.org/’
websocket = new WebSocket(wsUri)
2、WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror

我们可以看出所有的操作都是采用消息的方式触发的,这样就不会阻塞UI,使得UI有更快的响应时间,得到更好的用户体验。

(1)当Browser和WebSocketServer连接成功后,会触发onopen消息;

websocket.onopen = function(evt) {};

(2)如果连接失败,发送、接收数据失败或者处理数据出现错误,browser会触发onerror消息;

websocket.onerror = function(evt) { };

(3)当Browser接收到WebSocketServer发送过来的数据时,就会触发onmessage消息,参数evt中包含server传输过来的数据;

websocket.onmessage = function(evt) { };

(4)当Browser接收到WebSocketServer端发送的关闭连接请求时,就会触发onclose消息。

websocket.onclose = function(evt) { };

前端公众号开发视频教程
前端开发入门基础教程
web前端开发教程百度云
» 本文来自:前端开发者 » 《前端开发WebSocket 基础内容》
» 本文链接地址:https://www.rokub.com/7758.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!