四十:如何从HTTP升级到WebSocket

在现代的Web应用中,随着实时通信需求的增加,传统的HTTP协议已无法满足高效、低延迟双向通信的需求。WebSocket协议应运而生,成为了一种解决方案,可以在客户端和服务器之间建立一个持久的双向通信通道。

本文将介绍如何从HTTP协议升级到WebSocket协议,包括WebSocket的握手过程、实现步骤以及需要注意的事项。

什么是WebSocket协议?

WebSocket是一种基于TCP协议的全双工通信协议,能够在客户端和服务器之间提供持久的、低延迟的通信通道。一旦建立连接,WebSocket可以支持实时的双向数据传输,而无需每次请求都重新建立连接。与HTTP协议不同,WebSocket更适合用于即时消息推送、在线游戏、实时股票行情等场景。

从HTTP升级到WebSocket的握手过程

WebSocket连接的建立首先依赖于一个HTTP协议的“握手”过程。这个过程涉及客户端与服务器之间交换一些特定的HTTP头部信息,一旦握手成功,协议便从HTTP升级到WebSocket,之后便可以开始双向数据传输。

1. 客户端发起WebSocket请求

客户端通过发送一个特殊的HTTP请求来请求升级到WebSocket协议。这个请求是通过HTTP协议发送的,但它包含了一些额外的头部信息,告诉服务器客户端希望将连接升级为WebSocket。

请求的关键部分是:

  • Upgrade: 告诉服务器客户端希望进行协议升级。
  • Connection: 表示当前连接将被升级。
  • Sec-WebSocket-Key: 这个随机生成的字符串是WebSocket协议的一部分,用于在握手时验证。
  • Sec-WebSocket-Version: 指定客户端支持的WebSocket协议版本,当前最新版本是13。

客户端请求的例子:

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

2. 服务器响应WebSocket请求

服务器收到客户端的升级请求后,会验证请求的合法性,并通过返回特定的HTTP响应来同意进行协议升级。服务器返回的响应头部信息将确认升级。

响应的关键部分是:

  • Upgrade: 指示服务器同意进行协议升级。
  • Connection: 确保连接被正确地升级。
  • Sec-WebSocket-Accept: 这个值是对客户端Sec-WebSocket-Key进行处理后的结果,主要用于防止请求伪造。

服务器响应的例子:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: dGhlIHNhbXBsZSBub25jZQ==

3. 升级成功,WebSocket连接建立

当客户端收到服务器的101 Switching Protocols响应时,表明WebSocket连接已经成功建立。此时,客户端和服务器之间的通信已经不再使用HTTP协议,而是转换为WebSocket协议,可以进行实时、双向的数据传输。

实现WebSocket连接的步骤

从HTTP协议升级到WebSocket协议的过程在Web开发中非常常见,特别是在需要实时交互的应用场景下。以下是实现这一过程的基本步骤:

1. 客户端实现

在客户端,浏览器支持WebSocket API,因此可以通过JavaScript代码轻松地发起WebSocket连接。示例代码如下:

const socket = new WebSocket('ws://example.com/chat');// 连接成功时的回调函数
socket.onopen = function(event) {console.log('WebSocket connection established');socket.send('Hello, server!');
};// 接收到服务器消息时的回调函数
socket.onmessage = function(event) {console.log('Received message from server: ' + event.data);
};// 连接关闭时的回调函数
socket.onclose = function(event) {console.log('WebSocket connection closed');
};// 发生错误时的回调函数
socket.onerror = function(error) {console.log('WebSocket error: ' + error);
};

2. 服务器实现

WebSocket协议本身并没有定义具体的服务器实现方式,开发者可以根据自己使用的技术栈选择不同的WebSocket库或框架。以下是使用Node.js和ws库实现WebSocket服务器的一个例子:

首先,安装ws库:

npm install ws

