WebSocket与HTTP

目录

一、HTTP

二、WebSocket

为什么需要websocket? 疑问? 我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

WebSocket与Socket的关系

工作原理

特点

Websocket心跳机制

作用

原理

详细流程

实现方式

WebSocket重连

三、WebSocket与HTTP的联系和区别

相同点

区别


一、HTTP

HTTP协议介绍请移步我的另一篇博客HTTP协议简单介绍-CSDN博客

二、WebSocket

WebSocket是一种实时通信协议,它允许客户端和服务器之间进行双向通信,而不需要每次请求都重新建立连接。WebSocket是HTML5中的新功能,它建立在HTTP协议之上,通过握手协议来建立持久化的连接。WebSocket的握手协议比HTTP的握手协议更简单,因为WebSocket的连接建立后,客户端和服务器之间的数据交换是以二进制形式进行的,而不需要像HTTP那样进行文本解析。

为什么需要websocket? 疑问? 我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

因为 HTTP 协议有一个缺陷:通信只能由客户端发起。我们都知道轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开), 因此websocket应运而生。

WebSocket与Socket的关系

Socket其实并不是一个协议,而是为了方便使用TCP或UDP而抽象出来的一层,是位于应用层和传输控制层之间的一组接口。

“Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口,提供一套调用TCP/IP协议的API。

在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面,对用户来说,一组简单的接口就是全部,让Socket去组织数据,以符合指定的协议。”

当两台主机通信时,必须通过Socket连接,Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议,IP协议的连接则依赖于链路层等更低层次。

WebSocket就像HTTP一样,则是一个典型的应用层协议。

工作原理

浏览器发出webSocket的连线请求,服务器发出响应,这个过程称为握手,握手的过程只需要一次,就可以实现持久连接。

WebSocket 的工作原理如下:

  • 客户端向服务器发送一个 HTTP 请求,请求建立 WebSocket 连接。
  • 服务器收到请求后,会返回一个 HTTP 响应,响应中包含一个 101 Switching Protocols 状态码,表示同意建立 WebSocket 连接。
  • 服务器和客户端通过 TCP 连接进行通信,数据格式为 JSON、二进制或文本。

特点

WebSocket是真正的全双工通信机制,建立连接后客户端与服务器端是完全平等的,可以互相主动请求。而HTTP长连接基于HTTP,是传统的客户端对服务器发起请求的模式。 HTTP长连接中,每次数据交换除了真正的数据部分外,服务器和客户端还要大量交换HTTP header,消息交换效率低。

Websocket协议通过第一个request建立了TCP连接之后,之后交换的数据都不需要发送 HTTP header就能交换数据,这显然和原有的HTTP协议有区别,所以它需要对服务器和客户端都进行升级才能实现,当然在现在这个时代,我们的主流浏览器都是支持HTML5的,使用时我们直接使用即可。

  • 实时性:服务器可以主动向客户端发送消息,实现实时通信。
  • 双向通信:客户端和服务器之间可以同时发送和接收数据。
  • 性能:WebSocket 连接建立后,数据传输效率更高,减少了 HTTP 请求的次数。
  • 兼容性:WebSocket 协议在大多数浏览器中得到了支持,无需额外插件。

Websocket心跳机制

作用

Websocket 长连接有默认的超时时间(1分钟),也就是说,超过一定的时间客户端和服务器之间没有发生任何消息传输,连接会自动断开;除此之外,服务器或防火墙一般也会在一段时间不活动并超时之后终止外部的长连接。因此,若需要使客户端一直保持连接,就需要设置心跳保活机制了。

心跳机制可以使 WebSocket 连接保持长连接,避免断开连接的情况发生。同时,心跳机制也可以检查WebSocket连接的状态,及时处理异常情况。还可以减少WebSocket连接及服务器资源的消耗。

原理

是利用心跳包及时发送和接收数据,保证WebSocket长连接不被断开。

详细流程

  1. 客户端建立WebSocket连接。
  2. 客户端向服务器发送心跳数据包(心跳包是指在一定时间间隔内,WebSocket发送的空数据包),服务器接收并返回一个表示接收到心跳数据包的响应。
  3. 当服务器没有及时接收到客户端发送的心跳数据包时,服务器会发送一个关闭连接的请求。
  4. 服务器定时向客户端发送心跳数据包,客户端接收并返回一个表示接收到心跳数据包的响应。
  5. 当客户端没有及时接收到服务器发送的心跳数据包时,客户端会重新连接WebSocket

实现方式

使用setInterval定时发送心跳包。对服务器造成很大的压力,因为即使WebSocket连接正常,也要定时发送心跳包,从而消耗服务器资源。

在前端监听到WebSocket的onclose()事件时,重新创建WebSocket连接。减轻了服务器的负担,但是在重连时可能会丢失一些数据。

WebSocket重连

重连意思就是在WebSocket断开之后重新建立连接,这里指由于异常断开需要重新连接。

常用实现方法有下:

  1. 前端监听WebSocket的onclose()事件,重新创建WebSocket连接。
  2. 使用WebSocket插件或库,例如Sockjs、Stompjs等。
  3. 使用心跳机制检测WebSocket连接状态,自动重连。
    1. 通过WebSocket心跳机制,实现重连:在建立长连接的时候开启心跳 > 通过和服务端发送信息,得到服务端给返回的信息,然后重置心跳 > 清除时间,再重新开启心跳。(如果网络断开的话,会执行方法,重新连接)
  4. 使用断线重连插件或库,例如ReconnectingWebSocket等。

三、WebSocket与HTTP的联系和区别

相同点

WebSocket与HTTP在某些方面有一些相同点,主要体现在协议的基础结构和功能上。以下是它们的主要相同点:

  1. 传输协议: 两者都建立在TCP/IP协议之上。这意味着它们都利用TCP作为传输层协议来确保数据的可靠传输。
  2. 初始连接: WebSocket在建立连接的初始阶段使用HTTP请求/响应模型。客户端发送HTTP请求,服务器回复HTTP响应来确认协议的切换。
  3. HTTP Header: WebSocket在握手过程中会使用HTTP头信息(如UpgradeConnection等)。这些头部信息在握手时用于协商协议的切换。
  4. 安全性: WebSocket和HTTP都遵循浏览器的同源策略。这意味着跨域请求受到限制,除非服务器明确允许特定的源进行连接。
  5. 无状态特性: HTTP是一种无状态协议,每次请求都是独立的。虽然WebSocket允许在建立连接后保持状态,但在初始的HTTP握手阶段,WebSocket也表现出无状态的特征。
  6. 使用场景: 两者都被广泛应用于现代网络应用中。HTTP通常用于网页请求,而WebSocket则用于需要实时交互的应用,如在线聊天、实时数据推送等。
  7. 功能层级: HTTP和WebSocket都位于应用层,负责处理应用级的请求和响应。它们都是用于客户端和服务器之间的通信协议。

区别

总的来说,HTTP适用于传统的请求-响应模型,而WebSocket适用于需要实时双向通信的应用场景。在一些现代Web应用中,它们可能会结合使用,例如使用HTTP建立连接,然后切换到WebSocket进行实时通信,以充分利用它们各自的优势。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值