对 WebSocket 的理解+应用场景

这篇具有很好参考价值的文章主要介绍了对 WebSocket 的理解+应用场景。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简版

WebSocketHTML5 下一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的。

WebSocketHTTP 一样通过已建立的 TCP 连接来传输数据,但是它和 HTTP 最大不同是:

WebSocket 是一种双向通信协议。在建立连接后,WebSocket 服务器端和客户端都能主动向对方发送或接收数据,就像 Socket 一样;

WebSocket 需要像 TCP 一样,先建立连接,连接成功后才能相互通信。

相比 HTTP 长连接,WebSocket 有以下特点:

是真正的全双工方式,建立连接后客户端与服务器端是完全平等的,可以互相主动请求。而 HTTP长连接 基于 HTTP,是传统的客户端对服务器发起请求的模式。

HTTP长连接中,每次数据交换除了真正的数据部分外,服务器和客户端还要大量交换 HTTP header,信息交换效率很低。Websocket 协议通过第一个 request 建立了 TCP 连接之后,之后交换的数据都不需要发送 HTTP header 就能交换数据,这显然和原有的 HTTP 协议有区别,所以它需要对服务器和客户端都进行升级才能实现(主流浏览器都已支持 HTML5)。

此外还有 multiplexing、不同的 URL 可以复用同一个 WebSocket 连接等功能。这些都是 HTTP 长连接不能做到的。

WebSocket 优势:

浏览器和服务器只需要要做一个握手的动作,在建立连接之后,双方可以在任意时刻,相互推送信息。同时,服务器与客户端之间交换的头信息很小。

总结一下 Websocket 和 HTTP 的区别:

相同点:

  • 都是基于 tcp 的,都是可靠性传输协议

  • 都是应用层协议

不同点:

  • WebSocket 是双向通信协议,模拟 Socket 协议,可以双向发送或接受信息;HTTP 是单向的。

  • WebSocket 是需要浏览器和服务器握手进行建立连接的;而 http 是浏览器发起向服务器的连接,服务器预先并不知道这个连接。

WebSocket 主要应用场景有以下几类:

  • 即时通讯(QQ、微信、客服)
  • 弹幕
  • 协同编辑
  • 体育实况更新
  • 股票基金报价实时更新
  • 可视化大屏数据实时更新

一、是什么

对 WebSocket 的理解+应用场景

WebSocket,是一种网络传输协议,位于OSI模型的应用层。可在单个TCP连接上进行全双工通信,能更好的节省服务器资源和带宽并达到实时通迅

客户端和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输

对 WebSocket 的理解+应用场景

从上图可见,websocket服务器与客户端通过握手连接,连接成功后,两者都能主动的向对方发送或接受数据

而在websocket出现之前,开发实时web应用的方式为轮询

不停地向服务器发送 HTTP 请求,问有没有数据,有数据的话服务器就用响应报文回应。如果轮询的频率比较高,那么就可以近似地实现“实时通信”的效果。轮询的缺点也很明显,反复发送无效查询请求耗费了大量的带宽CPU资源

二、特点

全双工

通信允许数据在两个方向上同时传输,它在能力上相当于两个单工通信方式的结合

例如指 A→B 的同时 B→A ,是瞬时同步的

二进制帧

采用了二进制帧结构,语法、语义与 HTTP 完全不兼容,相比http/2WebSocket更侧重于“实时通信”,而HTTP/2 更侧重于提高传输效率,所以两者的帧结构也有很大的区别

不像 HTTP/2 那样定义流,也就不存在多路复用、优先级等特性

自身就是全双工,也不需要服务器推送

协议名

引入ws和wss分别代表明文和密文的websocket协议,且默认端口使用 80 或 443,几乎与http一致

ws://www.chrono.com
ws://www.chrono.com:8080/srv
wss://www.chrono.com:445/im?user_id=xxx

握手

WebSocket也要有一个握手过程,然后才能正式收发数据

客户端发送数据格式如下:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
  • Connection:必须设置 Upgrade,表示客户端希望连接升级
  • Upgrade:必须设置 Websocket,表示希望升级到 Websocket 协议
  • Sec-WebSocket-Key:客户端发送的一个 base64 编码的密文,用于简单的认证秘钥。要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept 应答,否则客户端会抛出错误,并关闭连接
  • Sec-WebSocket-Version :表示支持的 Websocket版本

服务端返回的数据格式:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chat

HTTP/1.1 101 Switching Protocols:表示服务端接受WebSocket协议的客户端连接

Sec-WebSocket-Accep:验证客户端请求报文,同样也是为了防止误连接。具体做法是把请求头里“Sec-WebSocket-Key”的值,加上一个专用的 UUID,再计算摘要

