WebSocket从入门到精通

WebSocket 是什么?

WebSocket是HTML5规范提出的一种协议;目前除了IE浏览器,其他浏览器都基本支持。它是一种协议,万变不离其宗,也是基于TCP协议的,和HTTP协议是并存的两种协议。HTML5 Web Sockets规范定义了Web Sockets API,支持页面使用Web Socket协议与远程主机进行全双工的通信。它引入了WebSocket接口并且定义了一个全双工的通信通道,通过一个单一的套接字在Web上进行操作。

HTML5 Web Sockets以最小的开销高效地提供了Web连接。相较于经常需要使用推送实时数据到客户端甚至通过维护两个HTTP连接来模拟全双工连接的旧的轮询或长轮询(Comet)来说,这就极大的减少了不必要的网络流量与延迟。

要使用HTML5 Web Sockets从一个Web客户端连接到一个远程端点,你要创建一个新的WebSocket实例并为之提供一个URL来表示你想要连接到的远程端点。
该规范定义了ws://以及wss://模式来分别表示WebSocket和安全WebSocket连接,这就跟http:// 以及https:// 的区别是差不多的。
一个WebSocket连接是在客户端与服务器之间HTTP协议的初始握手阶段将其升级到Web Socket协议来建立的,其底层仍是TCP/IP连接。

WebSocket与HTTP的关系

关系图:
在这里插入图片描述

相同点

都是一样基于TCP的,都是可靠性传输协议。
都是应用层协议。

区别

WebSocket是双向通信协议,模拟Socket协议,可以双向发送或接受信息。HTTP是单向的。
WebSocket是需要浏览器和服务器握手进行建立连接的。而http是浏览器发起向服务器的连接,服务器预先并不知道这个连接。

联系

WebSocket在建立握手时,数据是通过HTTP传输的。但是建立之后,在真正传输时候是不需要HTTP协议的。

总结

在WebSocket中,只需要服务器和浏览器通过HTTP协议进行一个握手的动作,然后单独建立一条TCP的通信通道进行数据的传送。

在这里插入图片描述

WebSocket连接的过程

  • 首先,客户端发起http请求,经过3次握手后,建立起TCP连接;http请求里存放WebSocket支持的版本号等信息,如:Upgrade、Connection、WebSocket-Version等;
  • 然后,服务器收到客户端的握手请求后,同样采用HTTP协议回馈数据;
  • 最后,客户端收到连接成功的消息后,开始借助于TCP传输信道进行全双工通信。

在这里插入图片描述

WebSocket有哪些优点?

  • 支持双向通信,实时性更强。
  • 更好的二进制支持。
  • 较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的包头只有2~10字节(取决于数据包长度),客户端到服务端的的话,需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
  • 支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议。(比如支持自定义压缩算法等)

WebSocket连接如何保持?

WebSocket为了保持客户端、服务端的实时双向通信,需要确保客户端、服务端之间的TCP通道保持连接没有断开。然而,对于长时间没有数据往来的连接,如果依旧长时间保持着,可能会浪费包括的连接资源。
但不排除有些场景,客户端、服务端虽然长时间没有数据往来,但仍需要保持连接。这个时候,可以采用心跳来实现。

发送方->接收方:ping
接收方->发送方:pong

ping、pong的操作,对应的是WebSocket的两个控制帧,opcode分别是0x9、0xA。
举例,WebSocket服务端向客户端发送ping,只需要如下代码(采用ws模块)

ws.ping('', false, true);

nginx如何代理websocket?
需要修改nginx的配置文件,代理请求后端服务器的请求头设置:

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;

HTTP的Upgrade协议头机制用于将连接从HTTP连接升级到WebSocket连接,Upgrade机制使用了Upgrade协议头和Connection协议头;为了让Nginx可以将来自客户端的Upgrade请求发送到后端服务器,Upgrade和Connection的头信息必须被显式的设置。
通过Http升级机制将Http升级为WebSocket。Nginx代理服务器通过修改配置的方式解决了WebSocket属于hop-by-hop协议的问题、并通过保持分别与客户端和服务端的连接一直处于打开状态从而实现WebSokcet的代理

何时使用WebSocket

  • 即时Web应用程序:即时Web应用程序使用一个Web套接字在客户端显示数据,这些数据由后端服务器连续发送。在WebSocket中,数据被连续推送/传输到已经打开的同一连接中,这就是为什么WebSocket更快并提高了应用程序性能的原因。 例如在交易网站或比特币交易中,这是最不稳定的事情,它用于显示价格波动,数据被后端服务器使用Web套接字通道连续推送到客户端。
  • 游戏应用程序:在游戏应用程序中,你可能会注意到,服务器会持续接收数据,而不会刷新用户界面。屏幕上的用户界面会自动刷新,而且不需要建立新的连接,因此在WebSocket游戏应用程序中非常有帮助。
  • 聊天应用程序:聊天应用程序仅使用WebSocket建立一次连接,便能在订阅户之间交换,发布和广播消息。它重复使用相同的WebSocket连接,用于发送和接收消息以及一对一的消息传输。

