WebSocket 快速入门 - springboo聊天功能

目录

一、概述 

1、HTTP(超文本传输协议)

2、轮询和长轮询 

3、WebSocket

二、WebSocket快速使用

1、基于Java注解实现WebSocket服务器端

2、JS前端测试

三、WebSocket进阶使用

1、如何获取当前用户信息

2、 后端聊天功能实现


一、概述 

HTTP和WebSocket都是啥?

1、HTTP(超文本传输协议)

        比如我们去逛某宝的商品列表,从HTTP协议的角度来看,前端发送了一次HTTP请求,服务器返回一次HTTP响应。不过从始至终服务器都不会主动给客户端发送消息请求,这就是HTTP协议的特点。

        HTTP有轮询和长轮询是两种客户端与服务器之间进行数据交换的技术,常用于实现网页上的实时数据更新。这些技术在 WebSocket 出现之前特别流行,尤其是在需要从服务器实时获取更新的场景中。

2、轮询和长轮询 

轮询是一种客户端定时发送请求到服务器的技术,以检查是否有新数据可用。这是一种非常直接的方法,客户端每隔一定时间(如每5秒)向服务器发起HTTP请求,无论服务器是否真的有新数据提供。

  1. 客户端发起HTTP请求到服务器。
  2. 服务器立即响应,返回数据(如果有新数据)或者返回一个空响应。
  3. 客户端处理响应,然后等待一定的时间。
  4. 时间到了之后,客户端再次发送请求。
  5. 这个过程持续重复。

 缺点也很明显,这样频繁的向后端发起请求必定会给服务器带来大量不必要的数据流量和服务器负载,而且实时性不足,为此有了长轮询

长轮询是轮询的一个改进版本,可以提供更快的响应时间和更少的服务器负载。与传统轮询不同,长轮询在服务器没有数据可发送时不会立即响应客户端的请求。而是保持连接开放,直到有数据发送或达到预设的超时时间。

  1. 客户端发送HTTP请求到服务器。
  2. 服务器不立即响应。它将请求挂起,直到有新数据可用或超时。
  3. 一旦有新数据可用,服务器立即响应请求,发送数据给客户端。
  4. 客户端收到数据并处理后,立即发起新的请求,重复此过程。

这样减少了不必要的HTTP请求,因为每次请求都可能得到有效数据,而且响应速度更快,因为数据一旦可用,客户端会立即收到通知。

3、WebSocket

        又比如我们玩传奇一刀999的网页游戏,我们甚至全程都没有点一次鼠标,但是服务器就源源不断地将怪物的移动数据和攻击数据发给我们。这种服务器可以主动给客户端发送消息的可双向传输数据场景就是使用了WebSocket协议。

底层原理:

  • WebSocket协议建立在TCP协议基础上,所以服务器也容易实现,不同的语言都有支持。
  • tcp协议是全双工协议,http协议基于它,但设计成了单向
  • WebSocket没有同源限制。(什么是同源看这里: localhost跨域问题解决-CSDN博客)
  • WebSocket连接开始于一个HTTP请求,这个过程叫做握手这个请求包含特定的头部信息,表明客户端希望将连接“升级”为WebSocket。如果服务器接受请求,它会返回一个响应,同意升级到WebSocket。此后,这个TCP连接将用于WebSocket通信,而不是传统的HTTP请求和响应。

至于Socket协议,套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开、读写和关闭等操作。套接字允许应用程序将I/O插入到网络中,并与网络中的其他应用程序进行通信。网络套接字是IP地址与端口的组合。它偏向于底层,与WebSocket的关系就如Java和JavaScript,可以说是除了名字相似之外没什么关系。 


二、WebSocket快速使用

1、基于Java注解实现WebSocket服务器端

需要使用到的类

首先这里需要着重说明一下,WebSocket中的Session对象与传统的前端发起HTTP请求时携带的那个session( token )概念是有所不同的。

它们有以下关键区别:

