javascript - 在 Javascript 中通过 Web 套接字发送和接收二进制数据？

Question

可以在 Javascript 中通过 Web 套接字发送和接收二进制数据吗？例如，我可以使用 Web 套接字实现 SSH 客户端吗？

Answer 1

WebSockets 规范的下一个草案 ( hybi-07 ) 正在大多数浏览器中实现，它将为协议(protocol)和 API 添加内置二进制支持。

但是，在此之前，WebSockets 有效负载被编码为 UTF-8。为了发送二进制数据，您必须使用某种方式将二进制数据编码为 UTF-8。

有很多选项，但这里有两个我用过的:

UTF-8:

实际上，您可以将字节流直接编码为 UTF-8。

编码和解码的Python看起来像这样:

from codecs import (utf_8_encode, utf_8_decode,
                    latin_1_encode, latin_1_decode)

utf_8_encode(unicode(buf, 'latin-1'))[0]      # encode

latin_1_encode(utf_8_decode(utf8_buf)[0])[0]  # decode

在 JavaScript 中:

chr = data.charCodeAt(N)  // to 'decode' at position N of the message

// Enocde array of bytes (0-255) to UTF-8
data = array.map(function (num) {
    return String.fromCharCode(num); }).join('');

UTF-8编码说明:

• 对于在值 0-255 之间均匀分布的二进制数据，有效负载的大小比原始二进制数据大 50%。

• Flash WebSockets 模拟器 web-socket-js 0(零)的编码可能有问题。

Base 64:

在Python中:

from base64 import b64encode, b64decode

data = b64encode(buf)    # encode binary buffer to b64

buf = b64decode(data)    # decode b64 to binary buffer

在 Javascript 端对消息进行编码和解码:

data = window.btoa(msg)  // Encode to base64

msg = window.atob(data)  // Decode base64
msg.charCodeAt(N)        // Read decode byte at N

Base 64 注释:

• 均匀分布的二进制数据(0-255)将比原始数据大 33%。

• base64 编码的 Python 端开销比 UTF-8 编码少。然而，解码 Base64 时 Javascript 端的开销会多一点(UTF-8 不需要在 Javascript 中解码，因为浏览器已经将 UTF-8 转换为 Javascript 原生 UTF-16)。

• 更新:假设二进制数据被编码为 UTF-8 字符串，如上所示，字符值范围为 0-255。具体来说，window.atob 不支持大于 255 的字符值。请参阅此 mozilla bug 。同样的限制也适用于 Chrome。

websockify:

WebSockify是一个代理/桥接器，允许支持 WebSockets 的浏览器与任意二进制服务进行通信。它的创建是为了允许 noVNC与现有的 VNC 服务器进行通信。 websockify 使用二进制数据的 base64 编码/解码，还提供了一个用于 Javascript 的 websock.js 库。 websock.js 具有与常规 WebSocket 类似的 API，但它透明地处理二进制数据，并且旨在与 websockify 进行通信。 免责声明:我创建了 websockify 和 noVNC。

ssh 客户端:

从技术上讲，您可以通过 WebSocket 实现浏览器 ssh 客户端(我已经考虑过)，但是，这需要在浏览器中进行 SSH 加密和解密，这会很慢。鉴于 WebSockets 具有加密的 WSS (TLS) 模式，因此通过 WebSocket WSS 进行普通 telnet 可能更有意义。

事实上，websockify 包含一个示例 telnet 客户端。

您将像这样在 HOSTNAME 上启动 websockify(telnetd 来自 krb5-telnetd):

sudo ./websockify 2023 --web . --wrap-mode=respawn -- telnetd -debug 2023

然后导航至http://HOSTNAME:2023/wstelnet.html?hostname=HOSTNAME&port=2023

请参阅websockify README了解更多信息。要使用 WSS 加密，您需要创建 SSL key ，如 noVNC advanced usage wiki page 中所述。