然后,在服务器端实现WebSocket连接的处理:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', (ws) => {console.log('Client connected');// 监听客户端发送的消息ws.on('message', (message) => {console.log('Received: ' + message);});// 向客户端发送消息ws.send('Hello, client!');
});

3. 确保安全性

WebSocket协议本身并不提供加密,因此对于需要保护数据传输的应用,应当使用WSS(WebSocket Secure)协议,即通过TLS/SSL加密的WebSocket。使用wss://而不是ws://来创建安全的WebSocket连接:

const socket = new WebSocket('wss://example.com/chat');

注意事项

  • 协议版本: WebSocket协议的版本可能会随着规范的更新而变化。客户端和服务器必须支持相同的版本才能成功建立连接。当前版本是13,这是大多数浏览器和WebSocket库所支持的版本。
  • 防止滥用: 由于WebSocket连接是持久的,恶意用户可能会滥用这个特性。因此,确保WebSocket连接的安全性非常重要,例如使用身份验证、授权机制,以及限制连接的频率等。
  • 跨域问题: 默认情况下,WebSocket允许跨域通信,但也需要特别注意安全策略,避免未经授权的跨域连接。
  • 服务器资源: WebSocket连接一旦建立,直到连接关闭之前都处于开放状态。因此,服务器需要能够处理大量并发连接,并且要合理地管理资源。

总结

从HTTP协议升级到WebSocket协议是实现实时通信的关键步骤。通过握手过程,客户端和服务器能够顺利转换协议,建立持久的、双向的通信通道,进一步实现低延迟、实时的数据交换。实现这一过程非常简单,浏览器原生支持WebSocket API,服务器端可以通过多种框架和库进行支持。

无论是在即时消息、在线游戏还是实时数据推送等应用场景中,WebSocket都提供了一个高效的解决方案。随着互联网应用对实时性要求的不断提升,WebSocket的应用前景将更加广泛。

目录:

一:浏览器发起 HTTP 请求的典型场景_浏览器如何发送用户名密码的请求-CSDN博客

二:基于ABNF语义定义的HTTP消息格式-CSDN博客     

三:网络为什么要分层:OSI模型与TCP/IP模型-CSDN博客   

四:HTTP的诞生:它解决了哪些网络通信难题?-CSDN博客      

五:评估Web架构的七大关键属性-CSDN博客          

六:从五种架构风格推导出HTTP的REST架构-CSDN博客          

七:如何用Chrome的Network面板分析HTTP报文-CSDN博客      

八:URI的基本格式及其与URL的区别-CSDN博客      

九:为什么要对URI进行编码?-CSDN博客      

十:详解HTTP的请求行-CSDN博客     

十一:HTTP 状态码详解:解读每一个响应背后的意义-CSDN博客      

十二:HTTP错误响应码:理解与应对-CSDN博客      

十三:如何管理跨代理服务器的长短连接?-CSDN博客     

十四:HTTP消息在服务器端的路由-CSDN博客     

十五:代理服务器转发消息时的相关头部-CSDN博客   

十六:请求与响应的上下文-CSDN博客   

十七:Web内容协商与资源表述-CSDN博客  

十八:HTTP包体的传输方式(1):定长包体-CSDN博客  

十九:HTTP包体的传输方式(2):不定长包体-CSDN博客

二十:HTML Form表单提交时的协议格式-CSDN博客

二十一:断点续传与多线程下载是如何做到的?-CSDN博客

二十二:Cookie的格式与约束-CSDN博客

二十三:Session及第三方Cookie的工作原理-CSDN博客

二十四:浏览器为什么要有同源策略?-CSDN博客

二十五:如何“合法”地跨域访问?-CSDN博客

二十六:Web条件请求的作用-CSDN博客

二十七:Web缓存的工作原理-CSDN博客

二十八:Web缓存新鲜度的四种计算方式-CSDN博客

二十九:复杂的Cache-Control头部解析-CSDN博客

三十:在 Web 中什么样的响应才会被缓存?-CSDN博客

三十一:HTTP多种重定向跳转方式的差异-CSDN博客

