什么是 window 全局对象的 WebSocket 属性

window 对象是 Web 浏览器中的全局对象，它为开发者提供了访问浏览器窗口和所有内置对象的接口。作为 JavaScript 的核心部分，window 对象包含大量与浏览器操作相关的属性和方法。在这之中，WebSocket 属性允许浏览器与服务器进行双向通信，这是现代 Web 应用中实现实时交互的基础之一。

WebSocket 简介

WebSocket 是 HTML5 引入的一个新协议，用来在浏览器和服务器之间建立持久性的双向通信通道。与传统的 HTTP 请求/响应机制相比，WebSocket 允许客户端和服务器之间实时交换数据，而不需要每次都重新建立连接。具体而言，HTTP 是无状态的，每次请求结束后连接就会关闭，而 WebSocket 通过握手过程建立连接后，客户端和服务器可以通过同一个通道一直进行通信，直到显式关闭。

WebSocket 在 window 对象中的作用

window 对象的 WebSocket 属性提供了浏览器与服务器进行实时通信的能力。通过 WebSocket 构造函数，开发者可以创建一个 WebSocket 对象，并与服务器进行交互。这个 WebSocket 对象继承了 EventTarget 接口，意味着它可以响应一些特定的事件，例如连接成功、收到消息、错误、连接关闭等。

WebSocket 的基本用法

以下是使用 WebSocket 的基本代码结构：

const socket = new WebSocket('ws://example.com/socketserver');

socket.onopen = function(event) {
    console.log('Connection established!');
    socket.send('Hello Server!');
};

socket.onmessage = function(event) {
    console.log('Message from server ', event.data);
};

socket.onerror = function(error) {
    console.error('WebSocket error: ', error);
};

socket.onclose = function(event) {
    console.log('Connection closed: ', event);
};

在这个例子中，WebSocket 对象是通过 new WebSocket() 构造函数实例化的，并且连接到一个 WebSocket 服务器 ws://example.com/socketserver。在建立连接后，onopen 事件会被触发，这时客户端可以通过 send() 方法向服务器发送数据。服务器可以通过 onmessage 事件向客户端发送数据。当 WebSocket 连接出现错误时，会触发 onerror 事件，而 onclose 事件则在连接关闭时被调用。

WebSocket 与 HTTP 的对比

WebSocket 与 HTTP 的不同之处在于其双向通信的特性。在 HTTP 请求中，客户端发起请求，服务器响应完成后连接关闭。而 WebSocket 则允许客户端和服务器之间保持持续的连接，双方可以在需要时随时发送和接收数据。这种模式对于需要高频率数据更新的场景非常有效，例如在线游戏、股票交易、实时聊天应用等。

实际案例：在线聊天应用

设想一个在线聊天应用，传统的 HTTP 请求每次都需要用户发送消息时建立连接，并请求新的消息记录。这种方法不仅效率低，还会导致较高的延迟，因为每次请求都需要重新建立连接。使用 WebSocket，可以让服务器和客户端一直保持连接，当有新的消息时，服务器可以立即推送到客户端，而客户端也可以即时发送消息给服务器，极大地减少了延迟。

const chatSocket = new WebSocket('ws://chatserver.com/socket');

chatSocket.onopen = () => {
    console.log('Chat connection established');
    chatSocket.send(JSON.stringify({ type: 'join', username: 'JohnDoe' }));
};

chatSocket.onmessage = (event) => {
    const messageData = JSON.parse(event.data);
    console.log('New message: ', messageData.content);
    // 可以将新消息更新到聊天窗口中
};

chatSocket.onerror = (error) => {
    console.error('WebSocket Error: ', error);
};

chatSocket.onclose = (event) => {
    console.log('Chat connection closed');
};

在这个示例中，我们创建了一个聊天客户端，连接到 chatserver.com 的 WebSocket 服务器。当连接成功时，客户端会通过 send() 方法将用户信息发送到服务器，服务器随后可以通过 onmessage 事件推送新消息到客户端。这种实时更新的机制使得 WebSocket 成为构建在线聊天应用的理想选择。

WebSocket 的事件处理

WebSocket 对象具备四个主要事件处理方法，它们分别是：

