简单聊聊WebSocket的应用场景？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1067个文字，预计阅读时间需要5分钟。
第一次看到+ws://和+wss://时，感觉高级且实用，还有这种协议。
WebSocket+历史WebSocket诞生于2008年6月。经过IETF标准化后，2009年Chrome 4成为第一个提供该标准支持的浏览器，并默认启用。
Websocket 历史第一次看到
ws://和wss://时候，感觉好高级啊，还有这种协议。
WebSocket是在2008年6月诞生的1。经由IEFT标准化后，2009年chrome 4第一个提供了该标准支持，并默认启用。于2011年由IEFT标准化为RFC 6455。
现在的浏览器均已支持该标准。
Websocket 出现的背景思考一下我们经常遇到的一种需求场景，要求在某个网页下，网页的内容可以实时更新。
这种情况下，最大众化的方式就是轮询接口了，即通过定时器，定时请求接口，获取到最新的信息后，将内容更新到页面中，如下：
setInterval(() => {
queryAPI().then(() => update());
}, 1000);
但是我们知道，这种定时器的延时并不是很精确，而且加上接口的请求时延，实际时间可能不止代码中所预先设定的时间长度，所以这种实时更新是伪实时更新。
除此之外，还有一点可能会经常遇到，即，我们更新信息并总是要更新整个页面上所有可以看到的信息，我们更关注一些经常变化的信息，比如状态，状态的信息可能大小只有几个字节，但是我们轮询接口拿到的信息却是这个页面的所有信息，大小自然不只几个字节，但是除状态以外的信息都可以视作是冗余的。
我们实际只需要一个字段，而且即使后端提供只返回状态的接口，但实际在一个请求中还要计算ip报文头的大小，依旧是很占用带宽的。
轮询这种解决方案目前依旧是非常流行，最新的轮询技术是Comet，这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在Comet中普遍采用的HTTP长连接也会消耗服务器资源2。
Websocket通信模式了解网络的都知道，数据传输分为单工、半双工、全双工三种工作模式。
Websocket是基于TCP的，使用全双工通信模式的协议，他使得客户端和服务端之间的数据交换变得更简单。而且，作为一个工作在全双工模式下的协议，服务端可以在建立连接后随时向客户端推送消息。
由于协议是基于TCP的，所以websocket也是需要建连和关闭连接的，但要注意的是，一般在websocket的握手通常指的是：客户端发送一个sdf.com'); function handleData(evt) { // handle server data. } ws.onmessage = handleData; ws.addEventListener('message', handleData);
WebSocket.send
主动向服务端发送消息，可以通过send和onmessage进行数据互动，如：
ws.send('list');
ws.onmessage = evt => {
const data = evt.data;
if (data === 'hello') {
console.log('world');
return ;
}
try {
const obj = JSON.parse(data);
switch (obj.type) {
case 'list':
// do something.
}
} catch (ex) {}
}
WebSocket.close
关闭连接
衍生知识Node服务端的实现，这个就参考相关的库吧，比较复杂。
http协议至今，主要经历了三个版本。
-
http1.0 短连接，单工通信
- http/1.0默认的模型是短连接，每个HTTP请求都由他自己独立完成，下图左1，可以看到每一个http请求都对应了一个建立连接关闭连接的阶段，每一个请求都有TCP握手和挥手的阶段。
- 在这个模型下，想要做到实时更新页面数据，只能考虑轮询。
-
http1.1 支持长链接，半双工通信
- 1.0之后的版本，1.1会让某个连接保持一定的时间，在这段时间里重复发送一系列请求（下图左2），就是保活。
- http2.0 支持多路复用，全双工通信
[1] [whatwg] TCPConnection feedback
[2] wiki
[3] RFC 6455
[4] Websocket教程
[5] HTTP1.x连接管理
本文首发于个人博客，欢迎来撩啊^-^。
本文共计1067个文字，预计阅读时间需要5分钟。
第一次看到+ws://和+wss://时，感觉高级且实用，还有这种协议。
WebSocket+历史WebSocket诞生于2008年6月。经过IETF标准化后，2009年Chrome 4成为第一个提供该标准支持的浏览器，并默认启用。
Websocket 历史第一次看到
ws://和wss://时候，感觉好高级啊，还有这种协议。
WebSocket是在2008年6月诞生的1。经由IEFT标准化后，2009年chrome 4第一个提供了该标准支持，并默认启用。于2011年由IEFT标准化为RFC 6455。
现在的浏览器均已支持该标准。
Websocket 出现的背景思考一下我们经常遇到的一种需求场景，要求在某个网页下，网页的内容可以实时更新。
这种情况下，最大众化的方式就是轮询接口了，即通过定时器，定时请求接口，获取到最新的信息后，将内容更新到页面中，如下：
setInterval(() => {
queryAPI().then(() => update());
}, 1000);
但是我们知道，这种定时器的延时并不是很精确，而且加上接口的请求时延，实际时间可能不止代码中所预先设定的时间长度，所以这种实时更新是伪实时更新。
除此之外，还有一点可能会经常遇到，即，我们更新信息并总是要更新整个页面上所有可以看到的信息，我们更关注一些经常变化的信息，比如状态，状态的信息可能大小只有几个字节，但是我们轮询接口拿到的信息却是这个页面的所有信息，大小自然不只几个字节，但是除状态以外的信息都可以视作是冗余的。
我们实际只需要一个字段，而且即使后端提供只返回状态的接口，但实际在一个请求中还要计算ip报文头的大小，依旧是很占用带宽的。
轮询这种解决方案目前依旧是非常流行，最新的轮询技术是Comet，这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在Comet中普遍采用的HTTP长连接也会消耗服务器资源2。
Websocket通信模式了解网络的都知道，数据传输分为单工、半双工、全双工三种工作模式。
Websocket是基于TCP的，使用全双工通信模式的协议，他使得客户端和服务端之间的数据交换变得更简单。而且，作为一个工作在全双工模式下的协议，服务端可以在建立连接后随时向客户端推送消息。
由于协议是基于TCP的，所以websocket也是需要建连和关闭连接的，但要注意的是，一般在websocket的握手通常指的是：客户端发送一个sdf.com'); function handleData(evt) { // handle server data. } ws.onmessage = handleData; ws.addEventListener('message', handleData);
WebSocket.send
主动向服务端发送消息，可以通过send和onmessage进行数据互动，如：
ws.send('list');
ws.onmessage = evt => {
const data = evt.data;
if (data === 'hello') {
console.log('world');
return ;
}
try {
const obj = JSON.parse(data);
switch (obj.type) {
case 'list':
// do something.
}
} catch (ex) {}
}
WebSocket.close
关闭连接
衍生知识Node服务端的实现，这个就参考相关的库吧，比较复杂。
http协议至今，主要经历了三个版本。
-
http1.0 短连接，单工通信
- http/1.0默认的模型是短连接，每个HTTP请求都由他自己独立完成，下图左1，可以看到每一个http请求都对应了一个建立连接关闭连接的阶段，每一个请求都有TCP握手和挥手的阶段。
- 在这个模型下，想要做到实时更新页面数据，只能考虑轮询。
-
http1.1 支持长链接，半双工通信
- 1.0之后的版本，1.1会让某个连接保持一定的时间，在这段时间里重复发送一系列请求（下图左2），就是保活。
- http2.0 支持多路复用，全双工通信
[1] [whatwg] TCPConnection feedback
[2] wiki
[3] RFC 6455
[4] Websocket教程
[5] HTTP1.x连接管理
本文首发于个人博客，欢迎来撩啊^-^。