前端面试之websocket篇

还是同以往一样,面试会考到的地方,我都会做出标记,websocket如何在前端如何用的,这个得用,别这个都不知道,那这个教程就没用了。如果你想对其原理进行深入了解,那么本教程将非常适合你,除此之外,我也把讲解HTTP和HTTPS进行一起讲解,让你对照看着更加清除。

**websocket是HTML5的一个新协议,它允许服务端向客户端传递信息,实现浏览器和客户端双工通信。**websocket弥补了HTTP不支持长连接的特点,那么在学习websocket之前我们先来了解以下HTTP。

HTTP

HTTP是用于传输如HTML文件,图片文件,查询结果的应用层协议。它被设计于用于服务端和客户端之间的通信。在工作的时候,客户端打开一个连接以发出请求,然后等待服务端响应,服务端不能主动向客户端发送请求。HTTP是无状态协议,意味着服务器不会在两个请求之间保留任何数据。那么这就带来了一个问题,比如说在一个电商网站中,把某个物品加入了购物车,换了一个页面后,在添加一个物品,两次添加物品的请求没有联系,浏览器无法知道用户选择了那些商品。解决方法是在HTTP头部中加入cookie信息这样每次请求都能够共享相同的状态。

那么HTTP请求响应的工作流程是什么呢?

1、客户端连接到web服务器,与web服务器的HTTP端口(默认是80)建立一个TCP套接字连接

2、发送HTTP请求 通过TCP套接字,客户端向服务器发送一个文本的请求报文,一个请求报文由请求行,请求头部,空行和请求数据四个部分构成

3、服务端接受请求并返回HTTP响应 web服务器解析请求,定位请求资源。服务器将资源复本写到TCP套接字,由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。

4、释放连接TCP连接 Web服务器主动关闭TCP套接字,释放TCP连接;客户端被动关闭TCP套接字,释放TCP连接。

5、客户端浏览器解析HTML内容 客户端浏览器首先解析状态行,查看表明请求是否成功的状态代码。然后解析每一个响应头,响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML,根据HTML的语法对其进行格式化,并在浏览器窗口中显示。

关于HTTP内容不多讲,太多了我也讲不了。推荐大家去看《HTTP权威指南》很小的一本书,讲的很清楚。

HTTPS

HTTPS是什么呢,他与HTTP的关系又是什么。在上一段讲过HTTP是我们平时浏览网页时使用的一种协议。HTTP协议传输的数据都是没有加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常的不安全。**为了让这些隐私数据能够加密传输,便设计了SSL协议对HTTP传输的数据进行加密,从而诞生了HTTPS。**而后对SSL进行不断的升级,出现了TLS。但是呢,名字用久了也就产生了感情,所以也一直延续着SSL是HTTPS的代名词的习惯。

下面这张图能够让你很清晰的认识到HTTP和HTTPS之间的关系这儿有一张图

那么HTTPS的加密到底是怎么一回事呢。

加密过程如下:

1、浏览器将自己支持的一套加密规则发送给网站。

2、网站从中选出一组加密算法与HASH算法,并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址,加密公钥,以及证书的颁发机构等信息。

3、获得网站证书之后浏览器要做以下工作:

(1) 验证证书的合法性(颁发证书的机构是否合法,证书中包含的网站地址是否与正在访问的地址一致等),如果证书受信任,则浏览器栏里面会显示一个小锁头,否则会给出证书不受信的提示。

(2) 如果证书受信任,或者是用户接受了不受信的证书,浏览器会生成一串随机数的密码,并用证书中提供的公钥加密。

(3) 使用约定好的HASH计算握手消息,并使用生成的随机数对消息进行加密,最后将之前生成的所有信息发送给网站。

4、网站接收浏览器发来的数据之后要做以下的操作:

(1) 使用自己的私钥将信息解密取出密码,使用密码解密浏览器发来的握手消息,并验证HASH是否与浏览器发来的一致。

(2) 使用密码加密一段握手消息,发送给浏览器。

5、浏览器解密并计算握手消息的HASH,如果与服务端发来的HASH一致,此时握手过程结束,之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。

websocket

讲了这么多终于讲到了websocket。websocket相对与HTTP协议来说是一个持久化的协议。下面是一个典型的websocket握手

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Origin: http://example.com

可以看到相对于HTTP的头部多了一个头部,其实我们就可以说,websocket借用了HTTP的握手,是HTTP的一个解决特定问题的补丁。 我们在看看上面的头部相对HTTP头部都有哪些变化。

Upgrade: websocket

Connection: Upgrade

这就是websocket的核心,告诉服务器这是websocket请求,而不是http请求

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Sec-WebSocket-Key是一个Base64 encod的值,是一个随机生成的,用于验证是否是真正的websocket

然后Sec-WebSocket-Protocol是一个用户定义的字符串,用来区分同URL下,不同的服务需要不同的协议

Sec-WebSocket-Version这个不用说就是websocket的版本号。 那么服务端就会返回下列东西

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

Sec-WebSocket-Protocol: chat

Sec-WebSocket-Accept表示经过服务器确认,并且对客户端的Sec-WebSocket-Key进行了加密。

Sec-WebSocket-Protocol表示最终使用的协议。

在工作的时候websocket和HTTP有哪些差异呢,下面这张图很好的表示了区别。

可以看到HTTP获取数据的时候,需要不断的问服务端是否有我要的数据啊,如果有数据就返回数据,没有就过一段时间再次询问服务端是否有我需要的数据。那websocket呢,它只建立一次连接,那么这个连接就不会断,服务端如果有数据的话,会自动返回数据给客户端,还有一个问题,在HTTP中我们提到,HTTP是无状态的,意思它健忘,上一次的请求和这次的请求都没什么联系,我们需要引用cookie才能解决。那么在websockt中,因为是一次长连接,那么这就不用一次次加入cookie,是不是方便很多了。 下面的代码就是websocket在前端代码中的应用

if ('WebSocket' in window) {

websocket = new WebSocket("地址");

} else {

// 不支持websocket

}

websocket.send = ('msg')

alert(websocket.readyState) // websocket的准备状况

websocket.onerror = function(){}

websocket.onopen = function(){}

websocket.onmessage = function(){}

websocket.onclose = function(){}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容