WebSocket 是啥原理？为啥可以实现持久连接

Posted 2023-03-17

可以把 WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁，它和 HTTP 有一些共性，是为了解决 HTTP
本身无法解决的某些问题而做出的一个改良设计。在以前 HTTP 协议中所谓的 keep-alive connection 是指在一次 TCP
连接中完成多个 HTTP 请求，但是对每个请求仍然要单独发 header；所谓的 polling
是指从客户端（一般就是浏览器）不断主动的向服务器发 HTTP
请求查询是否有新数据。这两种模式有一个共同的缺点，就是除了真正的数据部分外，服务器和客户端还要大量交换 HTTP
header，信息交换效率很低。它们建立的“长连接”都是伪.长连接，只不过好处是不需要对现有的 HTTP server
和浏览器架构做修改就能实现。
WebSocket 解决的第一个问题是，通过第一个 HTTP request 建立了 TCP 连接之后，之后的交换数据都不需要再发
HTTP request了，使得这个长连接变成了一个真.长连接。但是不需要发送 HTTP header就能交换数据显然和原有的 HTTP
协议是有区别的，所以它需要对服务器和客户端都进行升级才能实现。在此基础上 WebSocket 还是一个双通道的连接，在同一个 TCP
连接上既可以发也可以收信息。此外还有 multiplexing 功能，几个不同的 URI 可以复用同一个 WebSocket
连接。这些都是原来的 HTTP 不能做到的。 参考技术A WebSocket是html5新增加的一种通信协议，目前流行的浏览器都支持这个协议，例如Chrome，Safari，Firefox，Opera，IE等等，对该协议支持最早的应该是chrome，从chrome12就已经开始支持，随着协议草案的不断变化，各个浏览器对协议的实现也在不停的更新。该协议还是草案，没有成为标准，不过成为标准应该只是时间问题了，从WebSocket草案的提出到现在已经有十几个版本了，目前最新的是版本17，所对应的协议版本号为13，目前对该协议支持最完善的浏览器应该是chrome，毕竟WebSocket协议草案也是Google发布的。
1. WebSocket API简介
首先看一段简单的javascript代码，该代码调用了WebSockets的API。

[javascript] view plaincopy

var ws = new WebSocket(“ws://echo.websocket.org”);

ws.onopen = function()ws.send(“Test!”); ;

ws.onmessage = function(evt)console.log(evt.data);ws.close();;

ws.onclose = function(evt)console.log(“WebSocketClosed!”);;

ws.onerror = function(evt)console.log(“WebSocketError!”);;

这份代码总共只有5行，现在简单概述一下这5行代码的意义。
第一行代码是在申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。
第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。本回答被提问者和网友采纳 参考技术B WebSocket是html5新增加的一种通信协议，目前流行的浏览器都支持这个协议，例如Chrome，Safari，Firefox，Opera，IE等等，对该协议支持最早的应该是chrome，从chrome12就已经开始支持，随着协议草案的不断变化，各个浏览器对协议的实现也在不停的更新。该协议还是草案，没有成为标准，不过成为标准应该只是时间问题了，从WebSocket草案的提出到现在已经有十几个版本了，目前最新的是版本17，所对应的协议版本号为13，目前对该协议支持最完善的浏览器应该是chrome，毕竟WebSocket协议草案也是Google发布的。
1. WebSocket API简介
首先看一段简单的javascript代码，该代码调用了WebSockets的API。

[javascript] view plaincopy

var ws = new WebSocket(“ws://echo.websocket.org”);

ws.onopen = function()ws.send(“Test!”); ;

ws.onmessage = function(evt)console.log(evt.data);ws.close();;

ws.onclose = function(evt)console.log(“WebSocketClosed!”);;

ws.onerror = function(evt)console.log(“WebSocketError!”);;

这份代码总共只有5行，现在简单概述一下这5行代码的意义。
第一行代码是在申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。
第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。咱们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。