打开 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 验证(同样很容易伪造)。