websocket原理及简单入门

发布于:2024-04-19 ⋅ 阅读:(26) ⋅ 点赞:(0)

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

轮询是什么

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

短轮询是什么

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

长轮询(long poll)是什么

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

Comet是什么

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

websocket为什么是神

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

websocket可以

  1. 双向实时通信
    允许在单个,长时间的连接上进行双向实时通信. 在需要快速实时更新的应用程序里,比http更高效,而且建立连接后客户端与服务器端是完全平等的,可以互相主动请求
  2. 降低延迟
    链接一旦建立便会保持开放,数据可以在客户端和服务器端之间以比http更低的延迟进行传输
  3. 更高效的资源利用
    可以减少重复请求和响应的开销,因为他的连接只需要建立一次
  4. 不用发送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

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

webSocket心跳机制:

为什么使用心跳机制:为了保持WebSoket稳定的长连接,在建立连接之后,服务端和客户端之间通过心跳包来保持连接状态,以防止连接因为长时间没有数据传输而被切断

什么是心跳包:心跳包是一种特殊的数据包,它不包含任何实际数据,只是用来维持连接状态的

怎么使用:通常情况下心跳包由客户端和服务端定期发送一个空的数据帧,以确保双方的链接仍然有效,避免链接因为长时间没有数据传输而被中断,如果长时间没有收到对方的心跳包就可以认为连接已经断开需要重新建立连接。

webSoket限制:不提供加密功能,不安全,可以用SSL协议对来webSoket进行加密,确保数据安全,也可以在服务端限制权限设置白名单或者黑名单只允许特定地址或者域名的客户端进行链接。

webSocket的限制

不提供加密功能
浏览器的限制:不支持IE10以前的版本
对服务器要求高


网站公告

今日签到

点亮在社区的每一天
去签到