## 前端之websocket

前端面试之websocket

个人csdn：me.csdn.net/Chad97
我的博客：Ruoduan.cn

---

敲黑板 知识点:

websocket：

websocket是HTML5的一个新协议，它容许服务端向客户端传递信息，实现浏览器和客户端双工通讯。websocket弥补了HTTP不支持长链接的特色，那么在学习websocket以前咱们先来了解如下HTTP

HTTP

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

那么HTTP请求响应的工做流程是什么呢？

一、客户端链接到web服务器，与web服务器的HTTP端口（默认是80）创建一个TCP套接字链接 二、发送HTTP请求 经过TCP套接字，客户端向服务器发送一个文本的请求报文，一个请求报文由请求行，请求头部，空行和请求数据四个部分构成 三、服务端接受请求并返回HTTP响应 web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。 四、释放链接TCP链接 Web服务器主动关闭TCP套接字，释放TCP链接；客户端被动关闭TCP套接字，释放TCP链接。 五、客户端浏览器解析HTML内容 客户端浏览器首先解析状态行，查看代表请求是否成功的状态代码。而后解析每个响应头，响应头告知如下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。 关于HTTP内容很少讲，太多了我也讲不了。推荐你们去看《HTTP权威指南》很小的一本书，讲的很清楚。

HTTPS

HTTPS是什么呢，他与HTTP的关系又是什么。在上一段讲过HTTP是咱们平时浏览网页时使用的一种协议。HTTP协议传输的数据都是没有加密的，也就是明文的，所以使用HTTP协议传输隐私信息很是的不安全。**为了让这些隐私数据可以加密传输，便设计了SSL协议对HTTP传输的数据进行加密，从而诞生了HTTPS。**然后对SSL进行不断的升级，出现了TLS。可是呢，名字用久了也就产生了感情，因此也一直延续着SSL是HTTPS的代名词的习惯。 下面这张图可以让你很清晰的认识到HTTP和HTTPS之间的关系这儿有一张图

那么HTTPS的加密究竟是怎么一回事呢。

加密过程以下:

一、浏览器将本身支持的一套加密规则发送给网站。 二、网站从中选出一组加密算法与HASH算法，并将本身的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。 三、得到网站证书以后浏览器要作如下工做： (1) 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一致等），若是证书受信任，则浏览器栏里面会显示一个小锁头，不然会给出证书不受信的提示。 (2) 若是证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。 (3) 使用约定好的HASH计算握手消息，并使用生成的随机数对消息进行加密，最后将以前生成的全部信息发送给网站。 四、网站接收浏览器发来的数据以后要作如下的操做： (1) 使用本身的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。 (2) 使用密码加密一段握手消息，发送给浏览器。 五、浏览器解密并计算握手消息的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(){}
复制代码

好了 就到这里吧~

• 补充 一个 面试题

js内存泄露使用什么工具 如何排除？

• 固然这个也是我后期补的 大天然的 搬运工

一、使用工具Heap Profiling

①、Heap Profiling能够记录当前的堆内存（heap）的快照，并生成对象的描述文件，该描述文件给出了当时JS运行所用的全部对象，以及这些对象所占用的内存大小、引用的层级关系等等。

②、JS运行的时候，会有栈内存（stack）和堆内存（heap），当咱们new一个类的时候，这个new出来的对象就保存在heap里，而这个对象的引用则存储在stack里。程序经过stack的引用找到这个对象。例如：var a = [1,2,3]，a是存储在stack中的引用，heap里存储着内容为[1,2,3]的Array对象。

③、打开调试工具，点击Memory中的Profiles标签，选中“Take Heap Snapshot”,点击“start”按钮，就能够拍在当前JS的heap快照了。

右边视图中列出了heap里的对象列表。

constructor：类名 Distance：对象到根的引用层级距离 Objects Count：该类的对象数 Shallow Size：对象所占内存（不包含内部引用的其余对象所占的内存） Retained Size：对象所占的总内存（包含····················································） 点击上图左上角的黑圈圈，会出现第二个内存快照

二、内存泄露的排查

将上图框框切换到comparison（对照）选项，该视图列出了当前视图与上一个视图的对象差别

#New：新建了多少对象 #Deleted：回收了多少对象 #Delta：新建的对象个数减去回收的对象个数 重点看closure（闭包），若是#Delta为正数，则表示建立了闭包函数，若是多个快照中都没有变负数，则表示没有销毁闭包

再度更新 EventSource

www.cnblogs.com/accordion/p…

打个连接先放在这 下班怼