深入理解WebSocket:实时双向通信的利器

一、介绍

1.1 基础概念介绍

  • 单工通信:数据传输只允许在一个方向上传输,只能一方发送数据,另一方接收数据并发送。
  • 半双工:数据传输允许两个方向上的传输,但在同一时间内,只可以有一方发送或接收数据。
  • 全双工:同时可进行双向数据传输。

1.2 WebSocket介绍

WebSocket是一种在单个TCP连接上进行全双工通信的协议,它能够在客户端和服务器之间建立实时、双向的通信通道。

与传统的HTTP通信相比,WebSocket更轻量级、更高效,适用于需要实时通信或推送消息的场景。

WebSocket的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。

1.2.1 websocket 出现背景

WebSocket是一种在客户端和服务器之间建立持久连接的通信协议。它的背景可以追溯到Web应用程序需要实时双向通信的需求。

在传统的HTTP通信中,HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。

客户端发送请求,服务器响应后即断开连接,HTTP 协议无法实现服务器主动向客户端发起消息,因此无法支持实时性要求高的应用场景,比如在线游戏、即时聊天、股票行情等。

很多网站为了实现推送技术,所用的技术都是轮询。即在特定得时间间隔,由浏览器对服务器发出http请求。

为了解决这一问题,Web开发者开始寻找一种更有效的方式来实现实时通信。WebSocket应运而生,它允许在客户端和服务器之间建立一次连接,并且可以在连接建立后保持长时间活跃,双方可以随时发送数据。这种持久连接的特性使得WebSocket非常适合实时通信应用场景,从而推动了Web应用程序的发展。

WebSocket的发展背景还包括了对网络性能和效率的追求。相比传统的HTTP轮询或长轮询方式,WebSocket可以减少通信的延迟和带宽消耗,提升了网络通信的效率。这也是WebSocket在各种实时通信应用中得到广泛应用的重要原因之一。

总的来说,WebSocket的研发背景主要是为了满足Web应用程序对实时通信的需求,并且提升网络通信的效率和性能。

1.3 websocket与HTTP比较

1.3.1 相似之处:

  1. 基于TCP/IP协议:WebSocket和HTTP都是基于TCP/IP协议栈的应用层协议。

  2. 用于客户端和服务器之间的通信:WebSocket和HTTP都是用于客户端和服务器之间的通信,但在用途上有所区别。

1.3.2 不同之处:

  1. 通信方式

    • HTTP:HTTP是一种单向的、无状态的通信协议,通常是客户端向服务器发起请求,服务器返回响应的模式。
    • WebSocket:WebSocket是一种全双工的通信协议,允许客户端和服务器之间同时发送和接收数据,实现了双向通信。
  2. 连接方式

    • HTTP:HTTP是一种短连接的协议,每次通信都需要建立一个新的连接,通信结束后立即关闭连接。
    • WebSocket:WebSocket是一种长连接的协议,一旦建立连接,客户端和服务器之间可以保持长时间的通信,不需要频繁地建立和断开连接。
  3. 数据格式

    • HTTP:HTTP通常使用文本格式来传输数据,如HTML、JSON等。
    • WebSocket:WebSocket支持传输任意格式的数据,可以是文本、二进制等。
  4. 实时性和效率

    • HTTP:HTTP通常是基于请求-响应模式,因此在实时性和效率上有一定的限制,适用于普通的网页浏览和数据传输。
    • WebSocket:WebSocket是专门设计用于实时通信的协议,实时性和效率较高,适用于需要实时通信或推送消息的场景。
  5. 适用场景

    • HTTP:适用于普通的网页浏览、数据传输等场景。
    • WebSocket:适用于实时聊天应用、在线游戏、实时数据展示等需要实时通信的场景。

1.4 websocket握手过程

WebSocket握手过程是建立WebSocket连接的第一步,它是基于HTTP协议的,但在一定程度上有所不同。以下是WebSocket握手过程的简要步骤:

  1. 客户端发送WebSocket握手请求:客户端发送一个HTTP请求给服务器,请求升级连接为WebSocket。请求中包含了一些特殊的头部字段,如Upgrade和Connection字段,以及Sec-WebSocket-Key字段等。

  2. 服务器响应WebSocket握手请求:服务器收到客户端的握手请求后,会进行验证并作出响应。服务器会返回一个HTTP 101状态码(表示协议切换)并在响应头部中包含一些特殊的字段,如Upgrade和Connection字段,以及Sec-WebSocket-Accept字段等。同时,服务器也会发送一些WebSocket扩展和子协议等信息。

  3. 建立WebSocket连接:客户端收到服务器的响应后,如果状态码为101,则握手成功,此时WebSocket连接已经建立。客户端和服务器可以通过该连接进行双向通信。

  4. 双方开始交换数据:建立了WebSocket连接后,客户端和服务器可以随时发送数据,并且可以实现双向通信。

