四平网站建设在线咨询,搜索网站排名优化策略,上传宝贝网站建设属于什么类目,wordpress 收费会员Web Socket
Web Socket#xff08;套接字#xff09;的目标是通过一个长时连接实现与服务器全双工、双向的通信。在 JavaScript 中创建 Web Socket 时#xff0c;一个 HTTP 请求会发送到服务器以初始化连接。服务器响应后#xff0c;连接使用 HTTP 的 Upgrade 头部从 H…Web Socket
Web Socket套接字的目标是通过一个长时连接实现与服务器全双工、双向的通信。在 JavaScript 中创建 Web Socket 时一个 HTTP 请求会发送到服务器以初始化连接。服务器响应后连接使用 HTTP 的 Upgrade 头部从 HTTP 协议切换到 Web Socket 协议。这意味着 Web Socket 不能通过标准 HTTP 服务器实现而必须使用支持该协议的专有服务器。
因为 Web Socket 使用了自定义协议所以 URL方案scheme稍有变化不能再使用 http://或 https:// 而要使用 ws://和 wss://。前者是不安全的连接后者是安全连接。在指定 Web Socket URL 时必须包含 URL 方案因为将来有可能再支持其他方案。
使用自定义协议而非 HTTP 协议的好处是客户端与服务器之间可以发送非常少的数据不会对 HTTP 造成任何负担。使用更小的数据包让 Web Socket 非常适合带宽和延迟问题比较明显的移动应用。 使用自定义协议的缺点是定义协议的时间比定义 JavaScript API 要长。Web Socket 得到了所有主流浏览器支持。
Web Socket 是与服务器的全双工、双向通信渠道。与其他方案不同Web Socket 不使用 HTTP而使用了自定义协议目的是更快地发送小数据块。这需要专用的服务器但速度优势明显。
API
要创建一个新的 Web Socket就要实例化一个 WebSocket 对象并传入提供连接的 URL
let socket new WebSocket(ws://www.example.com/server.php); 注意必须给 WebSocket 构造函数传入一个绝对 URL。同源策略不适用于 Web Socket因此可以打开到任意站点的连接。至于是否与来自特定源的页面通信则完全取决于服务器。在握手阶段就可以确定请求来自哪里。
浏览器会在初始化 WebSocket 对象之后立即创建连接。与 XHR 类似WebSocket 也有一个 readyState 属性表示当前状态。不过这个值与 XHR 中相应的值不一样。
WebSocket.OPENING0连接正在建立。WebSocket.OPEN1连接已经建立。WebSocket.CLOSING2连接正在关闭。WebSocket.CLOSE3连接已经关闭。
WebSocket 对象没有 readystatechange 事件而是有与上述不同状态对应的其他事件。 readyState 值从 0 开始。
任何时候都可以调用 close() 方法关闭 Web Socket 连接
socket.close(); 调用 close() 之后readyState 立即变为 2连接正在关闭并会在关闭后变为 3连接已经关闭。
发送和接收数据
打开 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 风格的事件处理程序来监听这些事件
let socket new WebSocket(ws://www.example.com/server.php);
socket.onopen function() { alert(Connection established.);
};
socket.onerror function() { alert(Connection error.);
};
socket.onclose function() { alert(Connection closed.);
}; 在这些事件中只有 close 事件的 event 对象上有额外信息。这个对象上有 3 个额外属性 wasClean、code 和 reason。
wasClean 是一个布尔值表示连接是否干净地关闭code 是一个来自服务器的数值状态码reason 是一个字符串包含服务器发来的消息。可以将这些信息显示给用户或记录到日志
socket.onclose function(event) { console.log(as clean? ${event.wasClean} Code${event.code} Reason${event.reason});
};