不能使用WebSocket的场景

如果我们需要通过网络传输的任何实时更新或连续数据流,则可以使用WebSocket。如果我们要获取旧数据,或者只想获取一次数据供应用程序使用,则应该使用HTTP协议,不需要很频繁或仅获取一次的数据可以通过简单的HTTP请求查询,因此在这种情况下最好不要使用WebSocket。
注意:如果仅加载一次数据,则RESTful Web服务足以从服务器获取数据。

WebSocket能干些啥?
WebSocket协议:5分钟从入门到精通
什么是WebSocket,它与HTTP有何不同?
揭开WebSocket的神秘面纱:利用Wireshark的抓包分析
Nginx如何支持WebSocket

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/22159.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot 整合RabbitMQ

SpringBoot 整合 RabbitMQ 概念 2007 年发布,是一个在 AMQP(高级消息队列协议)基础上完成的,可复用的企业消息系统,是当前最主流的消息中间件之一。 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue 高级消息队列协议…

gma 2 教程(二)数据操作:3. 支持生成的栅格格式信息

为了方便了解和选择输出栅格格式、配置高级创建选项,下表列出了gma可以生成(复制/创建/转换)的所有栅格格式的主要信息: 格式名生成模式支持数据类型扩展名多维栅格支持色彩映射表支持的数据类型多波段支持压缩模式AAIGrid复制By…

微擎后台getshell,低权限也可以

/web/index.php?csite&aeditor 这个文件可以编辑html,然后前台会解析成php 没测试最新版 比如编辑专题:/web/index.php?csite&aeditor&dopage&multiid0 上架抓包 改html内容为php 复制前台url 访问之 博客原文: 微擎后…

4、Kubernetes 架构、理解 k8s 架构

kubeadm 用于初始化 Cluster。 kubectl 是 Kubernetes 命令行工具。通过 kubectl 可以部署和管理应用,查看各种资源,创建、删除和更新各种组件。 kubelet 运行在 Cluster 所有节点上,负责启动 Pod 和容器。 Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Ku…

Python——— 面向对象

(一)初识面向对象 Python完全采用了面向对象的思想,是真正面向对象的编程语言, 完全支持面向对象的基本功能,例如:继承、多态、封装等。 Python 支持面向过程、面向对象、函数式编程等多种编程范 式。 Pyth…

6.2Java EE——Spring的入门程序

下面通过一个简单的入门程序演示Spring框架的使用,要求在控制台打印“张三,欢迎来到Spring”,实现步骤具体如下。 1、在IDEA中创建名称为chapter06的Maven项目,然后在pom.xml文件中加载需使用到的Spring四个基础包以及Spring依赖…

SpringCloud Alibaba微服务分布式架构组件演变

文章目录 1、SpringCloud版本对应1.1 技术选型依据1.2 cloud组件演变: 2、Eureka2.1 Eureka Server : 提供服务注册服务2.2 EurekaClient : 通过注册中心进行访问2.3 Eureka自我保护 3、Eureka、Zookeeper、Consul三个注册中心的异同点3.1 CP…

Amazon 上的数字孪生:使用 L3 预测性数字孪生来预测“行为”

在上一篇博文中,我们讨论了数字孪生的定义和框架,这与我们的客户在其应用中使用数字孪生的方式一致。我们将数字孪生定义为“单个物理系统的动态数字表示,它通过数据进行动态更新以模仿物理系统的真实结构、状态和行为,从而加快获…

2023 node 接入腾讯云短信服务,实现发送短信功能

1、在 腾讯云开通短信服务,并申请签名和正文模板 腾讯云短信 https://console.cloud.tencent.com/smsv2 a、签名即是短信的开头。例如 【腾讯云短信】xxxxxxx; b、正文模板即短信内容, 变量部分使用{1}, 数字从1开始累推。例如&a…

(数组与矩阵) 剑指 Offer 03. 数组中重复的数字 ——【Leetcode每日一题】

❓ 剑指 Offer 03. 数组中重复的数字 难度:简单 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0~n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出…

图像分类论文阅读

该论文通过结合VGG-19和VIT模型,实现乳腺超声图像的分类Breast Ultrasound Images Dataset | Kaggle PyTorch VGG19复现代码 # VGG19.py import torch import torch.nn as nnclass Conv(nn.Module):def __init__(self, in_channels, out_channels, kernel_size=1, stride=1,…

Flink web UI配置账号密码,权限控制

由于Flink自带的web UI界面没有账号密码,需要通过nginx实现该效果。 1.安装httpd-tools工具 yum install httpd-tools -y 2.生成用户名密码文件 htpasswd -c /usr/local/nginx/conf/flinkuser username passwd flinkuser:为生成的用户名密码文件名称 …