浅浅的聊一下 WebSocket
第一次看到
ws://
和wss://
时候,感觉好高级啊,还有这种协议。
Websocket 历史
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的握手通常指的是:客户端发送一个http请求到服务端,服务端响应后标志这个链接建立起来。而不是指tcp的三次握手。
另外在RFC 6455 1.1节「Background」中介绍:WebSocket通过HTTP端口的80和443进行工作,并支持HTTP代理和中介。
原文:it is designed to work over HTTP ports 80 and 443 as well as to support HTTP proxies and intermediaries
为了实现和HTTP的兼容性,WebSocket握手使用HTTP的Upgrade头将HTTP协议转换成Websocket协议。
作为一种协议,websocket自然也是有其用于协议控制的头部信息的,但是相对于HTTP请求每次都要带上完整的头部信息,传输数据时,websocket数据包的头部信息就相对较小,从而降低了控制开销。
相对于前文所提到的轮询接口,websocket可以做到服务端直接向客户端传输数据,省去了客户端发起请求的步骤,同时没有间隔时间,只要服务端内容变化,就可以告知客户端,实时性上有了很大的提高。
Websocket 使用
WebSocket使用十分简单,只需要关注以下API:
WebSocket(url[, protocol])
构造函数
使用 new WebSocket(xxx)
创建对象时,会同时建立与服务器的连接
WebSocket.onopen
,WebSocket.onclose
分别对应连接成功、失败时的回调,这里可以做一些初始化、销毁的工作
WebSocket.onmessage
实际处理数据是用的该函数
在数据处理完成后,需要移除回调函数,不然可能会影响到其他地方的处理
const ws = new WebSocket('ws://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连接管理
浅浅的聊一下 WebSocket的更多相关文章
- websocket 实现单聊群聊 以及 握手原理+加密方式
WebSocket 开始代码 服务端 群聊 # type:WebSocket 给变量标注类型 # websocket web + socket from geventwebsocket.server ...
- websocket实现简单聊天程序
程序的流程图: 主要代码: 服务端 app.js 先加载所需要的通信模块: var express = require('express'); var app = express(); var htt ...
- Python Web学习笔记之WebSocket 通信过程与实现
一.什么是 WebSocket ? WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输.但它跟 HTTP 没什么关系,它是基于 TCP 的一种独立实现. 以前客户端想知道服务 ...
- websocket和通信
最近默默的在学websocket,推荐的当然是阮一峰的博客了,其中也学到了不少 可以去看看咯 http://www.ruanyifeng.com/blog/2017/05/websocket.htm ...
- [技术选型] Node.js
Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低.非常适合小型网站,个性化网站 NodeJS适合运用在高并发.I/O密集.少量 ...
- 巨蟒python全栈开发flask5
1.轮询&&长轮询&&长连接 2.GeventWebsocket 3.Websocket群聊 4.Websocket单聊 5.websocket握手 6.websock ...
- 一例完整的websocket实现群聊demo
前言 业余我都会花一些时间在tcp.http和websocket等领域的学习,现在觉得有点收获,所以把一个基于websocket的群聊功能的例子提供给大家玩玩.当然这是一个很完整的例子,包括webso ...
- websocket(二)--简单实现网页版群聊
websocket可以实现服务端的消息推送,而不必在客户端轮询,大大的节省的资源,对于实时通讯来说简直是个大喜讯. 在上一篇文章中介绍了协议握手,这篇文章将通过实现简单的群聊来帮助进一步了解webso ...
- 补习系列(20)-大话 WebSocket 与 "尬聊"的实现
目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参 ...
随机推荐
- CentOS 7中的系统语言包及UTF-8、en_US.UTF-8和zh_CN.UTF-8的区别
UTF-8.en_US.UTF-8和zh_CN.UTF-8的区别 en_US.UTF-8.zh_CN.UTF-8叫做字符集,就是说'A'.'B'.'中'.'国'等对应的整数值,en_US.UTF-8只 ...
- UITabBarController管理原则
- 大前端JS篇之搞懂【Set】
我认为前端生态很大,犹如一片汪洋大海,很难短时间内窥其全貌,在这里我们不谈其他,只聊聊 Set Set是 es6 新提出的一个对象,也是一种数据结构,为什么es6要提出这样一个新对象呢,无非就是丰富j ...
- MySQL5.7修改登录密码的几种方式
1.更新mysql.user表 use mysql UPDATE user SET authentication_string = password('新密码') where user = 'root ...
- notepad++颜色属性解释
Global Styles Indent guideline style 缩进参考线的颜色Brace highlight style 鼠标指针在框架左右时框架的颜色(如css中{} js中的() ...
- F WebDriver and 环境配置
https://seleniumhq.github.io/docs/wd.html WEBDRIVER The biggest change in Selenium recently has been ...
- 申请Google AdSense联盟(还没有通过)
最近我把我的博客移动到了我自己搭建的一个网站上这里,想申请goole联盟,但是连续申请了今天都没有被通过 不知道什么原因,goole没有有回复就告诉你不通过,这让我摸不到头脑, 我网站用的是hexo搭 ...
- 如何在Kubernetes 里添加自定义的 API 对象(一)
环境: golang 1.15 依赖包采用go module 实例:现在往 Kubernetes 添加一个名叫 Network 的 API 资源类型.它的作用是,一旦用户创建一个 Network 对象 ...
- python生成器对象&常见内置函数
内容概要 异常捕获(补充) for循环本质 生成器 yield 和 return优缺点 笔试题 常用内置函数 内容详细 一.异常捕获补充 try: print(name) except NameErr ...
- Solution -「LOCAL」「cov. HDU 6864」找朋友
\(\mathcal{Description}\) Link.(几乎一致) 给定 \(n\) 个点 \(m\) 条边的仙人掌和起点 \(s\),边长度均为 \(1\).令 \(d(u)\) 表 ...