1、WebScokeT

  • Session在这里指的是由 Jakarta WebSocket API 提供的一个对象,它代表了一个 WebSocket 连接。
  • 每个 WebSocket的Session是独立的,代表了服务器与一个特定客户端之间的持续连接。
  • WebSocket连接是全双工的,允许数据在任何时候从任一端向另一端发送,适用于需要实时数据交换的场景。

2、HTTP

  • 在HTTP中,session 通常是用来在多个请求之间保存用户数据的一种方式,常通过 cookie 或 session 存储在服务器端。
  • Token,如 JWT(Json Web Tokens),通常用于身份验证和保持状态,是一个可以在客户端和服务器之间安全传输的加密信息。
  • HTTP请求是无状态的,通常每次请求之间不直接保持连接,每个请求都需要重新进行连接和身份验证。
/*** 监听WebSocket地址/ws*/
@ServerEndpoint("/ws")
@Component
@Slf4j
public class WebSocketServerEndpoint {//线程安全的HashMapstatic Map<String,Session> sessionMap = new ConcurrentHashMap<>();//websocket连接成功就立即触发该注解修饰的方法@OnOpenpublic void onOpen(Session session){sessionMap.put(session.getId(),session);log.info("WebSocket is open");}//websocket收到客户端消息便会立即触发该方法@OnMessagepublic String onMessage(String message){log.info("收到了一条消息: " + message);return "已经收到了你的消息";}//websocket关闭连接就立即触发该方法@OnClosepublic void onClose(Session session){sessionMap.remove(session);log.info("Websocket is close");}}

因此我们在这段基础代码中看到Session对象,实际上它就是每一个与该WebSocket服务器连接的独立的客户端对象。 

此时还不可以直接使用,虽然已经使用@Component修饰,但是还需要使用ServerEndpointExporter,它会扫描所有声明了@ServerEndpoint注解的Beans,并将它们注册到WebSocket服务器,使它们能够接收WebSocket连接请求。

@Configuration
public class WebSocketConfig {/*** 这个bean对象可以自动注册使用了@ServerEndpoint的Bean*/@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}}

此时一个最基础的WebSocket服务器就搭建好了。

2、JS前端测试

写一个最简单的按钮,点击触发向ws发送一个Hello消息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ws-client</title>
</head>
<body>
<button id="sendMessage">打招呼!
</button>
</body>
<script>const button = document.getElementById('sendMessage');button.addEventListener("click", () => {const ws = new WebSocket("ws://localhost:8888/ws");ws.onopen = function () {console.log("Connection opened!");ws.send("hello!");};ws.onmessage = function (message) {console.log("Received:", message.data);};});
</script>
</html>


可以看到我们点击了按钮向后端发送了hello,之后后端就自动调用了@onMessage方法,向我们这个Session对象返回了消息message,最终调用了前端的onmessage将信息打印在了控制台上。

不过这样看起来似乎和一个HTTP协议没什么区别,同样都是前端发送一个请求然后后端返回一个数据。因此为了体现websocket能够主动的向客户端发送信息我们写一个定时器每两秒向服务器发送数据。

首先要在启动类上加上@EnableScheduling注解,这是用于在 Spring 应用中启用基于注解的定时任务。当你在配置类上加上@EnableScheduling注解后,Spring 的任务调度器将会被激活,使得你可以使用@Scheduled注解来定义具体的定时任务。
'

 /*** 模拟服务器每两秒主动向客户端发起请求* @throws IOException*/@Scheduled(fixedDelay = 2000)public void sendMessage() throws IOException {for (String key: sessionMap.keySet()){sessionMap.get(key).getBasicRemote().sendText("心跳");}}

成功实现服务器每2秒向客户端发起一次数据 


三、WebSocket进阶使用

1、如何获取当前用户信息

        我们平常做一个软件,肯定都会使用到身份验证用于区分不同的用户。但是我们前面刚刚提到过WebSocket的Session与Http的Session不是同一个东西,那么我们想要实现两个用户聊天该如何实现呢?