需要注意的是,WebSocket握手过程在HTTP层面进行,但建立了WebSocket连接后,通信协议会切换到WebSocket协议,之后的通信就不再遵循HTTP协议的规则。这样可以实现更加高效和实时的双向通信。

二、WebSocket的用法

1. 创建WebSocket连接

在JavaScript中,可以使用WebSocket API来创建WebSocket连接:

var socket = new WebSocket('ws://example.com/socket');

 

2. 监听WebSocket事件

可以监听WebSocket对象的各种事件,包括连接建立、消息接收、连接关闭等:

socket.onopen = function() {console.log('WebSocket连接已建立');
};socket.onmessage = function(event) {console.log('收到消息:', event.data);
};socket.onclose = function() {console.log('WebSocket连接已关闭');
};
3. 发送和接收消息

通过WebSocket对象的send方法可以向服务器发送消息,服务器也可以通过WebSocket对象的send方法向客户端发送消息:

// 发送消息
socket.send('Hello, Server!');// 接收消息在onmessage事件中处理
socket.onmessage = function(event) {console.log('收到消息:', event.data);
};

三、WebSocket在项目中的应用

WebSocket可以被广泛应用于需要实时通信或推送消息的场景,例如:

  1. 实时聊天应用:WebSocket能够实现即时通讯,可以让用户之间实时发送消息、接收消息。

  2. 在线游戏:WebSocket可用于在线游戏中,实现玩家之间的实时交互、游戏状态的同步等功能。

  3. 实时数据展示:对于需要实时展示数据变化的项目,如股票交易系统、监控系统等,可以使用WebSocket将实时数据推送给客户端。

  4. 协作编辑:在协作编辑类的应用中,多个用户可以同时编辑同一个文档或项目,WebSocket可以用于实现多用户之间的实时同步。

  5. 通知推送:WebSocket可以用于向客户端推送实时通知,例如新消息通知、系统提醒等。

3.1 示例:实时聊天应用

下面是一个简单的实时聊天应用的示例,使用WebSocket实现客户端和服务器之间的实时通信:

1、服务端代码(Node.js)

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('收到消息:', message);// 广播消息给所有客户端wss.clients.forEach(function each(client) {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});
});

2、客户端代码(HTML + JavaScript)

<!DOCTYPE html>
<html>
<head><title>WebSocket Chat</title>
</head>
<body><input type="text" id="messageInput"><button onclick="sendMessage()">Send</button><ul id="messageList"></ul><script>var socket = new WebSocket('ws://localhost:8080');socket.onmessage = function(event) {var messageList = document.getElementById('messageList');var li = document.createElement('li');li.textContent = event.data;messageList.appendChild(li);};function sendMessage() {var messageInput = document.getElementById('messageInput');var message = messageInput.value;socket.send(message);messageInput.value = '';}</script>
</body>
</html>

这个示例实现了一个简单的实时聊天应用,用户可以在输入框中输入消息并发送,其他用户能够即时收到消息并显示在页面上。

结论

WebSocket是一种强大的实时通信协议,它能够在客户端和服务器之间建立持久的双向通信通道,为项目中的实时通信场景提供了极大的便利。通过本文的介绍和示例,相信读者对WebSocket有了更深入的理解,能够更加灵活地运用WebSocket解决实际的项目需求。

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

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

相关文章

SpringBoot集成Mysql

一、概述 Spring Boot是一个用于简化Spring应用开发的框架&#xff0c;它提供了很多默认配置&#xff0c;使得开发者能够快速地集成各种技术和组件&#xff0c;包括MySQL数据库。在Spring Boot中集成MySQL&#xff0c;我们通常会使用Spring Data JPA或MyBatis等持久层框架&…

Python中的全栈开发前端与后端的完美融合【第160篇—全栈开发】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python中的全栈开发&#xff1a;前端与后端的完美融合 全栈开发已成为当今软件开发领域中的…

代克斯特拉演算法C代码

代克斯特拉演&#xff08;Dijkstra&#xff09;算法是一个用于找出图中单源最短路径问题的算法。下面是一个使用C语言实现的Dijkstra算法的例子。这个例子假定图是以邻接矩阵的形式表示的&#xff0c;并且图中的边权重是非负的。 #include <stdio.h> #include <limit…

