WebSockets - 与服务器通信

Web 很大程度上是围绕 HTTP 的请求/响应范例构建的。 客户端加载一个网页，然后什么也不会发生，直到用户单击下一页。 2005 年左右，AJAX 开始让 Web 感觉更加动态。 尽管如此，所有 HTTP 通信均由客户端控制，这需要用户交互或定期轮询以从服务器加载新数据。

使服务器能够在知道有新数据可用的那一刻将数据发送到客户端的技术已经存在相当长一段时间了。 它们的名称如"Push"或"Comet"。

通过长轮询，客户端会打开与服务器的 HTTP 连接，服务器将保持连接打开状态，直到发送响应。 每当服务器实际有新数据时，它就会发送响应。 长轮询和其他技术效果很好。 然而，所有这些都有一个问题，即它们带有 HTTP 开销，这并不使它们非常适合低延迟应用程序。 例如，浏览器中的多人射击游戏或任何其他具有实时组件的在线游戏。

将套接字带入 Web

Web Socket 规范定义了在 Web 浏览器和服务器之间建立"套接字"连接的 API。 通俗地说，客户端和服务器之间有一个持久的连接，双方都可以随时开始发送数据。

可以使用构造函数简单地打开 Web 套接字连接 −

var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);

ws 是 WebSocket 连接的新 URL 架构。 还有 wss，用于安全 WebSocket 连接，与 https 用于安全 HTTP 连接的方式相同。

立即将一些事件处理程序附加到连接可以让您知道连接何时打开、何时收到传入消息或是否出现错误。

第二个参数接受可选的子协议。 它可以是一个字符串或字符串数组。 每个字符串应代表一个子协议名称，服务器仅接受数组中传递的子协议之一。 可以通过访问WebSocket对象的protocol属性来确定接受的子协议。

// When the connection is open, send some data to the server
connection.onopen = function () {
   connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
   console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
   console.log('Server: ' + e.data);
};

与服务器通信

一旦我们与服务器建立了连接（当 open 事件被触发时），我们就可以开始使用连接对象上的 send（您的消息）方法向服务器发送数据。 它过去只支持字符串，但在最新的规范中，它现在也可以发送二进制消息。 要发送二进制数据，请使用 Blob 或 ArrayBuffer 对象。

// Sending String
connection.send('your message');

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);

for (var i = 0; i < img.data.length; i++) {
   binary[i] = img.data[i];
}

connection.send(binary.buffer);

// Sending file as Blob
var file = document.querySelector('input[type = "file"]').files[0];
connection.send(file);

同样，服务器可能随时向我们发送消息。 每当发生这种情况时，就会触发 onmessage 回调。 回调接收一个事件对象，并且可以通过 data 属性访问实际消息。

在最新规范中，WebSocket 还可以接收二进制消息。 可以以 Blob 或 ArrayBuffer 格式接收二进制帧。 要指定接收到的二进制文件的格式，请将 WebSocket 对象的 binaryType 属性设置为"blob"或"arraybuffer"。 默认格式是"blob"。

// Setting binaryType to accept received binary as either 'blob' or 'arraybuffer'
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
   console.log(e.data.byteLength); // ArrayBuffer object if binary
};

WebSocket 的另一个新添加的功能是扩展。 使用扩展，可以发送压缩、复用等帧。

// Determining accepted extensions
console.log(connection.extensions);

跨源通信

作为一种现代协议，跨源通信直接融入到 WebSocket 中。 WebSocket 支持任何域中各方之间的通信。 服务器决定是向所有客户端提供其服务，还是仅向驻留在一组明确定义的域中的客户端提供服务。

代理服务器

每项新技术都会带来一系列新问题。 就 WebSocket 而言，它与代理服务器兼容，代理服务器在大多数公司网络中调解 HTTP 连接。 WebSocket 协议使用 HTTP 升级系统（通常用于 HTTP/SSL）将 HTTP 连接"升级"为 WebSocket 连接。 有些代理服务器不喜欢这样，会断开连接。 因此，即使给定客户端使用 WebSocket 协议，也可能无法建立连接。 这使得下一节变得更加重要:)

服务器端

使用 WebSocket 为服务器端应用程序创建了一种全新的使用模式。 虽然 LAMP 等传统服务器堆栈是围绕 HTTP 请求/响应周期设计的，但它们通常不能很好地处理大量打开的 WebSocket 连接。 同时保持大量连接打开需要一个以低性能成本获得高并发的架构。