共计 1963 个字符,预计需要花费 5 分钟才能阅读完成。
websocket 是什么?
答: 它是一种网络通信协议,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
为什么需要 websocket? 疑问? 我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?
答:
1. 因为 HTTP 协议有一个缺陷:通信只能由客户端发起
2. 我们都知道轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开), 因此 websocket 应运而生。
websocket 简介
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。WebSocket 协议基于 TCP 协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程。其目的是在 WebSocket 应用和 WebSocket 服务器进行频繁双向通信时,可以使服务器避免打开多个 HTTP 连接进行工作来节约资源,提高了工作效率和资源利用率。
WebSocket 目前支持两种统一资源标志符 ws 和 wss,类似于 HTTP 和 HTTPS。
实现原理
浏览器发出 webSocket 的连线请求,服务器发出响应,这个过程称为握手, 握手的过程只需要一次,就可以实现持久连接。
握手与连接
浏览器发出连线请求, 通过 get 可以表明此次连接的建立是以 HTTP 协议为基础的,返回 101 状态码。
如果不是 101 状态码,表示握手升级的过程失败了
101 是 Switching Protocols, 表示服务器已经理解了客户端的请求,并将通过 Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送这个响应后的空档,将 http 升级到 webSocket。
其中 Upgrade 和 Connection 字段告诉服务端,发起的是 webSocket 协议
Sec-WebSocket-Key 是浏览器经过 Base64 加密后的密钥,用来和 response 里面的 Sec-WebSocket-Accept 进行比对验证
Sec-WebSocket-Version 是当前的协议版本
Sec-WebSocket-Extensions 是对 WebSocket 的协议扩展
服务器接到浏览器的连线请求返回结果如下:
Upgrade 和 Connection 来告诉浏览器,服务已经是基于 webSocket 协议的了,让浏览器也遵循这个协议
Sec-WebSocket-Accept 是服务端确认后并加密后的 Sec-WebSocket-Accept
至此,webSocket 连接成功,接下来就是 webSocket 的协议了。
客户端的简单示例:
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(evt) {console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {console.log( "Received Message:" + evt.data);
ws.close();};
ws.onclose = function(evt) {console.log("Connection closed.");
};
ws.onerror = function(evt) {console.log("error!!!");
};
客户端的 API
创建 WebSocket 对象
var ws = new WebSocket(‘ws://echo.websocket.org’);
websocket 属性
ws.readyState
CONNECTING:值为 0,表示正在连接。
OPEN:值为 1,表示连接成功,可以通信了。
CLOSING:值为 2,表示连接正在关闭。
CLOSED:值为 3,表示连接已经关闭,或者打开连接失败。
ws.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。
WebSocket 事件
如果要指定多个回调函数,可以使用 addEventListener 方法
ws.addEventListener('open', function (event) {ws.send('Hello Server!');
});
ws.addEventListener("close", function(event) {
...
// handle close event
});
ws.addEventListener("message", function(event) {
var data = event.data;
...
// 处理数据
});
websocket 方法
skycto JEEditor