public class GetTokenConfig extends ServerEndpointConfig.Configurator {@Overridepublic void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {// 获取请求头中的token(假设token存放在名为"Authorization"的请求头中)List<String> tokenHeader = request.getHeaders().get("Authorization");if (tokenHeader != null && !tokenHeader.isEmpty()) {String token = tokenHeader.get(0);// 将token保存起来sec.getUserProperties().put("token", token);}}
}

在这段代码中,我们创建一个类继承ServerEndpointConfig.Configurator,重写其中的modifyHandshake方法

        其实顾名思义,就是对WebSocket的握手进行了操作,我们一开始就提到过,WebSocket开始于一个HTTP请求,这个过程被称为握手,之后才开始WebSocket连接。虽然WebSocket本身并没有在建立连接后发送请求头的能力,不过在一开始握手的时候中是可以携带请求头的。

其中HandshakeRequest虽然与我们常用的HttpRequest没有什么关系,不过在使用的时候你可以简单粗暴的将它看作HttpRequest。

其次的ServerEndpointConfig其实就是EndpointConfig,将token存储在这个里面就可以方便别的类使用这个token了

我们稍微修改一下我我们之前的代码

/*** 监听WebSocket地址/ws*/
@ServerEndpoint(value = "/ws", configurator = GetTokenConfig.class)
@Component
@Slf4j
public class WebSocketServerEndpoint {@Autowiredprivate JwtProperties jwtProperties;static Map<String, WebSocketServerEndpoint> onlineUsers = new ConcurrentHashMap<>();private Session session;private String token;//websocket连接成功就立即触发该注解修饰的方法@OnOpenpublic void onOpen(Session session, EndpointConfig config) {log.info("WebSocket is open,连接成功");this.session = session;// 从EndpointConfig获取tokenString token = (String) config.getUserProperties().get("token");this.token = token;log.info("token: " + token);this.jwtProperties = BeanUtil.getBean(JwtProperties.class);//从token中获取一下用户信息Integer userId = JwtUtil.getUserIdFromToken(jwtProperties.getUserSecretKey(), token);String username = JwtUtil.getUsernameFromToken(jwtProperties.getUserSecretKey(), token);log.info("当前用户:ID: " + userId + " Username " + username);}}

使用Postman测试一下,因为JavaScript原生的Websocket的API没有直接携带请求头的能力

2、 后端聊天功能实现

/*** 监听WebSocket地址/ws*/
@ServerEndpoint(value = "/ws", configurator = GetTokenConfig.class)
@Component
@Slf4j
public class WebSocketServerEndpoint {@Autowiredprivate JwtProperties jwtProperties;static Map<Integer, Session> onlineUsers = new ConcurrentHashMap<>();private Integer userId;//websocket连接成功就立即触发该注解修饰的方法@OnOpenpublic void onOpen(Session session, EndpointConfig config) {log.info("WebSocket is open,连接成功");// 从EndpointConfig获取tokenString token = (String) config.getUserProperties().get("token");log.info("token: " + token);this.jwtProperties = BeanUtil.getBean(JwtProperties.class);//从token中获取一下用户信息Integer userId = JwtUtil.getUserIdFromToken(jwtProperties.getUserSecretKey(), token);String username = JwtUtil.getUsernameFromToken(jwtProperties.getUserSecretKey(), token);this.userId = userId;// 将userId存储在Session的用户属性中session.getUserProperties().put("userId", userId);log.info("当前用户:ID: " + userId + " Username " + username);onlineUsers.put(userId,session);}//websocket收到客户端消息便会立即触发该方法@OnMessagepublic void onMessage(String message,Session session) {//将message转换成Message对象try {ObjectMapper mapper = new ObjectMapper();Message msg = mapper.readValue(message,Message.class);//获取要将数据发送给的用户Integer receiver = msg.getReceiver();//获取消息数据String data = msg.getMessage();//获取当前登录的这个用户,也就是发送者Integer senderId = (Integer) session.getUserProperties().get("userId");ResultMessage resultMessage = ResultMessage.builder().message(data).sender(senderId).build();//发送onlineUsers.get(receiver).getBasicRemote().sendText(mapper.writeValueAsString(resultMessage));} catch (IOException e) {e.printStackTrace();}}//websocket关闭连接就立即触发该方法@OnClosepublic void onClose(Session session) {Integer userId = (Integer) session.getUserProperties().get("userId");if (userId != null) {onlineUsers.remove(userId);log.info("WebSocket is closed and user removed from onlineUsers: UserID = " + userId);} else {log.warn("User ID not found in session properties on close.");}}}

测试

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

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

相关文章

PVE grub resue错误修复 lvmid BUG

服务器断电后启动不起来&#xff0c;显示grub resue 找了半天没有找到修复方法。看官方文档有一处Recovering from grub “disk not found” error when booting from LVM 极为类似。https://pve.proxmox.com/wiki/Recover_From_Grub_Failure 下面是处理过程。 使用PVE 6.4启…

Leetcode算法训练日记 | day33

专题九 贪心算法 一、跳跃游戏 1.题目 Leetcode&#xff1a;第 55 题 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 …

机器学习(二)之监督学习

前言&#xff1a; 上一节大概讲解了几种学习方式&#xff0c;下面几张就具体来讲讲监督学习的几种算法。 以下示例中和都是权重的意思&#xff01;&#xff01;&#xff01; 注&#xff1a;本文如有错误之处&#xff0c;还请读者指出&#xff0c;欢迎评论区探讨&#xff01; 1…

MATLAB实现图片栅格化

MATLAB实现图片栅格化 1.读取图片&#xff1a;首先&#xff0c;你需要使用imread函数读取要栅格化的图片。 2.设置栅格大小&#xff1a;确定你希望将图片划分成的栅格大小&#xff0c;即每个栅格的宽度和高度。 3.计算栅格数量&#xff1a;根据图片的总尺寸和栅格大小&#…

Compose 布局

文章目录 Compose 布局ColumnColumn属性使用 RowRow属性使用 BoxBox属性使用 ConstraintLayoutLazyColumnLazyColumn属性使用使用多类型使用粘性标题回到顶部 LazyRowLazyRow属性使用 LazyVerticalGridLazyVerticalGrid属性使用 Compose 布局 Column Compose中的”垂直线性布…

F-logic DataCube3 SQL注入漏洞复现(CVE-2024-31750)

0x01 产品简介 F-logic DataCube3是一款用于光伏发电系统的紧凑型终端测量系统。 0x02 漏洞概述 F-logic DataCube3 /admin/pr_monitor/getting_index_data.php 接口处存在SQL注入漏洞,未经身份验证的攻击者可通过该漏洞获取数据库敏感信息,深入利用可控制整个web服务器。 …

计算机图形学:直线生成算法—DDA

DDA&#xff08;Digital Differential Analyzer&#xff0c;数字差分分析器&#xff09;算法是一种基本的直线生成算法&#xff0c;通常用于计算机图形学中。它通过将直线划分为若干个等间隔的小线段&#xff0c;然后在每个小线段中选择一个像素点进行绘制&#xff0c;从而近似…

产品原型图概念

产品原型图概念 产品原型图作用 如下图&#xff1a; 产品原型图的三种分类 线框图 通过【线段色块文字】描述产品页面。优点&#xff1a;制作快速。 缺点&#xff1a;传递信息容易遗漏。 应用&#xff1a;早期方案讨论&#xff0c;需要快速输出的场景&#xff0c;团队配合…

Learn ComputeShader 01 First Computer Shader

使用Unity版本&#xff1a;2019.4.12f1 整体流程&#xff1a; 1添加一个quad object并添加一个无光照材质 2.相机投影模式设置为正交 3.调整quad使其完全显示在相机内 4.创建脚本并且使用计算着色器覆盖quad的纹理 5.创建一个compute shader 前三步完成以后结果应该是这…

网络基础先导

前言&#xff1a;最好在牢固前面几大件&#xff08;编程语言、数据结构、操作系统&#xff09;&#xff0c;并且您有一个服务器的基础上&#xff08;我使用的是腾讯云中配置最低的服务器&#xff09;再来学习本系列的网络知识。 1.网络发展简要 下面就是简单提及一些概念而已&…

二叉树之AVL树

文章目录 1. AVL树的概念&#xff08;logN)1.1背景1.2规则 2.AVL树节点的定义3.AVL树的插入4. AVL树的旋转(重点&#xff09;4.1 新节点插入较高的右子树的右侧&#xff1a;左单璇&#xff1b;4.2 新节点插入较高左子树的左侧&#xff1a;右单璇&#xff1b;4.3&#xff08;双旋…

AJAX——ajax原理

1.XMLHttpRequest 定义&#xff1a;XMLHttpRequest&#xff08;XHR&#xff09;对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL&#xff0c;获取数据。这允许网页在不影响用户操作的情况下&#xff0c;更新页面的局部内容。XMLHttpRequest在AJA…

数据输入输出流(I/O)

文章目录 前言一、数据输入输出流是什么&#xff1f;二、使用方法 1.DataInputStream类2.DataOutoutStream类3.实操展示总结 前言 数据输入输出流也是将文件输入输出流打包后使用的对象。相比于文件输入输出流&#xff0c;数据输入输出流提供了简单易用的方法去操作不同类型的数…

【FreeRTOS】常用API接口

【FreeRTOS】常用API接口 为方便快速检索&#xff0c;这里只留下对应的接口名和功能注释&#xff0c;具体传参和使用方法拿函数名百度搜。 任务相关 xTaskCreate() //创建任务 vTaskDelete( NULL ); //删除任务&#xff0c;传入NULL为删除当前的任务 vTaskStartScheduler()&…

【微服务】spring读取配置文件多种方式深入详解

目录 一、前言 二、java配置文件介绍 2.1 java配置文件产生原因 2.2 项目使用配置文件好处 2.3 springboot项目配置文件的必要性 2.4 微服务架构下配置文件使用场景 三、java读取配置文件常用方法 3.1 使用Properties类读取配置文件 3.1.1 使用getResourceAsStream读取…

时序分析基础(6)——input delay时序分析

1 简介 FPGA对于外部的时钟以及数据的延时信息是不知道的&#xff0c;在低速时钟且时钟发射沿在数据正中心的时候&#xff0c;一般可以不做约束来直接使用。但是到了高速时钟或者双沿采样或者发射沿和数据对齐的情况下&#xff0c;这时候就需要告诉VIVADO外部的时钟与数据情况来…

多轴机械臂/正逆解/轨迹规划/机器人运动学/Matlab/DH法 学习记录03——机械臂运动学逆解

系列文章目录 本科毕设正在做多轴机械臂相关的内容&#xff0c;这里是一个学习机械臂运动学课程的相关记录。 如有任何问题&#xff0c;可发邮件至layraliufoxmail.com问询。 1. 数学基础 2. 机械臂几何法与DH表示法 3. 机械臂运动学逆解 文章目录 系列文章目录一、引言1.手臂…

文件系统和软硬链接

文章目录 文件系统磁盘磁盘逻辑抽象inode 软硬链接软链接硬链接 文件系统 文件分为打开的文件和没有被打开的文件&#xff0c;而只有打开的文件是在内存的&#xff0c;也就是我们之前讲的&#xff0c;然而大部分文件都不是被打开的(当前不需要被访问的)&#xff0c;它们都在磁…

硬盘日常使用中的注意事项

硬盘是计算机中的重要存储设备,负责存储大量的数据。为了确保数据的完整性和硬盘的寿命,日常使用中需要注意以下几点: 避免震动和撞击:硬盘在工作时,内部的磁盘正在高速旋转,任何轻微的震动或撞击都可能导致磁盘损坏或数据丢失。因此,使用硬盘时应确保计算机放置稳定,避…

输电线路运行特性及简单电力系统潮流估算(二)

本篇为本科课程《电力系统稳态分析》的笔记。 本篇为这一章的第二篇笔记。上一篇传送门&#xff0c;下一篇传送门。 输电线路的运行特性 输电线路的空载运行特性 线路的等值电路如图所示。 由于是空载&#xff0c;则 S ~ 2 0 \widetilde{S}_20 S 2​0&#xff0c;可以计算…