应用层协议之WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议,它允许在客户端和服务器之间建立持久性的连接,使得数据可以在双方之间进行实时交换,而不需要客户端发起多个HTTP请求。WebSocket特别适用于需要实时通信、实时推送数据、实时同步编辑等场景。

一、WebSocket的特点

1. 双向通信

WebSocket实现了服务器与客户端之间的双向通信,即服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。

2. 持久连接

一旦WebSocket连接建立,它将持续存在,直到被显式关闭。这种持久连接避免了HTTP请求/响应模式中的频繁握手和断开连接的开销。

3. 高效性

WebSocket使用较少的开销来维持连接,并且数据格式轻量,性能开销小,通信高效。

4. 兼容性和灵活性

WebSocket与HTTP协议有着良好的兼容性,默认端口也是80和443,并且握手阶段采用HTTP协议。此外,WebSocket可以发送文本和二进制数据,并且没有同源限制。

二、WebSocket与HTTP的区别

1. 连接性质

WebSocket是一种持久化的协议,连接不会在一次请求之后立即断开,而HTTP协议是基于请求-响应模式的,每次请求都需要客户端发起新的连接,并在收到响应后关闭。

2. 通信方式

WebSocket允许在客户端和服务器之间建立持久性的双向连接,客户端和服务器可以通过这个连接实时的交换数据。HTTP协议则是无状态的请求-响应协议,客户端向服务器发送请求,服务器处理请求并返回响应。

3. 数据格式

WebSocket协议支持传输文本或二进制数据,数据格式更加灵活,可以根据应用程序的需要自定义。HTTP协议通常用于传输文档、图像、视频等静态资源或者动态资源,数据格式通常是文本或者是二进制,但在每次请求和响应中都需要携带HTTP的头部信息。

4. 性能和效率

WebSocket通过在客户端和服务器之间建立持久连接,减少建立和关闭的开销,通信效率更高,延迟更低。HTTP协议在每次请求-响应周期中都需要消耗额外的资源来建立和关闭连接,通信效率相对较低。

三、WebSocket的握手过程

WebSocket连接的建立从一个HTTP请求开始,这个请求通常被称为“握手”请求。在请求中,客户端通过Upgrade和Connection头字段表示希望将协议从HTTP升级到WebSocket。服务器如果同意升级,会返回一个状态码为101 Switching Protocols的响应,表示协议升级成功。

四、WebSocket的常用应用场景

1. 实时聊天

WebSocket可以用于实现即时通讯功能,如在线聊天室、多人游戏等。

2. 实时数据更新

WebSocket可以用于实时地推送数据更新,如实时股票行情、实时天气预报等。

3. 协同编辑

WebSocket可以用于实现多人协同编辑功能,如在线文档协作、团队代码编辑等。

4. 实时监控

WebSocket可以用于实时监控系统,如监控设备的运行状态、实时监测交通流量等。

五、WebSocket的前端(Vue)实现

在Vue中使用WebSocket可以通过以下几个步骤来实现:

1. 创建WebSocket实例

const socket = new WebSocket('ws://your-websocket-server-url');

在这个示例中,用WebSocket构造函数创建了一个新的WebSocket实例,并传入了WebSocket服务器的URL。

2. 处理WebSocket事件

// 连接打开事件
socket.onopen = function(event) {console.log('WebSocket is open now.');
};// 消息接收事件
socket.onmessage = function(event) {console.log('WebSocket message received:', event);
};// 错误事件
socket.onerror = function(event) {console.error('WebSocket error observed:', event);
};// 连接关闭事件
socket.onclose = function(event) {console.log('WebSocket is closed now.');
};

3. 在Vue组件中使用WebSocket

