消息事件通常在服务器发送一些数据时发生.服务器发送到客户端的消息可以包括纯文本消息,二进制数据或图像.每当发送数据时,都会触发 onmessage 函数.
此事件充当客户端对服务器的耳朵.每当服务器发送数据时,都会触发 onmessage 事件.
以下代码片段描述了打开Web Socket协议的连接.
connection.onmessage = function(e){ var server_message = e.data; console.log(server_message); }
还需要考虑在Web套接字的帮助下可以传输哪些类型的数据. Web套接字协议支持文本和二进制数据.就Javascript而言, text 表示为字符串,而二进制数据表示为 ArrayBuffer .
Web套接字仅支持一个一次二进制格式.二进制数据的声明明确地完成如下 :
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的结构由键值对组成.
{ 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解析并不困难从浏览器到浏览器不同.最好的方法是使用jQuery等第三方库进行解析.
在XML和JSON中,服务器都以字符串形式响应,并在客户端进行解析.
它由结构化二进制数据组成.封闭的位按顺序给出,以便可以容易地跟踪位置. ArrayBuffers可以方便地存储图像文件.
使用ArrayBuffers接收数据非常简单.使用运算符 instanceOf 而不是等于运算符.
以下代码显示如何处理和接收ArrayBuffer对象 :
socket.onmessage = function(event) { if(event.data instanceof ArrayBuffer ){ var buffer = event.data; console.log("Received arraybuffer"); } }
以下程序代码显示如何发送和使用Web套接字接收消息.
<!DOCTYPE html> <html> <meta charset = "utf-8" /> <title>WebSocket Test</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.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; } function onOpen(evt) { writeToScreen("CONNECTED"); doSend("WebSocket rocks"); } 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> </html>
输出如下所示.