WebSocket 发送和接收消息,通常在服务器发送一些数据时发生Message事件。服务器发送到客户端的消息可以包括纯文本消息,二进制数据或图像。无论何时发送数据,都会触发onmessage
函数。
此事件充当客户端对服务器的耳朵。每当服务器发送数据时,都会触发onmessage
事件。
以下代码段描述了接收服务器端发送过来的message消息。
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}
还需要考虑使用WebSocket可以传输哪些类型的数据。WebSocket协议支持文本和二进制数据。就Javascript而言,文本指的是字符串,而二进制数据则表示为ArrayBuffer
。
WebSocket一次只支持一种二进制格式。二进制数据的声明明确地完成如下 –
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;
接收字符串消息
字符串是一种人类可读的格式,如XML和JSON。每当引发onmessage
事件时,客户端都需要检查数据类型并采取相应措施。
用于确定数据类型为字符串(String)的代码片段如下所述 –
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}
接收JSON消息
它是一种轻量级格式,用于在计算机之间传输人类可读的数据。JSON的结构由键值对组成。
{
name: “James Devilson”,
message: “Hello World!”
}
以下代码显示如何处理JSON对象并提取其属性 –
socket.onmessage = function(event) {
if(typeOf event.data === String ){
//create a JSON object
var jsonObject = JSON.parse(event.data);
var username = jsonObject.name;
var message = jsonObject.message;
console.log(“Received data string”);
}
}
接收XML消息
尽管从浏览器到浏览器的技术各不相同,但解析XML并不困难。最好的方法是使用jQuery等第三方库进行解析。
在XML和JSON中,服务器以字符串形式响应,该字符串在客户端进行解析。
接收ArrayBuffer消息
它由结构化二进制数据组成。封闭的位按顺序给出,以便可以容易地跟踪位置。ArrayBuffers
可以方便地存储图像文件。
使用ArrayBuffers
接收数据非常简单。使用运算符instanceOf
(不是equal
)运算符。以下代码显示了如何处理和接收ArrayBuffer
对象 –
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}
完整示例代码
以下程序代码显示如何使用Web套接字发送和接收消息。
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
var wsUri = "wss://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教程(Power by geek-docs.com)");
}
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>
<h2>WebSocket Test</h2>
<div id="output"></div>
使用浏览器打开上面文件:websocket.html ,得到以下结果 –