javascript基础学习系列三百七十四：发送和接收数据

打开 Web Socket 之后，可以通过连接发送和接收数据。要向服务器发送数据，使用 send()方法并 传入一个字符串、ArrayBuffer 或 Blob，如下所示:

let socket = new WebSocket("ws://www.example.com/server.php");
    let stringData = "Hello world!";
    let arrayBufferData = Uint8Array.from(['f', 'o', 'o']);
    let blobData = new Blob(['f', 'o', 'o']);
    socket.send(stringData);
    socket.send(arrayBufferData.buffer);
    socket.send(blobData);

服务器向客户端发送消息时，WebSocket 对象上会触发 message 事件。这个 message 事件与其 他消息协议类似，可以通过 event.data 属性访问到有效载荷:

socket.onmessage = function(event) { let data = event.data;
// 对数据执行某些操作
};

与通过 send()方法发送的数据类似，event.data 返回的数据也可能是 ArrayBuffer 或 Blob。
这由 WebSocket 对象的 binaryType 属性决定，该属性可能是"blob"或"arraybuffer"。

其他事件

WebSocket 对象在连接生命周期中有可能触发 3 个其他事件。

 open:在连接成功建立时触发。
 error:在发生错误时触发。连接无法存续。  close:在连接关闭时触发。

WebSocket 对象不支持 DOM Level 2 事件监听器，因此需要使用 DOM Level 0 风格的事件处理程 序来监听这些事件:

socket.onclose = function() {
let socket = new WebSocket("ws://www.example.com/server.php"); socket.onopen = function() {
  alert("Connection established.");
};
socket.onerror = function() {
  alert("Connection error.");
  alert("Connection closed.");
};

在这些事件中，只有 close 事件的 event 对象上有额外信息。这个对象上有 3 个额外属性: wasClean、code 和 reason。其中，wasClean 是一个布尔值，表示连接是否干净地关闭;code 是一 个来自服务器的数值状态码;reason 是一个字符串，包含服务器发来的消息。可以将这些信息显示给 用户或记录到日志:

event.reason}`); 21
};

安全

探讨 Ajax 安全的文章已经有了很多，事实上也出版了很多专门讨论这个话题的书。大规模 Ajax 应 用程序需要考虑的安全问题非常多，但在通用层面上一般需要考虑以下几个问题。
首先，任何 Ajax 可以访问的 URL，也可以通过浏览器或服务器访问，例如下面这个

URL: /getuserinfo.php?id=23
socket.onclose = function(event) {
console.log(`as clean? ${event.wasClean} Code=${event.code} Reason=${

请求这个 URL，可以假定返回 ID 为 23 的用户信息。访问者可以将 23 改为 24 或 56，甚至其他任 24 何值。getuserinfo.php 文件必须知道访问者是否拥有访问相应数据的权限。否则，服务器就会大门敞开， 泄露所有用户的信息。

在未授权系统可以访问某个资源时，可以将其视为跨站点请求伪造(CSRF，cross-site request forgery) 25 攻击。未授权系统会按照处理请求的服务器的要求伪装自己。Ajax 应用程序，无论大小，都会受到 CSRF
攻击的影响，包括无害的漏洞验证攻击和恶意的数据盗窃或数据破坏攻击。
关于安全防护 Ajax 相关 URL 的一般理论认为，需要验证请求发送者拥有对资源的访问权限。可以
通过如下方式实现。
 要求通过 SSL 访问能够被 Ajax 访问的资源。
 要求每个请求都发送一个按约定算法计算好的令牌(token)。 注意，以下手段对防护 CSRF 攻击是无效的。
 要求 POST 而非 GET 请求(很容易修改请求方法)。
 使用来源 URL 验证来源(来源 URL 很容易伪造)。
 基于 cookie 验证(同样很容易伪造)。