“WebSocket 是一项先进的技术,它可以在用户的浏览器和服务器之间打开交互式通信会话。通过 WebSocket,您可以向服务器发送消息并实时接收响应,而无需通过传统的轮询服务器的方式来获取服务器上的响应。”

这是一段 Mozilla 在开发人员文档页面上对于 WebSocket 的介绍。简单的来说,WebSocket 可以使浏览器在一段时间内保持与服务器的连接,它实现了浏览器与服务器全双工(full-duplex)通信,即允许服务器主动发送信息给客户端。对于例如动态更新位置数据、拉取热点新闻、在浏览器中构建高性能游戏以及收集更多点击流数据等等需要保持实时数据交换的场景,这个特性就特别地友好。

WebSocket 解决了什么问题

相信大家都有遇到过这样的场景,服务器上有些资源经常会进行更新,客户端需要尽量及时的获取到这些更新,在传统的 HTTP 协议中,如果客户端不发起一个 Request 请求,那么服务器是没有办法向客户端主动发起数据的。那么我们是如何解决客户端和服务器之间的数据更新问题的呢?

比较常见的做法就是 AJAX 轮询 。客户端设置一个定时器,在一定时间内客户端会向服务器发起一个 AJAX 请求,询问服务器是否有更新,如果有更新就及时返回数据。通过定时器,客户端可以反复的去轮询服务器上相关的资源有没有更新,从而实现近乎“实时”的通讯。

AJAX 轮询虽然缩短了客户端和服务器之间数据同步的延迟时间,但同时也带来了一些性能消耗的问题。例如,如果客户端较多,那么服务器同时接收轮询请求就会增多,这就会对服务器造成巨大的压力,轮询所产生的流量,也会对网络造成一定的消耗,另外服务器资源更新频率较为频繁,但客户端定时器时间间隔较大,或者服务器长时间没有更新资源,这就会导致资源更新不及时、带宽耗费等等问题。

但有了 WebSocket 之后就不同了,在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。这样,即使没有来自客户端的明确请求,服务器也可以向客户端发送信息,实现反向的通讯。这就是服务器与客户端之间的“全双工”通信。

点击此处可以体验一下 WebSocket 的魅力。

WebSocket 工作原理

客户端(或多个客户端)先通过向服务器发送 HTTP 请求开始,请求中包括了 WebSocket 支持的版本号、协议的版本号、原始地址、主机地址等等一些字段给服务器端,向服务器表明客户端正在尝试建立 WebSocket 连接。

如果服务器检查数据包数据和格式正确,客户端和服务器端的协议版本号匹配,就接受本次握手连接,并给出相应的数据回复,同样回复的数据包也是采用 HTTP 协议传输。等待客户端确认后,就将初始 HTTP 连接升级为 WebSocket 连接,并且为每个客户端维护该连接,从而实现双向通讯。

WebSocket 的优势

比起传统的轮询方式,WebSocket 可以更好的节省服务器资源和带宽,并且能够进行更加实时地通讯,优势如下:

  • 减小带宽开销。 服务器和客户端在连接建立后,相比起 HTTP 请求,交换数据时用于协议控制的数据包头部相对较小,一般只有 2 字节;

  • 增强实时性。 服务器可以随时主动给客户端下发数据,相对于 HTTP 请求需要等待客户端发起请求服务端才能响应,延迟明显更少,和传统的轮询比较,WebSocket 也可以在短时间内更有效率地传递数据;

  • 维持连接状态。 在一些需要身份认证的场景下, HTTP 请求可能需要在每个请求都携带状态信息(服务器不记录每次的请求和响应信息),而 WebSocket 一次连接建立后就会保持住会话状态,这就使其成为一种有状态的协议,后续通信时就可以省略部分状态信息;

  • 更灵活的扩展支持。 根据 RFC6455 协议,开发者可以对 WebSocket 自定义二进制帧,相对 HTTP,可以更轻松地处理二进制内容,此外开发者也自行扩展协议、实现部分自定义的子协议。

  • 更好的压缩效果。 WebSocket 在适当的扩展支持下,可以沿用之前内容的上下文,在传递类似的数据时,可以显著地提高压缩率。

WebSocket 有这么多优势,那么它适用于哪些场景呢?下面来简单了解下:

  • 需要及时响应的场景。 当客户端需要对服务端发生的改变做出快速响应(尤其是客户端无法预测的响应)时,WebSocket 是非常适合的。例如开发一个客服系统,这往往要求实现多个用户实时沟通。如果使用 WebSocket,则每个对话都可以实时发送和接收消息。与 HTTP 相比,WebSocket 不需要考虑发送和接收的每个消息的 HTTP 请求/响应导致的开销,从而会有更高的执行效率。

  • 需要实时查询的场景。 例如一名篮球迷想要查询比赛结果,如果比赛是上周结束的,那么比赛结果是固定的,HTTP 在这种情况下就非常适合。但是,如果是当前正在进行的比赛,得分会不断变化,并且更新频繁,在这种情况下,WebSocket 就是更好的选择。

  • 小负载的高频消息传递。 如今越来越多的开发人员正在通过移动设备的 GPS 功能来记录 Web 应用程序的方位感知。如果我们需要记录一段时间内用户的位置信息,高频率发送更加细粒度的位置数据,从而起到实时分享功能(例如运动类 APP),WebSocket 所使用的 TCP 连接会让数据交换飞起来。

  • 多人协同的场景。 例如近几年发展迅速的在线教育,学生可以足不出户,即可与老师以及其他同学一起进行实时沟通与交流,诸如布置作业、师生互动、问题讨论等等强实时交互类的场景都可交由 WebSocket 协议支撑完成,从而满足低延迟,高及时的场景要求。