优点

  • 较少的控制开销:数据包头部协议较小,不同于 http 每次请求需要携带完整的头部
  • 更强的实时性:相对于 HTTP 请求需要等待客户端发起请求服务端才能响应,延迟明显更少
  • 保持创连接状态:创建通信后,可省略状态信息,不同于 HTTP 每次请求需要携带身份验证
  • 更好的二进制支持:定义了二进制帧,更好处理二进制内容
  • 支持扩展:用户可以扩展 websocket 协议、实现部分自定义的子协议
  • 更好的压缩效果Websocket 在适当的扩展支持下,可以沿用之前内容的上下文,在传递类似的数据时,可以显著地提高压缩率

三、应用场景

基于websocket的事实通信的特点,其存在的应用场景大概有:文章来源地址https://www.toymoban.com/news/detail-471920.html

  • 弹幕
  • 媒体聊天
  • 协同编辑
  • 基于位置的应用
  • 体育实况更新
  • 股票基金报价实时更新

参考文献

  • https://zh.wikipedia.org/wiki/WebSocket
  • https://www.oschina.net/translate/9-killer-uses-for-websockets

到了这里,关于对 WebSocket 的理解+应用场景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【温故而知新】HTML5 WebSocket

    HTML5是HTML的最新版本,它引入了许多新的元素和功能,以适应现代网页开发的需求。以下是HTML5的一些主要特点: 新增语义元素 :HTML5引入了许多新的语义元素,如 header、footer、article、section 等,这些元素有助于提高网页的结构化和可访问性。 媒体支持 :HTML5引入了 audio 和

    2024年01月18日
    浏览(34)
  • Node.js+html5实现WebSocket服务示例

    2024年02月11日
    浏览(37)
  • HTML5 WebSocket介绍与基本使用(解析服务端返回的二进制数据)

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行

    2024年02月15日
    浏览(31)
  • HTML5的应用现状与发展前景

    HTML5,作为Web技术的核心,已经深深地改变了我们看待和使用Web的方式。它不仅提供了数不尽的新特性和功能,还使得Web设计和开发更加互动、更加直观。这篇文章将探讨HTML5的当前应用现状,以及它的未来发展前景。 HTML5的应用现状 HTML5的应用现状可以从多个方面来看,包括

    2024年02月16日
    浏览(35)
  • HTML5:构建现代、交互式的Web应用

    HTML5作为最新版本的HTML标准,引入了许多令人兴奋的特性和改进,使Web开发更加灵活和强大。本篇博客将围绕HTML5的核心功能展开,包括语义化标签、多媒体支持、表单增强、Canvas绘图、地理定位、本地存储等方面。我们将通过详细的代码示例和实用的技巧,帮助你全面掌握

    2024年02月12日
    浏览(32)
  • 【温故而知新】HTML5 应用程序缓存

    HTML5是HTML的最新版本,它引入了许多新的元素和功能,以适应现代网页开发的需求。以下是HTML5的一些主要特点: 新增语义元素 :HTML5引入了许多新的语义元素,如 header、footer、article、section 等,这些元素有助于提高网页的结构化和可访问性。 媒体支持 :HTML5引入了 audio 和

    2024年01月23日
    浏览(50)
  • 编程笔记 html5&css&js 036 CSS应用方式

    如何在网页中使用CSS?实际上有三种方式。 有三种插入样式表的方法: 外部 CSS 内部 CSS 行内 CSS 通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观! 每张 HTML 页面必须在 head 部分的 link 元素内包含对外部样式表文件的引用。 外部样式在 HTML 页面 head 部分内

    2024年01月22日
    浏览(43)
  • 网页设计(八)HTML5基础与CSS3应用

    当当网企业用户注册页面 改版后当当网企业用户注册页面 验证码 HTML5新增加结构元素设计布局页面 HAB公司行业案例局部初始页面 HAB公司行业案例局部鼠标盘旋时特效页面 鼠标盘旋时指向“查看更多”时超链接效果 文字素材: “服务浦东政务”“HAB公司连续多年保持政务信

    2024年01月17日
    浏览(45)
  • HTML5与Java交互:实现动态Web应用的完美融合

    HTML5和Java之间的交互是通过使用JavaScript和Java的技术进行实现的。以下是一些常见的HTML5与Java交互的方式: 使用JavaScript与Java Applet交互: Java Applet是一种以Java语言编写的小型应用程序,可以通过在HTML页面中嵌入applet标签来加载和执行。通过JavaScript与Java Applet交互,可以在网

    2024年02月04日
    浏览(56)
  • LeaferUI - 性能强悍、简洁轻量的 HTML5 Canvas 2D 图形 UI 绘图框架,用于 web 端在线图形设计、图表、白板、数据可视化等场景

    最近想做一个轻巧的在线画册和海报设计工具,最近发布的 LeaferUI 特别适合这样的场景。 LeaferUI 是什么? Leafer UI 是基于 LeaferJS 开发的一套绚丽多彩的 UI 绘图框架,帮助开发者快速生成图形界面。LeaferJS 是一个基于 HTML5 Canvas 开发的 2D 绘图渲染引擎,在 web 上绘图性能非

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包