<template><div><h1>WebSocket Example</h1><p>{{ message }}</p></div>
</template><script>
export default {data() {return {socket: null,message: ''};},created() {// 创建WebSocket实例this.socket = new WebSocket('ws://your-websocket-server-url');// 连接打开事件this.socket.onopen = (event) => {console.log('WebSocket is open now.');};// 消息接收事件this.socket.onmessage = (event) => {console.log('WebSocket message received:', event);this.message = event.data;};// 错误事件this.socket.onerror = (event) => {console.error('WebSocket error observed:', event);};// 连接关闭事件this.socket.onclose = (event) => {console.log('WebSocket is closed now.');};},beforeDestroy() {// 组件销毁前关闭WebSocket连接if (this.socket) {this.socket.close();}}
};
</script>

在这个示例中,我们在Vue组件的created生命周期钩子中创建了WebSocket实例,并添加了相应的事件处理程序。此外,我们还在组件销毁前的beforeDestroy钩子中关闭了WebSocket连接,以确保资源的正确释放。

六、WebSocket的后端(Java)实现

在Java后端使用WebSocket,首先需要添加WebSocket的依赖:

<!-- 引入websocket -->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.1.8.RELEASE</version>
</dependency>

接下来,创建一个WebSocket配置类:

@Configuration
public class WebSocketConfiguration {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

然后,定义一个WebSocket服务端组件:

@Component
@ServerEndpoint("/ws/{clientId}")
public class WebSocketServer {private static Map<String, Session> sessionMap = new HashMap<>();@OnOpenpublic void opOpen(Session session, @PathParam("clientId") String clientId) {System.err.println("客户端:" + clientId + "建立连结");sessionMap.put(clientId, session);}@OnClosepublic void onClose(@PathParam("clientId") String clientId) {sessionMap.remove(clientId);}@OnMessagepublic void onMessage(String message, @PathParam("clientId") String clientId) {System.err.println("收到来自客户端" + clientId + "的消息:" + message);}public void sendToAllClient(String message) {Collection<Session> sessions = sessionMap.values();for (Session session : sessions) {try {session.getBasicRemote().sendText(message);} catch (Exception e) {e.printStackTrace();}}}
}

在这个示例中,我们定义了一个WebSocket服务端组件,它包含连接打开、消息接收、连接关闭等事件的处理方法。同时,我们还提供了一个方法来向所有客户端发送消息。

七、WebSocket的心跳机制

为了确保WebSocket连接的活跃状态,通常会实现心跳机制。在客户端和服务器之间定期发送心跳消息,如果在一定时间内没有收到对方的心跳消息,则认为连接已经断开。

八、WebSocket的安全性

WebSocket连接需要特殊的安全设置以防止恶意攻击和数据泄漏。通常,可以使用SSL/TLS协议来加密WebSocket通信,以确保数据的安全性。

总结

WebSocket是一种强大的实时通信协议,它的双向通信和持久连接特性使得它在许多实时应用场景中发挥着重要作用。然而,在使用WebSocket时也需要注意其兼容性和安全性问题,并合理评估其对服务器资源的占用情况。通过前后端的协同工作,我们可以轻松实现实时通信功能,提升用户体验。

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

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

相关文章

类和对象——拷贝构造函数,赋值运算符重载(C++)

1.拷⻉构造函数 如果⼀个构造函数的第⼀个参数是自身类类型的引用&#xff0c;且任何额外的参数都有默认值&#xff0c;则此构造函数也叫做拷贝构造函数&#xff0c;也就是说拷贝构造是⼀个特殊的构造函数。 // 拷贝构造函数//d2(d1) Date(const Date& d) {_year d._yea…

STM32G4的数模转换器(DAC)功能介绍

目录 概述 1 DAC介绍 1.1 功能 1.2 主要特征 1.3 DAC特性总结 ​2 DAC模块框架结构 3 DAC数据格式 3.1 单DAC通道 3.2 双通道数据格式 3.3 有符号、无符号数据 4 DAC数据转换 ​5 DAC输出电压 概述 本文主要介绍STM32G4的数模转换器&#xff08;DAC&#xff09;功能&a…

Pointnet++改进68:添加FFCM |融合傅里叶卷积

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3 步骤三 1.理论介绍 …

Linux:解决远程X无法连通问题,X-Server开启TCP连接

一、问题分析 提前申明&#xff1a; 本次实验使用REHL 8 进行操作&#xff01; 客户机 A 为X-Client &#xff0c;即远程X的客户端。 服务机 B 为X-Server&#xff0c;即远程X的服务端。 问题的所有操作均在已经配置好Xorg的前提下进行的&#xff0c;不知道不配置会有什么影响&…

零基础Java第十九期:认识String(一)

目录 一、String的重要性 二、String的常用方法 2.1. 字符串构造 2.2. String对象的比较 2.3. 字符串查找 2.4. 转化 2.4. 字符串替换 2.5. 字符串拆分 2.6. 字符串截取 一、String的重要性 在C语言中已经涉及到字符串了&#xff0c;但是在C语言中要表示字符串只能…

HarmonyOS4+NEXT星河版入门与项目实战--------ArkTs语言与TypeScript语法

文章目录 1、ArkTs语言1、ArkTs 特点2、ArkTs与Javascript关系 2、TypeScript 语法 1、ArkTs语言 在html的开发中&#xff0c;实现一个页面元素&#xff0c;比如Button&#xff0c;往往包含了以下三种要素&#xff1a;JS、HTML、CSS。JS处理逻辑与响应、HTML 用来声明标签生成…

使用yak编写yakit漏洞检测插件

前言 在使用yakit进行编写yaml插件的时候遇到了yaml无法处理的情况&#xff0c;我不知道是不是yaml无法处理或者说是yakit和yaml的兼容还不够&#xff0c;面对变量的处理还是有些难受&#xff0c;于是花了点时间看了官网的yak语法的手册和其他人写的yak插件尝试使用yak语言来完…

信也科技和云杉网络的AI可观测性实践分享

1. 信也科技 2、云杉网络 2.1 中国移动

Blossom:开源私有部署的markdown笔记软件

在信息化、数字化时代&#xff0c;我们每个人的生活和工作都离不开笔记和知识管理。从简单的待办事项&#xff0c;到复杂的项目计划&#xff0c;再到存储大量个人知识的工具&#xff0c;如何选择一个高效、便捷且符合个人需求的笔记软件&#xff0c;成了许多人的难题。最近在逛…

Spring:DI依赖注入的方式

Spring为我们提供了两种注入方式&#xff0c;分别是: setter注入 简单类型引用类型 构造器注入 简单类型引用类型 setter注入 在bean中定义引用类型属性&#xff0c;并提供可访问的set方法配置中使用property标签ref属性注入引用类型对象 (1)项目中添加BookDao、BookDaoIm…

逆向攻防世界CTF系列37-crackme

逆向攻防世界CTF系列37-crackme 参考https://blog.csdn.net/xiao__1bai/article/details/120230397 nspack的壳&#xff0c;查了一下好像是北斗的一个壳 没找到什么脱壳软件&#xff0c;只能手动脱壳了 手动脱壳的最终要的是ESP定律 ESP定律的原理就是“堆栈平衡”原理 涉及…

按钮权限的操作方法

首先先在你的本地储存里边&#xff0c;加入一些你指定的字段 然后创建一个文件夹&#xff0c;在此文件夹下创建一个js文件&#xff0c;文件内容如下 在你所需要隐藏按钮的页面引入此js文件&#xff0c;并且通过 directives自定义指令绑定你的每一个按钮。在js文件中通过三个常量…

vscode 关闭绑定元素 隐式具有“any”类型这类错误

在vue的项目里面&#xff0c;经常看到any类型的报错&#xff0c;真的很烦的 在tsconfig.json中配置以下参数 “noImplicitAny”: false 就可以了 出现类型“never”上不存在属性“userName”。ts-plugin(2339) 配置该参数 modeuleResolution : node "compilerOptions&qu…

springboot 的 Profile

什么是 Profile &#xff1f; 应用所在的运行环境发生切换时&#xff0c;配置文件常常就需要随之修改。 Profile&#xff1a;——就是一组配置文件及组件的集合。 可以整个应用在不同的profile之间切换&#xff08;设置活动profile&#xff09;&#xff0c;整个应用都将使用该…

onvif协议相关:4.1.6 Digest方式云台控制启动

背景 关于onvif的其实很早之前我已经在专栏中写了不少了, 使用onvif协议操作设备 但最近有陆陆续续的粉丝问我, 希望我在写一些关于 onvif的设备自动发现、预置位跳转、云台操作的博客。 满足粉丝的需求,安排。 今天我们来实现 设备云台的控制(启动) 实现 1.在ONVIF Devi…

【JAVA毕业设计】基于Vue和SpringBoot的农机电招平台

本文项目编号 T 615 &#xff0c;文末自助获取源码 \color{red}{T615&#xff0c;文末自助获取源码} T615&#xff0c;文末自助获取源码 随着农机电招行业的不断发展&#xff0c;农机电招在现实生活中的使用和普及&#xff0c;农机电招行业成为近年内出现的一个新行业&#x…

基于Jmeter的分布式压测环境搭建及简单压测实践

写在前面 平时在使用Jmeter做压力测试的过程中&#xff0c;由于单机的并发能力有限&#xff0c;所以常常无法满足压力测试的需求。因此&#xff0c;Jmeter还提供了分布式的解决方案。本文是一次利用Jmeter分布式对业务系统登录接口做的压力测试的实践记录。按照惯例&#xff0…

代码随想录算法训练营day41|动态规划04

最后一块石头的重量|| 返回剩余最后一块石头石头最小的可能重量&#xff0c;那么就应该最后剩余的两块石头尽量都等于或接近总重量的一半&#xff0c;这样剩下的就是一半的质量 目标和 给定一个非负整数数组&#xff0c;a1, a2, …, an, 和一个目标数&#xff0c;S。现在你有…

Python+Flask实现随机选谷票游戏

西方曾进行一项著名的投资随机性实验&#xff0c;对比基金经理与猴子在选股上的表现。 实验方法&#xff1a;主持人提供一系列股票&#xff0c;基金经理依靠其专业知识&#xff08;如财务报表、行业趋势、产品市场及公司文化与管理层分析等&#xff09;进行筛选&#xff1b;而…

【Python数据可视化分析实战】数据爬取—京东手机品牌信息数据爬取和数据分析与可视化

大数据分析设计方案 1.数据集来源&#xff1a;https://search.jd.com 2.实现思路&#xff1a; &#xff08;1&#xff09;数据爬取 首先&#xff0c;我们需要从京东平台上采集手机品牌的相关数据。可以通过网络爬虫或API接口等方式获取数据。为了保证数据的完整性和准确性&…