WebSocket从入门到精通

news2024/11/26 1:42:11

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.coloradmin.cn/o/750394.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

快速排序算法解析

快速排序算法解析 快速排序法 快速排序是一种经典的分治算法,它采用递归的方式将待排序数组分割成较小的子数组,然后通过基准元素的选择和元素的交换来达到排序的目的。 快速排序的核心思想是通过选取基准元素,并将其他元素与基准元素进行比…

如何在工作中保持稳定的情绪? – 个人看法和建议

文章目录 每日一句正能量前言情绪波动的原因建议情绪调节技巧和策略身处逆境,如何治愈自己 后记 每日一句正能量 所谓的快乐,是指身体的无痛苦和灵魂的无纷扰。——伊壁鸠鲁 前言 在工作中保持稳定的情绪对于每一个职场人来说都是非常重要的。随着工作压…

什么是vlan为什么要划分vlan

首先了解交换机的数据的转发方式。,有两种情况会使用广播方式进行数据分发,第一种就是目的地址是全F的(FF-FF-FF-FF-FF-FF),第二种是位置的单播帧,这样的情况下会带来什么杨的问题呢。 场景引入&#xff1…

Vue2 使用vcolorpicker报错问题解决

1、安装步骤省略 2、全局引入步骤省略 3、引入后注册组件会报如下错误 Failed to mount component: template or render function not defined. 按照文档给的例子直接这样写 不用注册组件就不报错了~

菜鸡shader:L10 帧序列动画和极坐标的使用

文章目录 帧序列动画代码最后效果 极坐标代码最后效果 顶点色 这次笔记就直接放最后的效果了,因为课程上老师也没有给代码图片或是什么技巧说明。 下图左边是帧序列动画(鬼火),右边是极坐标。 帧序列动画 帧序列的原理是对一张有规律行列排序的序列帧…

35. 反转链表

目录 链接: 题目: 思路: 代码: 图片: 链接: 原题链接 题目: 定义一个函数,输入一个链表的头结点,反转该链表并输出反转后链表的头结点。 思考题: 请同时…

逻辑(css)-背景网格制作(linear-gradient)

目录 linear-gradient需求实现 linear-gradient 语法:linear-gradient([direction], color-stop1, color-stop2, ...) 第一个参数为(可选)方向参数,可以是度数也可以是方位名词,方向与读书的关系如下: 角度方位文字说明示例0degto top从下…

centos7 环境下部署 nacos单机模式

1、官网下载 nacos 官网地址:home 去github上下载nacos-server。我下载的是 nacos-server-1.4.1.tar.gz 2、安装 nacos 下载完成后,将安装包上传到 centos 创建 nacos 目录(安装位置任意) mkdir -p /usr/local/nacos解压 nac…

springboot html乱码

一、问题重现 二、代码展示 代码的编码都是正常的 修改了File Encodings配置项,结果不管用 三、终极解决方案 终于解决

MATLAB 基于CPD的点云配准 (24)

MATLAB 基于CPD的点云配准 (24) 一、算法简介二、具体使用1.代码(注释详细)2.函数介绍3.使用技巧4.重复叠加配准效果如何一、算法简介 MATLAB 中包含了一种基于CPD的点云配准方法,这里对其进行使用,查看其配准效果,结果来看如上图所示,还是可用的。 二、具体使用 1.代…

模板类和友元

模板类和友元 非模板友元约束模板友元 非模板友元 友元函数不是模板函数,而是利用模板类参数生成的函数,只能在类内实现。 友元函数访问类的私有变量的方法: 将模板类的引用传递给友元函数: 测试调用: 对于有多个…

Android oom_adj 更新原理(二)

源码基于:Android R 接上一篇:Android oom_adj 更新原理(一) 12. computeOomAdjLocked() frameworks/base/services/core/java/com/android/server/am/OomAdjuster.javaprivate final boolean computeOomAdjLocked(ProcessRecord app, int cachedAdj,Pr…

深入解析Android Lifecycle;从基本使用到源码实现,全面掌握生命周期管理

Lifecycle 是 Android Jetpack 中的一个组件,用于管理 Android 应用组件(如 Activity 和 Fragment)的生命周期。通过使用 Lifecycle,开发者可以更容易地管理组件的生命周期并执行相关的操作。 Lifecycle 提供了一组生命周期事件&…

关于torch.load()更改了cuda位置还是cuda内存不够的问题

关于torch.load()变了cuda位置还是cuda内存不够的问题 问题背景:在一次任务中,由于需要使用cuda进行代码运行,但是分明修改了cuda到一个空闲的卡位置,但是依然抱错cuda out of memory的问题 在任务中,最开始原始代码是…

Node+mysql-注册和登录账号实现(原生)

1.创建数据表 说明:创建id,username,password字段,并设置了类型。 2.导入mysql库 npm i mysql2.18.1 3.创建了db文件夹 说明:创建mysql数据池 // 导入mysql包 const mysqlrequire("mysql") // 创建mysql连接池 const…

react-flow实现dag工作流

1. 官方文档 Introduction to React Flow 2.效果 3. 代码 index.jsx import { useState, useCallback, useEffect } from react; import ReactFlow, {Controls,Background,applyNodeChanges,applyEdgeChanges,addEdge,ReactFlowProvider,useReactFlow } from reactflow;…

C++编程(二)—— 设计模式

文章目录 单例模式饿汉式单例模式懒汉式单例模式懒汉式单例模式2 工厂模式(创建型模式)简单工厂工厂方法抽象工厂总结 单例模式 一个类不管创建多少次多线,永远只能得到该类型一个对象的实例。 A* p1 new A(); A *p2 new A(); A *p3 new…

msvcr110.dll丢失的修复教程,找不到msvcr110.dll解决办法哪个更推荐

msvcr110.dll是微软的Visual C运行库文件之一。它是Microsoft Visual Studio 2012的一部分,用于支持运行在Windows操作系统上使用Visual C编写的应用程序。在Windows系统中非常重要,如果丢失或是损坏就会造成很多程序无法启动运行。 会出现以下的报错提…

将C++对象注册成QML控件并提供可被调用的函数

0x00 使用QML编写界面 import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Controls 1.4 import QtQuick.Controls 2.12 as Controls import QtQuick.Controls.Styles 1.4 import QtQuick.Controls.Material 2.12 //import com.HLD 1.0Window {visible: true;mini…

赛效:WPS文档怎么在文本中插入连续的编号

1:打开一个WPS文档,全选所有的段落。 2:点击“开始”选项卡里点击编号下拉菜单,选择一种编号样式并点击。 3:我们会看到每段前面已经自动出现编号,而且是连续的。这个时候,我们在文档末尾新增一…