WebSocket详解:从前端到后端的全栈理解

文章目录

    • 前言
    • 一、WebSocket简介
    • 二、WebSocket的特点
    • 三、WebSocket的工作原理
      • 3.1 握手过程
      • 3.2 数据传输
    • 四、WebSocket在前端的应用
    • 五、WebSocket在后端的应用
    • 六、WebSocket的局限与解决方案
    • 结语


前言

随着互联网技术的发展,传统的HTTP协议在某些场景下的局限性逐渐显现,特别是在需要服务器主动向客户端推送数据的实时应用场景中。为了克服这些局限,WebSocket协议应运而生,它为Web应用提供了全双工通信的能力,即服务器和客户端可以同时发送数据,无需等待对方的响应。本文将详细介绍WebSocket的工作原理及其在前后端的应用。


一、WebSocket简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务端主动向客户端推送数据,与传统的HTTP请求/响应模式不同,WebSocket一旦建立连接,就可以进行双向数据传输,极大地提高了通信效率。WebSocket协议在2011年被IETF标准化为RFC 6455,随后又被RFC 7936补充规范。

二、WebSocket的特点

  • 全双工通信:服务器和客户端可以同时发送数据
  • 持久连接:一旦建立连接,除非一方主动断开,否则连接将一直保持
  • 轻量级:相比HTTP,WebSocket的数据传输更加高效,头部信息更小
  • 支持多种数据类型:不仅可以发送文本数据,还可以发送二进制数据
  • 跨域通信:没有同源策略的限制,客户端可以与任意服务器通信
  • 安全性:支持加密连接,使用wss协议 (类似于https)

三、WebSocket的工作原理

WebSocket协议的连接建立过程基于HTTP协议。首先,客户端通过发送一个特殊的HTTP请求来请求建立WebSocket连接。这个请求中包含了一些特殊的头信息,如Upgrade: websocket和Connection: Upgrade,表明客户端希望将当前连接升级为WebSocket连接。服务器收到请求后,会检查这些头信息,并通过特定的响应头来确认连接的升级。一旦连接建立,后续的数据传输将不再遵循HTTP协议,而是使用WebSocket协议。

3.1 握手过程

  • 客户端请求
    GET /chat HTTP/1.1
    Host: example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
    Sec-WebSocket-Version: 13
    
  • 服务器响应
    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
    

3.2 数据传输

一旦握手成功,客户端和服务器就可以通过这个持久连接进行双向数据传输。WebSocket协议定义了两种类型的数据帧:文本帧(text frame)和二进制帧(binary frame)。每个帧都有一个固定格式,包括帧头和负载数据。

四、WebSocket在前端的应用

在前端,JavaScript提供了WebSocket API,使得开发者可以轻松地在网页中使用WebSocket。以下是一个简单的示例,展示了如何使用JavaScript创建WebSocket连接并发送接收消息

// 创建WebSocket对象
const socket = new WebSocket('ws://example.com/socket')// 监听连接打开事件
socket.addEventListener('open', function (event) {console.log('WebSocket connection established.')// 发送消息socket.send('Hello, WebSocket!')
})// 监听消息接收事件
socket.addEventListener('message', function (event) {console.log('Message from server:', event.data)
})// 监听连接关闭事件
socket.addEventListener('close', function (event) {console.log('WebSocket connection closed.')
})

五、WebSocket在后端的应用

在后端,WebSocket的实现取决于所使用的编程语言和框架。例如,在Node.js中,可以使用ws库来创建WebSocket服务器。以下是一个简单的Node.js WebSocket服务器示例

const WebSocket = require('ws')const wss = new WebSocket.Server({ port: 8080 })wss.on('connection', function connection(ws) {console.log('Client connected.')// 监听客户端发送的消息ws.on('message', function incoming(message) {console.log('Received:', message)// 向客户端发送消息ws.send(`Echo: ${message}`)})// 当客户端断开连接时ws.on('close', function close() {console.log('Client disconnected.')})
})