三十二:HTTP 协议的基本认证-CSDN博客

三十三:Wireshark的基本用法-CSDN博客

三十四:如何通过DNS协议解析域名?-CSDN博客

三十五:Wireshark的捕获过滤器-CSDN博客

三十六:Wireshark的显示过滤器-CSDN博客

三十七:WebSocket解决什么问题?-CSDN博客

三十八:WebSocket的约束-CSDN博客

三十九:WebSocket协议:实时通信的未来-CSDN博客

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

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

相关文章

oracle之用户的相关操作

(1)创建用户(sys用户下操作) 简单创建用户如下: CREATE USER username IDENTIFIED BY password; 如果需要自定义更多的信息,如用户使用的表空间等,可以使用如下: CREATE USER mall IDENTIFIED BY 12345…

IDL学习笔记(四)MODIS数据处理。MODIS数据介绍,以及Swath数据处理

MODIS数据处理 MODIS传感器介绍MODIS 数据产品Swath 数据Grid 数据 MODIS Swath 数据重投影对应ENVI接口UTM重投影 重投影后数据由ENVI版本,修改为GeoTiff格式。根据经纬度,快速重投影MODIS数据 下标 和 行列号转换 MODIS传感器介绍 MODlS (Moderate Re…

pushgateway HA高可用方案

未经本人同意不得转载,若引用请附上原文链接。 项目使用flink来处理kafka中的无界流数据,采用的是flink on yarn的模式部署flink任务。最近做flink任务的监控过程中,踩了一些坑。下面是过程,只想看最终方案的直接拉到最后。 先说…

burp常用机漏洞测试理论

声明! 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关&a…

【深度学习】手机SIM卡托缺陷检测【附链接】

一、手机SIM卡托用途 SIM卡托是用于固定和保护SIM卡的部件,通过连接SIM卡与手机主板的方式,允许设备访问移动网络,用户可以通过SIM卡进行通话、发送短信和使用数据服务。 二、手机SIM卡托不良影响 SIM卡接触不良,造成信号中断&…

【机器学习】深入解析 PCA 与三元组损失:从理论推导到实践应用

深入解析 PCA 与三元组损失:从理论推导到实践应用 PCA (Principal Component Analysis) 主成分分析详解1. 基本概念1.1 什么是 PCA?1.2 核心目标1.3 应用场景 2. 数学原理详解2.1 问题形式化2.2 数据预处理2.3 协方差矩阵的计算2.4 特征值分解2.5 最大方…

记录:ubuntu 使用chattts的过程。

你知道什么是穷人吗?穷人就是没钱还想学习。 git GitHub - 2noise/ChatTTS: A generative speech model for daily dialogue. 因为所以。cosyvoice,gpt-s . 0.先找一个目录吧。 1.命令行模式 duyichengduyicheng-computer:~/gitee$ git clone https:…

开源 - Ideal库 - Excel帮助类,ExcelHelper实现(五)

书接上回,我们继续来聊聊ExcelHelper的具体实现。 01、读取Excel到DataSet单元测试 在上一章我们主要讲解了读取Excel到DataSet的三个重载方法具体实现,还没来得及做单元测试,因此我们首先对这三个方法做个单元测试。具体代码如下&#xff1…

CCF-GESP 编程能力认证 C++ 七级 2024年9月份选择题详细解析

第 1 题 已知小写字母 b 的 ASCII 码为 98 &#xff0c;下列 C 代码的输出结果是&#xff08;B&#xff09;。 #include <iostream> using namespace std; int main() {char a b;a;cout << a;return 0; } A. b B. c C. 98 D. 99 【这题很简单&#xff0c;我们只…

Oceanbase离线集群部署

准备工作 两台服务器 服务器的配置参照官网要求来 服务器名配置服务器IPoceanbase116g8h192.168.10.239oceanbase216g8h192.168.10.239 这里选oceanbase1作为 obd机器 oceanbase安装包 选择社区版本的时候自己系统的安装包 ntp时间同步rpm包 联网机器下载所需的软件包 …

动手学深度学习d2l包M4芯片 gpu加速

conda创建环境 CONDA_SUBDIRosx-arm64 conda create -n ml python3.9 -c conda-forge conda env config vars set CONDA_SUBDIRosx-arm64 conda activate mlpip安装包 pip install --pre torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/n…

Y20030046 Java+JSP+SpringBoot+MYSQL+LW+实验室管理系统的设计与实现 源码

实验室管理系统 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 摘 要 伴随互联网的快速发展&#xff0c;国家对当前教育行业实行了新的改革&#xff0c;科学教育要培养更多的技术型人才&#xff0c;2020年全球爆发的新冠疫情&#xff0c;更是推动了科…

AG32 MCU与STM32 等MCU有哪些不同

STM32 MCU的特点 STM32一般是M0,M3, M4等内核的ARM Cortex内核的MCU&#xff0c;仅仅作为MCU使用&#xff0c;没有内置CPLD/FPGA的功能。 2. AG32的特点 AG32是AGM近2年来推出的差异化设计的SOC。以下我们了解以下AG32的特点。 &#xff08;1&#xff09;. 芯片结构&#xff…

【vscode】如何在项目中分享插件?

文章目录 前言一、如何获取插件名称呢&#xff1f;二、项目应用 前言 分享插件&#xff0c;除了将插件名字告诉你的小伙伴&#xff0c;当然还有其他的办法 项目根目录下创建.vscode 文件夹添加extensions.json文件 如下图 一、如何获取插件名称呢&#xff1f; 二、项目应用 …

【css】基础(一)

本专栏内容为&#xff1a;前端专栏 记录学习前端&#xff0c;分为若干个子专栏&#xff0c;html js css vue等 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;css专栏 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &a…

Qt学习笔记第51到60讲

第51讲 记事本实现打开功能 回到第24个功能文件Notepad&#xff0c;给UI中的各个控件添加槽函数。 ①开始按钮 void Widget::on_btnOpen_clicked() {QString fileNameQFileDialog::getOpenFileName(this,tr("Open File"),"E:\\6_Qt Projects\\24_Notepad\\fi…

WPS解决Word文件引入excel对象文件无法打开提示“不能启动此对象...”的问题

一、问题现象 接收到了一份 Word文件&#xff0c;里面引入了一个Excel对象文件&#xff0c;双击时候&#xff0c;wps出现卡顿&#xff0c;过一会之后弹出错误提示&#xff1a;不能启动此对象... 二、解决方法 1.点击WPS左上角图标&#xff0c;并打开右上角设置&#xff0c;萱蕚…

# issue 8 TCP内部原理和UDP编程

TCP 通信三大步骤&#xff1a; 1 三次握手建立连接; 2 开始通信&#xff0c;进行数据交换; 3 四次挥手断开连接&#xff1b; 一、TCP内部原理--三次握手 【第一次握手】套接字A∶"你好&#xff0c;套接字B。我这儿有数据要传给你&#xff0c;建立连接吧。" 【第二次…

什么是人工智能?(Chapter 2)

Chapter 2&#xff1a; 大家到底在争论什么&#xff1f; 2022 年末&#xff0c;OpenAI 发布 ChatGPT 后不久&#xff0c;网上开始流传一个新的备忘录&#xff0c;它比其他任何东西都更能捕捉到这项技术的诡异之处。在大多数版本中&#xff0c;一个名为 "食人魔"&am…

OpenCV-平滑图像

二维卷积(图像滤波) 与一维信号一样&#xff0c;图像也可以通过各种低通滤波器&#xff08;LPF&#xff09;、高通滤波器&#xff08;HPF&#xff09;等进行过滤。LPF 有助于消除噪音、模糊图像等。HPF 滤波器有助于在图像中找到边缘。 opencv 提供了函数 **cv.filter2D()**&…