还是和以前一样。面试要考的地方我会标出来。前端怎么用websocket，这个一定要用，不懂这个，那这个教程就没用了。如果你想深入了解它的原理，那么本教程将非常适合你。另外，我也会把HTTP和HTTPS放在一起解释，让大家比较清楚。Websocket是HTML5的一个新协议，它允许服务器向客户端传输信息，实现浏览器与客户端的双工通信。Websocket弥补了HTTP不支持长连接的不足，所以在学习websocket之前先了解一下下面的HTTP。HTTPHTTP是一种应用层协议，用于传输HTML文件、图片文件和查询结果。它专为服务器和客户端之间的通信而设计。工作时，客户端打开连接发送请求，然后等待服务器响应。服务器不能主动向客户端发送请求。HTTP是一种无状态协议，这意味着服务器不会在请求之间保留任何数据。那么这就带来了一个问题。比如在电商网站中，将商品添加到购物车后，换一个页面后，添加商品，两次添加商品的请求是没有联系的，浏览器无法知道用户选择了哪些商品.解决办法是在HTTP头中加入cookie信息，这样每个请求都可以共享同一个状态。那么HTTP请求响应的工作流程是怎样的呢？1、客户端连接web服务器，与web服务器的HTTP端口（默认为80）建立TCP套接字连接。2、通过TCP套接字发送HTTP请求，客户端向服务器发送文本请求报文。一条请求报文由四部分组成：请求行、请求头、空行和请求数据。3.服务器接受请求并返回HTTP响应。Web服务器解析请求并定位请求的资源。服务器将资源的副本写入TCP套接字，由客户端读取。响应由4部分组成：状态行、响应头、空行和响应数据。4.释放连接TCP连接Web服务器主动关闭TCP套接字，释放TCP连接；客户端被动关闭TCP套接字并释放TCP连接。5.客户端浏览器解析HTML内容。客户端浏览器首先解析状态行，检查请求是否成功的状态码。然后解析每个响应头，它以几个字节的形式告诉后面的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，按照HTML的语法格式化，显示在浏览器窗口中。HTTP内容我不多说，也不能说太多。推荐大家看《HTTP权威指南》一本很小的书，很清楚。什么是HTTPSHTTPS，它和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了。与HTTP协议相比，websocket是一种持久化协议。下面是一个典型的websocket握手GET/chatHTTP/1.1Host:server.example.comUpgrade:websocketConnection:UpgradeSec-WebSocket-Key:x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol:chat,superchatSec-WebSocket-Version:13Origin:http://example.com可以看到比HTTPheader多了一个header。其实我们可以说websocket借用了HTTP的握手，它是针对HTTP解决特定问题的补丁。我们正在查看上述标头相对于HTTP标头的变化。Upgrade:websocketConnection:Upgrade这个是websocket的核心，告诉服务器这是一个websocket请求，不是http请求是一个Base64encod值，是随机生成的，用来验证是否是真正的websocket。那么Sec-WebSocket-Protocol就是一个用户自定义的字符串，用来区分同一个URL下的不同服务。Sec-WebSocket-Version这个不用多说，就是websocket的版本号。然后服务端会返回如下东西HTTP/1.1101SwitchingProtocolsUpgrade:websocketConnection:UpgradeSec-WebSocket-Accept:HSMrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol:chatSec-WebSocket-Accept表示已经被服务端确认，Sec-加密客户端的WebSocket-Key。Sec-WebSocket-Protocol表示最终使用的协议。websocket和HTTP在工作中有什么区别？下图很好地显示了差异。可以看到HTTP在取数据的时候，需要不停的询问服务器有没有我要的数据。如果有数据，它将返回数据。如果没有，它会在一段时间后再次询问服务器是否有我需要的数据。websocket呢，它只建立一次连接，所以连接不会断开。如果服务端有数据，会自动将数据返回给客户端。还有一个问题。我们在HTTP中提到HTTP是无状态的，就是健忘的，上次请求与本次请求无关，需要参考cookie来解决。那么在websockt中，因为是长连接，那么就不用一遍又一遍的加cookies了，是不是方便多了？下面的代码是websocket在前端代码中的应用')alert(websocket.readyState)//websocket就绪websocket.onerror=function(){}websocket.onopen=function(){}websocket.onmessage=function(){}websocket.onclose=function(){}