目前又拍云已经可以支持 WebSocket 无缝接入,依托于又拍云 CDN 1100+ 全球节点,10Tbps 带宽储备,国内主流运营商支持,通过 TCP 协议优化、链路优化、内容优化、智能调度等技术手段,大大提升加速性能。全自助化配置管理,配置策略全网 10 秒内生效;提供全方位的 API 接口,支持多样化管理,只需简单的配置,就可以迅速接入,享受全站加速。

推荐阅读

喜大普奔,又拍云全新产品 WebSocket 上线啦
全球 43 亿 IPv4 地址已耗尽!IPv6,刻不容缓

说说 WebSocket,3 分钟让你全面认识它的更多相关文章

  1. nginx的重试机制以及nginx常用的超时配置说明

    nginx的重试机制 现在对外服务的网站,很少只使用一个服务节点,而是部署多台服务器,上层通过一定机制保证容错和负载均衡. nginx就是常用的一种HTTP和反向代理服务器,支持容错和负载均衡. ng ...

  2. WebSocket协议:5分钟从入门到精通

    一.内容概览 WebSocket的出现,使得浏览器具备了实时双向通信的能力.本文由浅入深,介绍了WebSocket如何建立连接.交换数据的细节,以及数据帧的格式.此外,还简要介绍了针对WebSocke ...

  3. 五分钟学会HTML5的WebSocket协议

    1.背景   很多网站为了实现推送技术,所用的技术都是Ajax轮询.轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器.这种传统的模式带来很明显的缺点 ...

  4. 10分钟学会web通讯的四种方式,短轮询、长轮询(comet)、长连接(SSE)、WebSocket

    一般看到标题我们一般会产生下面几个问题??? 什么是短轮询? 什么是长轮询? 长连接又是什么? wensocket怎么实现呢? 他们都能实现web通讯,区别在哪呢,哪个好用呢? 接下来我们就一个个来了 ...

  5. 三分钟搭建websocket实时在线聊天,项目经理也不敢这么写

    我们先看一下下面这张图: 可以看到这是一个简易的聊天室,两个窗口的消息是实时发送与接收的,这个主要就是用我们今天要讲的websocket实现的. websocket是什么? websocket是一种网 ...

  6. 5分钟入门websocket

    5 个步骤快速掌握消息发送和接收 获取您的 appkey 先注册一个irealtime账号,然后登录到后台管理端,创建一个免费应用,就能得到您的 appkey.点击注册 各种前端生态端集成 ireal ...

  7. Spring 4 官方文档学习(十四)WebSocket支持

    个人提示:如果需要用到页面推送,高频且要低延迟,WebSocket无疑是最佳选择.否则还是轮询和long polling吧. 做了一个小demo放在码云上,有兴趣的可以看一下,简单易懂:websock ...

  8. 使用四种框架分别实现百万websocket常连接的服务器

    著名的 C10K 问题提出的时候, 正是 2001 年.这篇文章可以说是高性能服务器开发的一个标志性文档,它讨论的就是单机为1万个连接提供服务这个问题,当时因为硬件和软件的**,单机1万还是一个非常值 ...

  9. WebSocket实时异步通信

    WebSocket实时异步通信 [一]WebSocket简介 WebSocket是HTML5推出一个协议规范,用来B/S模式中服务器端和客户端之间进行实时异步通信. 众所周知,传统的HTTP协议中,服 ...

随机推荐

  1. useReducer代替Redux

    创建state.js import React, { createContext,useContext,useReducer } from 'react'; export const countTex ...

  2. HTML的footer置于页面最底部

    vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...

  3. 网络图片的获取以及二级缓存策略(Volley框架+内存LruCache+磁盘DiskLruCache)

    在开发安卓应用中避免不了要使用到网络图片,获取网络图片很简单,但是需要付出一定的代价——流量.对于少数的图片而言问题不大,但如果手机应用中包含大量的图片,这势必会耗费用户的一定流量,如果我们不加以处理 ...

  4. springboot+logback日志输出企业实践(上)

    目录 1.引言 2.logback简介 3. springboot默认日志框架-logback 3.1 springboot示例工程搭建 3.2 日志输出与基本配置 3.2.1 日志默认输出 3.2. ...

  5. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  6. spring boot 中@Mapper和@Repository的区别

    0--前言 @Mapper和@Repository是常用的两个注解,两者都是用在dao上,两者功能差不多,容易混淆,有必要清楚其细微区别: 1--区别 @Repository需要在Spring中配置扫 ...

  7. UML类图绘制

    UML图简介 含义:UML-Unified Modeling Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言 主要模型: 功能模型:从用户的角度展示系统 ...

  8. 大型情感剧集Selenium:9_selenium配合Pillow完成浏览器局部截图

    网页截图 上次提到了selenium的四种截图方法,最终截图了整张网页.但很多时候,我们仅仅需要截图部分的内容.比如截取某个关键信息,或者现在已经不常见的截图验证码(现在都是各种按规则点击-).那么我 ...

  9. 华为云垃圾分类大赛,让AI 帮你“见圾行事”

    [摘要] "你是什么垃圾"已经out了,我们来看0看谁是垃圾之王?! 当各位听说深圳实行垃圾分类政策时,是不是虎躯一震,每天焦虑得想搬家? -稳住,别慌! 救兵来啦 华为云人工智能 ...

  10. 基于webpack实现多html页面开发框架六 提取公共代码

    一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...