websocket原理及简单入门

在了解websocket之前,我们先来了解一下websocket出现之前的世界
当我们在开腾讯会议或视频通话时,我们自己的影像会传给对方,对方的影像也能同时传给我们,这就是即时通讯技术
即时通讯技术是实现：服务器端可以时地将数据的更新或变化反应到客户端，在Web中，由于浏览器的限制，实现即时通讯需要借助一些方法。这种限制出现的主要原因是，Web通信都是浏览器先发送请求到服务器，服务器再进行响应完成数据的现实更新。
除了websocket之外,实现即时通讯主要有三种方式，短轮询、长轮询(comet)、长连接(SSE),都是在HTTP基础上实现的

轮询是什么

轮询（Polling）就是客户端定期向服务器发请求. 可以用于定期查询或获取新数据或状态的更新。在轮询中，程序会以固定的时间间隔重复执行请求，以检查是否有新的数据可用或某个条件是否满足。

短轮询是什么

客户端以固定的时间间隔向服务器发起请求，查询是否有新的数据或状态更新。
过程：客户端发起请求 -> 服务器处理请求并返回响应 -> 客户端接收响应并处理 -> 客户端等待一段时间后重复上述过程。
特点：
客户端定期主动发起请求，无论服务器上是否有更新的数据。
服务器在每次请求中只返回当前的数据或状态，不保持连接。
相对简单实现，适用于实时性要求不高的场景。
但是明显会产生太多请求,开销和延迟过大

长轮询(long poll)是什么

客户端发起请求后，服务器会保持连接并等待数据或状态更新，直到有更新时才返回响应给客户端
过程：客户端发起请求 -> 服务器处理请求，如果没有更新，则服务器保持连接，等待更新 -> 当有新的数据或状态更新时，服务器返回响应给客户端 -> 客户端接收响应并处理 -> 客户端重新发起请求。
特点：
服务器在没有数据更新时保持连接，避免了频繁的请求和响应。
当有新的数据或状态更新时，服务器会立即返回响应给客户端。
相对于短轮询，长轮询提供了更快的实时性和更低的网络流量。
需要在服务器端实现保持连接的机制，可能会增加服务器的负载。
虽然请求少了,但是还要频繁建立和关闭链接

Comet是什么

保持长链接,在返回请求后继续保持连接打开,并允许服务器使用持久连接将数据以流的形式主动发送给客户端。

websocket为什么是神

WebSocket是Html5定义的一个新协议，与传统的http协议不同，该协议可以实现服务器与客户端之间全双工通信。简单来说，首先需要在客户端和服务器端建立起一个连接，这部分需要http。连接一旦建立，客户端和服务器端就处于平等的地位，可以相互发送数据，不存在请求和响应的区别。

websocket可以

双向实时通信
允许在单个,长时间的连接上进行双向实时通信. 在需要快速实时更新的应用程序里,比http更高效,而且建立连接后客户端与服务器端是完全平等的，可以互相主动请求
降低延迟
链接一旦建立便会保持开放,数据可以在客户端和服务器端之间以比http更低的延迟进行传输
更高效的资源利用
可以减少重复请求和响应的开销,因为他的连接只需要建立一次
不用发送http header就能交换数据
HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低。Websocket协议通过第一个request建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据

实操环节

虽然说是实操环节,但是我在这就简单说明一下实操的步骤,感兴趣可以看【10 分钟理论 + 实操搞懂 WebSocket】 https://www.bilibili.com/video/BV1ac411c7vr/?share_source=copy_web&vd_source=64698271e543eb5149301ff926e69c40

js中websocket的库:Socket.io

建立连接过程：HTTP发送一次常规get请求, 在请求头中带上Upgrade告诉服务器要从HTTP升级成websocket,
经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等；连接建立成功，客户端和服务端可以随时进行数据交互。
服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；
客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。
前端中的代码:
创建websocket实例, 指定websocket服务器地址, 也可以调用一些函数,如socket.onopen等,不再赘述
后端中的代码
略