找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发WebSocket 基础内容

2019-01-16 分类：教程 阅读(817) 评论(0)
前端开发教程网
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前端开发教程百度云
赞(0)
前端开发者 » 前端开发WebSocket 基础内容
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论