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 文本字节数
3.WebSocket 事件
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 连接建立时触发 |
message | Socket.onmessage | 客户端接收服务端数据时触发 |
error | Socket.onerror | 通信发生错误时触发 |
close | Socket.onclose | 连接关闭时触发 |
3.1 webSocket.onopen
实例对象的 onopen 属性, 用于指定连接成功后的回调函数
如果要指定多个回调函数, 可以使用 addEventListener 方法
3.2 webSocket.onclose
实例对象的 onclose 属性, 用于指定连接关闭后的回调函数
3.3 webSocket.onmessage
实例对象的 onmessage 属性, 用于指定收到服务器数据后的回调函数
注意, 服务器数据可能是文本, 也可能是二进制数据 (blob 对象或 Arraybuffer 对象)
除了动态判断收到的数据类型, 也可以使用 binaryType 属性, 显式指定收到的二进制数据类型
3.4 webSocket.onerror
实例对象的 onerror 属性, 用于指定报错时的回调函数
4.WebSocket 方法
| 方法 | 描述 |
|Socket.send()| 使用连接发送数据 |
|Socket.close()| 关闭连接 |
4.1 webSocket.send()
实例对象的 send() 方法用于向服务器发送数据
发送文本的例子
发送 Blob 对象的例子
发送 ArrayBuffer 对象的例子
4.2 webSocket.close()
关闭连接
websocket.close();
5. 代码案例
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title > 中国移动和粉俱乐部 </title>
- <script language="javascript" type="text/javascript">
- var wsUri ="ws://echo.websocket.org/";
- var output;
- 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:// 开头
2WebSocket 对象一共支持四个消息 onopen, onmessage, onclose 和 onerror
我们可以看出所有的操作都是采用消息的方式触发的, 这样就不会阻塞 UI, 使得 UI 有更快的响应时间, 得到更好的用户体验
(1) 当 Browser 和 WebSocketServer 连接成功后, 会触发 onopen 消息;
(2) 如果连接失败, 发送接收数据失败或者处理数据出现错误, browser 会触发 onerror 消息;
(3) 当 Browser 接收到 WebSocketServer 发送过来的数据时, 就会触发 onmessage 消息, 参数 evt 中包含 server 传输过来的数据;
(4) 当 Browser 接收到 WebSocketServer 端发送的关闭连接请求时, 就会触发 onclose 消息
来源: http://www.qdfuns.com/article/18271/1773f670ae3f0a51d7e08f1d057618dc.html