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

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

Leetcode算法训练日记 | day33

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

机器学习（二）之监督学习

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

MATLAB实现图片栅格化

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

搜索+剪枝，LeetCode 216. 组合总和 III

目录 一、题目 1、题目描述 2、接口描述 python3 cpp 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 python3 cpp 一、题目 1、题目描述 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多…
阅读更多...
Compose 布局

Compose 布局

文章目录 Compose 布局ColumnColumn属性使用 RowRow属性使用 BoxBox属性使用 ConstraintLayoutLazyColumnLazyColumn属性使用使用多类型使用粘性标题回到顶部 LazyRowLazyRow属性使用 LazyVerticalGridLazyVerticalGrid属性使用 Compose 布局 Column Compose中的”垂直线性布…
阅读更多...
F-logic DataCube3 SQL注入漏洞复现(CVE-2024-31750)

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

DDA&#xff08;Digital Differential Analyzer&#xff0c;数字差分分析器&#xff09;算法是一种基本的直线生成算法&#xff0c;通常用于计算机图形学中。它通过将直线划分为若干个等间隔的小线段&#xff0c;然后在每个小线段中选择一个像素点进行绘制&#xff0c;从而近似…
阅读更多...
R-Tree：空间索引技术原理及实现详解

R-Tree：空间索引技术原理及实现详解

R-Tree&#xff1a;空间索引技术原理及实现详解 一、引言 在空间数据库中&#xff0c;如何高效地查询和处理空间数据一直是研究的热点。R-Tree作为一种重要的空间索引结构&#xff0c;在地理信息系统&#xff08;GIS&#xff09;、空间数据库管理系统等领域得到了广泛应用。本…
阅读更多...
三十二章、Cesium从入门到精通；

三十二章、Cesium从入门到精通；

一、打造第一个Cesium程序&#xff1b; 1、基础概念&#xff1b; 父子组件之间可以传递数据&#xff1a;props、回传事件&#xff1b; 使用Redux使用场景&#xff1a;兄弟&#xff1b; 2、代码样例&#xff1b; 11111111 二、Cesium基础设置&#xff1b; 三、讲解viewer…
阅读更多...
产品原型图概念

产品原型图概念

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

Java算法必备之快读

背景: 在一些算法题中,由于数据量过大,可能会出现卡输入输出时间的问题 原理: 在Java中,输入通常是使用Scanner,输出使用System.out,先说输入 Scanner in new Scanner(System.in);慢的原因有两方面: System.in在读取的时候是字节流进行读取,是一个字节一个字节读取的,在读取…
阅读更多...
【工作杂记】groupBy排序-操作word

【工作杂记】groupBy排序-操作word

1.stream 流 groupBy 排序 stream流groupBy默认使用的HashMap&#xff0c;无序的&#xff0c;想要实现有序&#xff0c;需要手动指定接收的map类型 例子&#xff1a; Map<Date, List<OrderVo>> dataMap voList.stream().sorted(Comparator.comparing(OrderVo::ge…
阅读更多...
华为OD-C卷-执行任务赚积分[100分]C++ 100%

华为OD-C卷-执行任务赚积分[100分]C++ 100%

题目描述 现有N个任务需要处理，同一时间只能处理一个任务，处理每个任务所需要的时间固定为1。 每个任务都有最晚处理时间限制和积分值，在最晚处理时间点之前处理完成任务才可获得对应的积分奖励。 可用于处理任务的时间有限，请问在有限的时间内，可获得的最多积分。 输…
阅读更多...
Learn ComputeShader 01 First Computer Shader

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.网络发展简要 下面就是简单提及一些概念而已&…
阅读更多...
多线程（64）如何设计一个高性能的订单处理系统

多线程（64）如何设计一个高性能的订单处理系统

设计一个高性能的订单处理系统需要考虑多个方面&#xff0c;包括但不限于系统架构、数据一致性、可伸缩性、容错性以及性能优化。以下是设计这样一个系统的一些关键考虑因素和实现策略。 系统架构 微服务架构&#xff1a;将订单系统分解成独立的微服务&#xff0c;例如订单创建…
阅读更多...
二叉树之AVL树

二叉树之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原理

AJAX——ajax原理

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

数据输入输出流（I/O）

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

Copyright @ 2022~2023