华为OD机试 - 查找舆情热词(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

vue3性能提升主要通过哪几方面?

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;Vue &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; 文章目录 编译优化diff算法优化提取动态节点 静态提升预字符串化缓存内联事件处理函数SSR优化 源…

YOLOv9有效改进专栏汇总|未来更新卷积、主干、检测头注意力机制、特征融合方式等创新![2024/4/1]

​ 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 专栏介绍 YOLOv9作为最新的YOLO系列模型&#xff0c;对于做目标检测的同学是必不可少的。本专栏将针对2024年最新推出的YOLOv9检测模型&#xff0…

Python高级技术应用:解锁异步编程的威力与实践

在当今软件开发的领域中,异步编程已经成为一种重要的技术手段,特别是在处理高并发和I/O密集型任务时。Python作为一种功能丰富且灵活的编程语言,提供了多种方式来实现异步编程,如使用asyncio库、async/await关键字等。本文将深入探讨Python中异步编程的原理、优势以及实际应…

HackTheBox-Machines--Topology

文章目录 1 端口扫描2 漏洞探测三 权限提升 Topology 测试过程 1 端口扫描 nmap -sC -sV 10.129.23.122 漏洞探测 端口扫描发现22和80端口&#xff0c;访问80端口&#xff0c;发现LaTeX方程生成器&#xff0c;访问该按钮发现子域&#xff1a; latex.topology.htb。 将域名添加…

超图新建三维数据集继续学习

1 新建三维数据集 之前操作过新建三维数据集&#xff0c;还不熟悉&#xff0c;继续熟悉&#xff1b; 现在有一个文件型的数据源&#xff0c;名为swtest1&#xff1b;它前面小图标上有UDX三个字母&#xff0c;表明这是一个UDX类型的数据源&#xff1b;在此数据源上右击&#x…

李白打酒加强版(c++实现)

题目 话说大诗人李白&#xff0c;一生好饮。 幸好他从不开车。 一天&#xff0c;他提着酒壶&#xff0c;从家里出来&#xff0c;酒壶中有酒 2 斗。 他边走边唱&#xff1a; 无事街上走&#xff0c;提壶去打酒。 逢店加一倍&#xff0c;遇花喝一斗。 这一路上&#xff0c;…

【观察者模式】

观察者模式 什么是观察者模式&#xff1f; 观察者模式定义了对象之间的一种一对多依赖关系&#xff0c;允许多个观察者对象同时监听某一个主题对象。这种模式是事件驱动编程的核心&#xff0c;其主要目标是实现对象间的松耦合。松耦合的设计允许我们构建灵活的系统&#xff0…

SSH端口转发

SSH介绍 SSH通过网络远程访问主机提供保护&#xff0c;可以对客户端和服务端之间的数据传输进行压缩和加密&#xff0c;有身份验证、SCP、SFTP、和端口转发的功能 SSH转发常用的参数介绍&#xff1a; -C请求压缩所有数据-D动态转发、即socks代理-f后台执行SSH指令-g允许远程…

hxp CTF 2021 - A New Novel LFI(新颖的解法)

一、环境 unbentu&#xff0c;docker https://2021.ctf.link/assets/files/includers%20revenge-25377e1ebb23d014.tar.xz 二、解析 PHP Filter 当中有一种 convert.iconv 的 Filter &#xff0c;可以用来将数据从字符集 A 转换为字符集 B &#xff0c;其中这两个字符集可以…

极狐GitLab 13.11 重磅发布多项与 DevSecOps 相关的功能【五】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

我的一年创作纪念日

机缘 实际上在之前的文章之中我已经介绍过自己与csdn的缘分了&#xff0c;当初对算法十分的痴迷&#xff0c;也很希望能够将自己的一些理解写在csdn上&#xff0c;所以就开始了在csdn上的写作。 收获 在创作过程中最大的收获还是对过去所学的知识的总结吧&#xff0c;可惜的就…

蓝桥杯算法题-图形排版

题目描述 小明需要在一篇文档中加入 N 张图片&#xff0c;其中第 i 张图片的宽度是 Wi&#xff0c;高度是 Hi。   假设纸张的宽度是 M&#xff0c;小明使用的文档编辑工具会用以下方式对图片进行自动排版&#xff1a; 1. 该工具会按照图片顺序&#xff0c;在宽度 M 以内&…

企业客户信息反馈平台的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

《数据结构学习笔记---第九篇》---循环队列的实现

文章目录 1.循环队列的定义 2.循环队列的判空判满 3.创建队列并初始化 4.入队和出队 5. 返回队尾队首元素 6.释放循环队列 1.循环队列的定义 定义&#xff1a;存储队列元素的表从逻辑上被视为一个环。 我们此次实现的循环队列&#xff0c;采用顺序表 typedef struct {int…

Xception模型详解

简介 Xception的名称源自于"Extreme Inception"&#xff0c;它是在Inception架构的基础上进行了扩展和改进。Inception架构是Google团队提出的一种经典的卷积神经网络架构&#xff0c;用于解决深度卷积神经网络中的计算和参数增长问题。 与Inception不同&#xff0…

图像生成:SD lora加载代码详解与实现

文章目录 前言一、SD模型介绍二、模型加载1. 模型架构加载2. safetensors权重加载3. lora权重加载 三、Name匹配四、权重融合1、构建net类2、匹配lora weight和model weight3、基于lora权重创建lora模块4、权重融合 五、整体pipeline总结 前言 SD中lora的加载相信都不陌生&…