WebSockets - 发送 & 接收消息

消息事件通常在服务器发送一些数据时发生.服务器发送到客户端的消息可以包括纯文本消息，二进制数据或图像.每当发送数据时，都会触发 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(JavaScript对象表示法)

这是一种轻量级格式用于在计算机之间传输人类可读的数据. 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 而不是等于运算符.

以下代码显示如何处理和接收ArrayBuffer对象 :

socket.onmessage = function(event) {   if(event.data instanceof ArrayBuffer ){      var buffer = event.data;      console.log("Received arraybuffer");   }}

演示应用程序

以下程序代码显示如何发送和使用Web套接字接收消息.

               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('RESPONSE: ' +            evt.data+''); websocket.close();      }      function onError(evt) {         writeToScreen('ERROR: ' + 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);      
WebSocket Test