六、WebSocket的局限与解决方案

  • 局限:不支持旧版浏览器
  • 解决方案:使用socket.io库,它不仅支持WebSocket,还提供了对多种浏览器的兼容性,并能在WebSocket不可用时自动降级到其他传输方式(如轮询)

结语

WebSocket协议为Web应用提供了强大的实时通信能力,特别是在需要服务器主动推送数据的场景中。通过本文的介绍,相信读者对WebSocket有了更深入的理解。无论是前端还是后端开发,掌握WebSocket都能为您的应用带来更好的用户体验。

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

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

相关文章

2024 CCPC Liaoning Provincial Contest

tot:赛时是6题723罚时,还是差劲了。省赛,特别是这场省赛,难度低很多。前面4,5题都是签到题。第六题是一个关于闰年的容斥,脑子乱了,然后越来越绕。然后就没出。出的是一个诈骗题,题面…

使用k8s管理应用以及java案例

使用k8s管理应用 制作镜像控制器管理podpod数据持久化创建service四层代理创建ingress规则对外发布应用日志与监控应用案例(因无开发代码,最终跑不起来)编写java代码编写 Dockerfile构建 Docker 镜像在 Kubernetes 上运行应用程序创建 Kubernetes 服务service创建in…

【论文阅读笔记】CamoFormer: Masked Separable Attention for Camouflaged Object Detection

1.论文介绍 CamoFormer: Masked Separable Attention for Camouflaged Object Detection CamoFormer:用于隐藏目标检测的掩蔽可分离注意力 TPAMI 2024 Paper Code 2.摘要 如何从背景中识别和分割隐藏的对象是一个挑战。受transformer中多头自注意的启发&#xf…

【从零开始的LeetCode-算法】3254. 长度为 K 的子数组的能量值 I

给你一个长度为 n 的整数数组 nums 和一个正整数 k 。一个数组的 能量值 定义为: 如果 所有 元素都是依次 连续 且 上升 的,那么能量值为 最大 的元素。否则为 -1 。 你需要求出 nums 中所有长度为 k 的子数组的能量值。 请你返回一个长度为 n - k 1…

LLMs之PDF:zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略

LLMs之PDF:zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略 目录 zeroX的简介 1、支持的文件类型 zeroX的安装和使用方法 T1、Node.js 版本: 安装 使用方法 使用文件 URL: 使用本地路径&…

【使用 Python 和 ADB 检查 Android 设备的 Wi-Fi 状态】

引言 在现代移动设备中,Wi-Fi 连接的稳定性和安全性至关重要。本文将介绍如何使用 Python 和 ADB(Android Debug Bridge)命令来检查 Android 设备的 Wi-Fi 连接状态,包括获取连接的 SSID、信号强度、链路速度、频段和安全类型。我们将编写一个 Python 脚本,该脚本能够解析…

htop-2.2.0在arm64上的手工编译

背景:在一款国产的arm上的linux 64位的系统上,没有htop,这里是手工交叉编译的部分笔记 文章目录 写在前面下载包二、编译脚本1.ncurses2.htop之后我会把压缩包放在这里 资源 写在前面 因为种种原因,需要手工编译 网上有几篇&…

qt QStandardItemModel详解

1、概述 QStandardItemModel是Qt框架中提供的一个基于项的模型类,用于存储和管理数据,这些数据可以以表格的形式展示在视图控件(如QTableView、QTreeView等)中。QStandardItemModel支持丰富的数据操作,包括添加、删除…

docker安装zookeeper,以及zk可视化界面介绍

1. zookeeper 1.1. zookeeper简单介绍 ZooKeeper 是一个分布式的开源协调服务,最初由 Apache Hadoop 项目开发,用于构建分布式应用程序。它提供了一个简单的接口,允许开发人员实现诸如配置维护、域名服务、分布式同步、组服务等常见任务。ZooKeeper 的设计目标是提供高性能…

