|
在 RFC 6455 规范中描述的 WebSocket 协议,提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在两个方向上传递,而无需中断连接也无需额外的 HTTP 请求。
对于需要连续数据交换的服务,例如网络游戏,实时交易系统等,WebSocket 尤其有用。
一个简单例子
要打开一个 WebSocket 连接,我们需要在 url 中使用特殊的协议 ws 创建 new WebSocket:
let socket = new WebSocket("ws://javascript.info");
同样也有一个加密的 wss:// 协议。类似于 WebSocket 中的 HTTPS。
始终使用 wss://
wss:// 协议不仅是被加密的,而且更可靠。
因为 ws:// 数据不是加密的,对于任何中间人来说其数据都是可见的。并且,旧的代理服务器不了解 WebSocket,它们可能会因为看到“奇怪的” header 而中止连接。
另一方面,wss:// 是基于 TLS 的 WebSocket,类似于 HTTPS 是基于 TLS 的 HTTP),传输安全层在发送方对数据进行了加密,在接收方进行解密。因此,数据包是通过代理加密传输的。它们看不到传输的里面的内容,且会让这些数据通过。
一旦 socket 被建立,我们就应该监听 socket 上的事件。一共有 4 个事件:
open —— 连接已建立,
message —— 接收到数据,
error —— WebSocket 错误,
close —— 连接已关闭。
……如果我们想发送一些东西,那么可以使用 socket.send(data)。
这是一个示例:
let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
socket.onopen = function(e) {
alert("[open] Connection established");
alert("Sending to server");
socket.send("My name is John");
};
socket.onmessage = function(event) {
alert(`[message] Data received from server: ${event.data}`);
};
socket.onclose = function(event) {
if (event.wasClean) {
alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
// 例如服务器进程被杀死或网络中断
// 在这种情况下,event.code 通常为 1006
alert('[close] Connection died');
}
};
socket.onerror = function(error) {
alert(`[error] ${error.message}`);
};
出于演示目的,在上面的示例中,运行着一个用 Node.js 写的小型服务器 server.js。它响应为 “Hello from server, John”,然后等待 5 秒,关闭连接。
所以你看到的事件顺序为:open → message → close。
这就是 WebSocket,我们已经可以使用 WebSocket 通信了。很简单,不是吗?
现在让我们更深入地学习它。
|
|