1. onopen：当连接成功建立时触发，通常用于通知用户连接已建立并准备好通信。
2. onmessage：当服务器发送消息时触发，event.data 包含服务器发送的具体消息。
3. onerror：当连接发生错误时触发，开发者可以通过这个事件处理异常。
4. onclose：当连接被关闭时触发，通常用来清理资源或通知用户连接已断开。

例如，在开发实时游戏时，WebSocket 事件处理显得尤为重要。游戏客户端需要随时响应服务器的指令，而服务器也需要持续更新客户端的游戏状态。通过 WebSocket 的事件机制，双方可以无缝沟通。

WebSocket 的高级功能：二进制数据传输

WebSocket 不仅支持传输文本数据，还可以传输二进制数据（如 ArrayBuffer 和 Blob）。这种能力使得 WebSocket 成为传输复杂数据类型的理想工具。例如，图像、音频、视频流等数据都可以通过 WebSocket 高效地在客户端和服务器之间传输。

const binarySocket = new WebSocket('ws://mediaserver.com/stream');

binarySocket.onopen = () => {
    console.log('Binary connection established');
};

binarySocket.onmessage = (event) => {
    const arrayBuffer = event.data;
    console.log('Received binary data of length ', arrayBuffer.byteLength);
    // 可以将二进制数据处理后显示，如视频流
};

binarySocket.onerror = (error) => {
    console.error('WebSocket Error: ', error);
};

binarySocket.onclose = (event) => {
    console.log('Binary connection closed');
};

在这个示例中，WebSocket 可以用于接收服务器发送的视频流或音频流，并在客户端进行处理和播放。传统的 HTTP 协议由于是基于请求/响应模式，在处理这种大体量、连续性的数据时不如 WebSocket 高效。

安全性考量

在使用 WebSocket 时，安全性是必须要考虑的问题。WebSocket 支持通过 wss:// 协议来进行加密连接，这类似于 HTTPS 对 HTTP 的增强。在不加密的连接上传输敏感信息可能会导致数据被截取，因此在传输敏感数据时应使用 wss:// 以确保通信的安全。

const secureSocket = new WebSocket('wss://securechat.com/socket');

secureSocket.onopen = () => {
    console.log('Secure connection established');
    secureSocket.send('Hello, secure world!');
};

secureSocket.onmessage = (event) => {
    console.log('Message from server: ', event.data);
};

WebSocket 的扩展与限制

尽管 WebSocket 提供了非常高效的双向通信机制，但它也存在一些局限。与 HTTP/2 相比，WebSocket 的性能在某些场景下可能略显不足。HTTP/2 本身支持多路复用，可以在同一个 TCP 连接中发送多个流，而 WebSocket 一次只能处理一个连接。

此外，WebSocket 的状态管理相对复杂。在 HTTP 协议下，状态可以通过请求头、cookie、token 等方式维护，而 WebSocket 在持续连接下，需要开发者自己设计状态管理和恢复机制。

实际应用场景

1. 实时金融数据更新：股票市场应用通常使用 WebSocket 来推送实时价格、成交量等数据。传统的 HTTP 请求无法满足这种实时性的需求，而 WebSocket 可以通过持续连接来实时发送更新。

2. 在线游戏：多人在线游戏需要大量的实时数据交互，玩家的动作、游戏状态等都需要即时传递。通过 WebSocket，游戏服务器可以与多个客户端保持持续的通信，从而为玩家提供实时反馈。

3. 实时协作工具：像 Google Docs 这种多人协作工具，可以通过 WebSocket 来实现不同用户之间的实时文档同步。用户的每一次编辑操作都会立即发送到服务器，并通过 WebSocket 发送到所有其他连接的客户端。

4. 物联网（IoT）设备控制：WebSocket 可以应用于物联网场景中，比如实时控制智能家居设备，监控传感器数据等。与传统的 HTTP 请求方式相比，WebSocket 可以在设备和服务器之间保持实时的通信。

总结

window 对象中的 WebSocket 属性提供了 Web 开发中不可或缺的双向通信机制。它突破了 HTTP 单向通信的限制，为构建实时交互应用提供了强大的支持。从聊天应用、在线游戏、实时金融更新到物联网设备控制，WebSocket 在现代 Web 开发中起着重要的作用。通过它，开发者可以为用户提供更顺畅、更高效的实时体验。