思源笔记轻松连接本地Ollama大语言模型,开启AI写作新体验!

文章目录 前言1. 下载运行Ollama框架2. Ollama下载大语言模型3. 思源笔记设置连接Ollama4. 测试笔记智能辅助写作5. 安装Cpolar工具6. 配置Ollama公网地址7. 笔记设置远程连接Ollama8. 固定Ollama公网地址 前言 今天我们要聊聊如何通过cpolar内网穿透技术,把国产笔…

基于C++的决策树C4.5机器学习算法(不调包)

目前玩机器学习的小伙伴,上来就是使用现有的sklearn机器学习包,写两行代码,调调参数就能跑起来,看似方便,实则有时不利于个人能力发展,要知道现在公司需要的算法工程师,不仅仅只是会调参&#x…

这款Chrome 插件,使浏览器页面快速滑动到最底部和最顶部,并且还能...

前言 前几日我在使用谷歌浏览器,也就是chrome的时候,浏览一个内容很长的页面,由于页面上的内容有前后关联,所以我必须不停地切换到上面和下面。这非常不方便。使我非常抓狂。后来,我灵机一动,去谷歌浏览器…

汉诺塔问题代码分享及思路分享(c基础)

可以先自己尝试,只要看见过递归即可写。(我自己是)希望能自己尝试出来。 两种方法迭代比递归快很多.(不发代码的原因是想让你自己动手) 1 递归 2 迭代 猜数游戏是自己写的第一个有互动的程序。对我很有意义。 我绑定资源了的,大…

第9章 Apache WEB服务器企业实战

万维网 (WORLD WIDE WEB,WWW)服务器,也称之为WEB服务器,主要功能是提供网上信息浏览服务。WWW是 Internet的多媒体信息查询工具,是Internet上飞快发展的服务,也是目前用的最广泛的服务。正是因为有了WWW软件,才使得近年来 Internet 迅速发展。 目前主流的WEB服务器软件包…

第10章 MYSQL服务器企业实战

MySQL是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 旗下公司。MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一。 本章介绍关系型数据库特…

【初阶数据结构与算法】沉浸式刷题之顺序表练习(顺序表以及双指针两种方法)

文章目录 顺序表练习1.移除数组中指定的元素方法1(顺序表)方法2(双指针) 2.删除有序数组中的重复项方法1(顺序表)方法2(双指针) 3.双指针练习之合并两个有序数组方法1(直…

【flask开启进程,前端内容图片化并转pdf-会议签到补充】

flask开启进程,前端内容图片化并转pdf-会议签到补充 flask及flask-socketio开启threading页面内容转图片转pdf流程前端主js代码内容转图片-browser端browser端的同步编程flask的主要功能route,def 总结 用到了pdf,来回数据转发和合成,担心flask卡顿,响应差,于是刚好看到threadi…

PADS的GND难解之谜——GND铺不上捅?GND焊盘上全是绿色叉号?

PADS难解之谜——GND覆不上铜?焊盘上全是叉号? 文章目录 PADS难解之谜——GND覆不上铜?焊盘上全是叉号?1、GND灌铜灌不上?2、GND焊盘上全是绿色叉号? 如果对你有帮助,就点赞收藏把!(…

02- 模块化编程-007 Ltc1684( ADC16-Bit)采样显示

1、Ltc1684芯片介绍 该芯片是一款高精度的16位模数转换器(ADC),适合于高精度仪器的开发,它能提供精准的模拟信号到数字信号的转换。 特性 采用 MSOP 封装的 16 位、250ksps ADC 单 5V 电源 低电源电流:850μA (典型值) 自动停机功能可把电源…

信息安全工程师(80)网络安全测评技术与工具

前言 网络安全测评是评估信息系统、网络和应用程序的安全性,以发现潜在的漏洞和威胁,并确保系统符合安全标准和政策的过程。 一、网络安全测评技术 渗透测试(Penetration Testing) 描述:通过模拟真实的攻击&#xff0c…