当前位置： 首页 > news >正文

WebSocket 整合 记录用法

news 2026/2/10 12:27:35

WebSocket

介绍

WebSocket 是基于tcp的一种新的网络协议,可以让浏览器 和 服务器进行通信,然后区别于http需要三次握手,websocket只用一次握手,就可以创建持久性的连接,并进行双向数据传输
在这里插入图片描述

Http和WebSocket的区别

  • Http是短连接,WebSocket’是长连接
  • Http通信是单向的,基于请求响应,WebSocket是双向通信
  • 两者都是基于tcp连接的

他的应用场景也很广泛,最先想到的就是聊天的系统,用这个实现合理

配置

WebSocket也是springboot集成好了的,所以只要有springboot的依赖,我们再加上如下依赖就行

 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

配置类

/*** WebSocket配置类，用于注册WebSocket的Bean*/
@Configuration
public class WebSocketConfiguration {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

核心代码

既然我们要了解websocket,因为这会涉及到前端和后端的交互,也就是客户端和服务端的交互,那么我们也要去看看前端的代码,才行

前端demo代码

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>WebSocket Demo</title>
</head>
<body><input id="text" type="text" /><button onclick="send()">发送消息</button><button onclick="closeWebSocket()">关闭连接</button><div id="message"></div>
</body>
<script type="text/javascript">var websocket = null;var clientId = Math.random().toString(36).substr(2);//判断当前浏览器是否支持WebSocketif('WebSocket' in window){//连接WebSocket节点websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);}else{alert('Not support websocket')}//连接发生错误的回调方法websocket.onerror = function(){setMessageInnerHTML("error");};//连接成功建立的回调方法websocket.onopen = function(){setMessageInnerHTML("连接成功");}//接收到消息的回调方法websocket.onmessage = function(event){setMessageInnerHTML(event.data);}//连接关闭的回调方法websocket.onclose = function(){setMessageInnerHTML("close");}//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function(){websocket.close();}//将消息显示在网页上function setMessageInnerHTML(innerHTML){document.getElementById('message').innerHTML += innerHTML + '<br/>';}//发送消息function send(){var message = document.getElementById('text').value;websocket.send(message);}//关闭连接function closeWebSocket() {websocket.close();}
</script>
</html>

我们来看这里的前端测试代码,不要觉得难,其实很简单,我们抽丝剥茧的来看

首先其实就是两个按钮 + 一个输入框的,样式张这样
在这里插入图片描述

然后我们来看js代码

首先,是创建一个websocket,
然后判断浏览器是否支持websocket,如果支持的化,就发送连接

这里的url就是,ws://localhost:8080/ws/ +clientId
这里的url必须这么写,前面不是http,而是ws,后面的url,就是正常的后端的接口的url,所以后端的接口也要这么写才行

接着就是几个回调方法,
第一个是连接错误回调,

第二个是连接成功回调

第三个是接收到信息的回调,

第四个是连接关闭回调,

然后比较重要的是这个第五个,这个是监听窗口关闭的事件,窗口关闭我们需要去关闭websocket,这样以免服务端发生异常

最后就是发送消息,直接调用webscoket的send方法

总结

所以整体看下来,其实就是,一显示这个页面就会去连接websocket
然后接收来自服务端的信息,我们输入消息,也可以发送到服务端

后端代码

/*** @author jjking* @date 2024-01-29 16:49*/
@Component
@ServerEndpoint("/ws/{sid}")
public class WebSocketServer {//存放会话对象private static Map<String, Session> sessionMap = new HashMap<>();/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("sid") String sid) {System.out.println("客户端：" + sid + "建立连接");sessionMap.put(sid, session);}/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, @PathParam("sid") String sid) {System.out.println("收到来自客户端：" + sid + "的信息:" + message);}/*** 连接关闭调用的方法** @param sid*/@OnClosepublic void onClose(@PathParam("sid") String sid) {System.out.println("连接断开:" + sid);sessionMap.remove(sid);}/*** 群发** @param 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();}}}}

这个代码有点类似于webserver工具类

我比较不理解的就是这里的serverendpoint是什么意思?
我查了查,有点类似于RestController,anyway

测试代码

我这里集成了spring tast 定时发送消息给客户端,整合spring task,在我的另外一个博客里边,很简单
https://blog.csdn.net/weixin_52232901/article/details/135915032

@Component
public class WebSocketTask {@Autowiredprivate WebSocketServer webSocketServer;/*** 通过WebSocket每隔5秒向客户端发送消息*/@Scheduled(cron = "0/5 * * * * ?")public void sendMessageToClient() {webSocketServer.sendToAllClient("这是来自服务端的消息：" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));}
}

我这里的意思是每隔5秒发送一次

效果

没有开启后端化,会显示error
在这里插入图片描述

开启了后端,再打开这个前端页面
在这里插入图片描述
没问题

然后在测试发送给服务端
在这里插入图片描述

在这里插入图片描述

最后也没有问题

我们整体来看的化,我这个demo十分简单,以后我做了更加复杂的案例,再在这里记录才行

相关文章：

WebSocket 整合 记录用法

WebSocket 介绍 WebSocket 是基于tcp的一种新的网络协议,可以让浏览器 和 服务器进行通信,然后区别于http需要三次握手,websocket只用一次握手,就可以创建持久性的连接,并进行双向数据传输 Http和WebSocket的区别 Http是短连接,WebSocket’是长连接Http通信是单向的,基于请求…...

编程日记 2024/1/30 15:14:13

推荐5个我常用的软件，简单高效

​ 今天给大家推荐5个我自己也常用的软件&#xff0c;可以解决很多问题&#xff0c;给你的学习和办公带来巨大帮助。 1.快速启动——Keypirinha ​ Keypirinha是一款快速启动软件&#xff0c;可以让用户通过输入关键词来快速打开程序、文件、网页、搜索引擎等。Keypirinha支持…...

编程日记 2024/1/30 15:13:11

代码随想录训练营第三十一天|122.买卖股票的最佳时机II55.跳跃游戏45.跳跃游戏II

122.买卖股票的最佳时机II class Solution { public:int maxProfit(vector<int>& prices) {int earn0;for(int i 0; i < prices.size()-1;i){int x prices[i 1] - prices[i];if(x>0){earnx;}}return earn;} }; 55.跳跃游戏 本题关键在于看覆盖的范围 利…...

编程日记 2024/1/30 15:11:09

python17-Python的字符串格式化

Python提供了“%”对各种类型的数据进行格式化输出，例如如下代码。 # !/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2024/01# @Author : Laopiweight = 180print(老师傅的体重是 %s % weight) 上面程序就是格式化输出的关键代码，这行代码中的 print 函数包含三个部…...

编程日记 2024/1/30 15:10:07

HTTPS 之fiddler抓包--jmeter请求

一、浅谈HTTPS 我们都知道HTTP并非是安全传输&#xff0c;在HTTPS基础上使用SSL协议进行加密构成的HTTPS协议是相对安全的。目前越来越多的企业选择使用HTTPS协议与用户进行通信&#xff0c;如百度、谷歌等。HTTPS在传输数据之前需要客户端&#xff08;浏览器&#xff09;与服…...

编程日记 2024/1/30 15:06:01

Kotlin快速入门系列6

Kotlin的接口与扩展 接口 与Java类似&#xff0c;Kotlin使用interface关键字定义接口&#xff0c;同时允许方法有默认实现&#xff1a; interface KtInterfaceTest {fun method()fun methodGo(){println("上面方法未实现&#xff0c;此方法已实现")} } 接口实现 …...

编程日记 2024/1/30 15:05:00

w24文件上传之PHP伪协议

PHP支持的伪协议 file:// - 访问本地文件系统 http:// - 访问网址 ftp:// - 访问文件 php:// -访问各个输入/输出流 zlib:// -压缩流 data:// - 数据 glob:// -查找匹配的文件路径模式 phar:// - php归档 ssh2:// - Secure shell 2 rar:// - RAR ogg:// - 音频流 expect:// - …...

编程日记 2024/1/30 15:00:56

SQL注入攻击 - 基于时间的盲注

环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 1、SQL 盲注基础 盲注（Blind SQL）是注入攻击的一种形式，攻击者通过向数据库发送true或false等问题，并根据应用程序返回的信息来判断结果。这种攻击方式出现的原因是应用程序配…...

编程日记 2024/1/30 14:59:55

比VS Code快得多

Zed 是一款支持多人协作的代码编辑器&#xff0c;底层采用 Rust&#xff0c;且默认支持 Rust&#xff0c;还自带了 rust-analyzer&#xff0c;主打“高性能”。1 月 24 日&#xff0c;备受关注的 Zed 项目宣布正式开源。 Zed 代码库将采用 Copyleft 许可证&#xff0c;其中编辑…...

编程日记 2024/1/30 14:58:53

将一个excel文件里面具有相同参数的行提取后存入新的excel

功能描述&#xff1a; 一个excel里面有很多行数据&#xff0c;其中“交易时间”这一列有很多交易日期&#xff0c;有些行的交易日期是一样的&#xff0c;那么就把所有交易日期相同的行挑出来&#xff0c;形成一个新的以交易日期命名的文件。import pandas as pd import os# 读取…...

编程日记 2024/1/30 14:57:51

Linux下安装edge

edge具有及其强大的功能&#xff0c;受到很多人的喜爱&#xff0c;它也开发Linux版本&#xff0c;下面是安装方法&#xff1a; 1.去edge官网下载Linux(.deb)文件。 https://www.microsoft.com/zh-cn/edge/download?formMA13FJ 2.下载之后输入以下指令&#xff08;后面是安装…...

编程日记 2024/1/30 14:54:47

Java / Spring Boot + POI 给 Word 添加水印

1、前言(瞎扯) 有个需求&#xff1a;整一个给 Word 加水印的demo&#xff0c;于是我就网上找呗~ 看到那个 Aspose 好像是收费的&#xff0c;然后就把目光转向了 POI&#xff0c;看到各种形形色色的也不知道哪个能用。整了一会&#xff0c;自己拷贝出一个比较精简的能用的 demo …...

编程日记 2024/1/30 14:53:46

Unity打包Android，jar文件无法解析的问题

Unity打包Android&#xff0c;jar无法解析的问题 介绍解决方案总结 介绍 最近在接入语音的SDK时&#xff0c;发现的这个问题. 当我默认导入这个插件的时候&#xff0c;插件内部的文件夹&#xff08;我下面话红框的文件夹&#xff09;名字原本为GCloudVoice&#xff0c;这时候我…...

编程日记 2024/1/30 14:52:45

postman之接口参数签名（js接口HMAC-SHA256签名）

文章目录 postman之接口参数签名&#xff08;js接口签名&#xff09;一、需求背景二、签名生成规则三、postman js接口签名步骤1. postman设置全局、或环境参数2. 配置Pre-request Scripts脚本 四、Pre-request Scripts脚本 常见工作整理1. js获取unix时间戳2. body json字符串…...

编程日记 2024/1/30 14:50:43

从c到c++——6：auto

在编写c程序时&#xff0c;需要在初始化变量时清楚地知道该变量的数据类型&#xff0c;有时这到这一点并不容易&#xff0c;在涉及到函数指针&#xff0c;多级指针时往往很难一下子给出准确的值。使用auto关键字很好的提高编程效率。 auto关键字会根据右边的类型自动生成适合的…...

编程日记 2024/1/30 14:47:39

前端面试题：字符串中字符出现的最多次数

前端基础算法面试题，一个字符串中，出现最多的字符以及出现的次数。 1.首先对字符串转换成字符串数组，然后对字符串数组进行排序，得到一个有序的数组 2.然后对排序后的字符串数组，进行查找 3.每次找到字符出现的最后的位置，然后进行计数 4.得到最终结果 function get…...

编程日记 2024/1/30 14:43:35

获取鼠标点击图片时候的坐标，以及利用html 中的useMap 和area 实现图片固定位置的点击事件

一 编写原因 应项目要求&#xff0c;需要对图片的固定几个位置分别做一个点击事件&#xff0c;响应不同的操作&#xff0c;如下图&#xff0c;需要点击红色区域&#xff0c;弹出不同的提示框&#xff1a; 二 获取点击图片时候的坐标 1. 说明 实现这以上功能的前提是需要确定需…...

编程日记 2024/1/30 14:40:32

webassembly003 TTS BARK.CPP

TTS task TTS&#xff08;Text-to-Speech&#xff09;任务是一种自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;其中模型的目标是将输入的文本转换为声音&#xff0c;实现自动语音合成。具体来说&#xff0c;模型需要理解输入的文本并生成对应的语音输出&#xff0…...

编程日记 2024/1/30 14:35:25

HiveSQL题——排序函数(row_number/rank/dense_rank)

一、窗口函数的知识点 1.1 窗户函数的定义 窗口函数可以拆分为【窗口函数】。窗口函数官网指路&#xff1a; LanguageManual WindowingAndAnalytics - Apache Hive - Apache Software Foundationhttps://cwiki.apache.org/confluence/display/Hive/LanguageManual%20Windowin…...

编程日记 2024/1/30 14:34:23

【C语言】（9）分支结构

一.if-else 语句 if-else 适用于简单和复杂的条件判断。 a. 基本 if 语句 用途&#xff1a;基本的条件测试。语法&#xff1a;if (condition) {// 代码块 }示例&#xff1a;if (score > 60) {printf("及格\n"); }b. if-else 语句 用途&#xff1a;二选一的条件…...

编程日记 2024/1/30 14:33:22

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/2/7 15:39:49

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2026/1/23 7:37:12

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2026/2/2 20:26:17

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11