WebSocket 整合 记录用法

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十分简单,以后我做了更加复杂的案例,再在这里记录才行

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

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

相关文章

互联网加竞赛 基于深度学习的人脸表情识别

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的人脸表情识别 该项目较…

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

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

【Algorithms 4】算法(第4版)学习笔记 01 - 1.5 案例研究:union-find算法

文章目录 前言参考目录学习笔记1&#xff1a;动态连通性2&#xff1a;UF 实现 1&#xff1a;快速查找 quick-find2.1&#xff1a;demo 演示 12.2&#xff1a;demo 演示 22.3&#xff1a;quick-find 代码实现3&#xff1a;UF 实现 2&#xff1a;快速合并 quick-union3.1&#xf…

【Java 数据结构】二叉树

二叉树 1. 树型结构&#xff08;了解&#xff09;1.1 概念1.2 概念&#xff08;重要&#xff09;1.3 树的表示形式&#xff08;了解&#xff09;1.4 树的应用 2. 二叉树&#xff08;重点&#xff09;2.1 概念2.2 两种特殊的二叉树2.3 二叉树的性质2.4 二叉树的存储2.5 二叉树的…

【人工智能课程】计算机科学博士作业二

使用TensorFlow1.x版本来实现手势识别任务中&#xff0c;并用图像增强的方式改进&#xff0c;基准训练准确率0.92&#xff0c;测试准确率0.77&#xff0c;改进后&#xff0c;训练准确率0.97&#xff0c;测试准确率0.88。 1 导入包 import math import warnings warnings.filt…

【力扣经典面试题】80. 删除有序数组中的重复项 II

题目 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 说明&…

SpringBoot---创建项目

介绍 此项目SpringBoot使用的是2.6.1版本&#xff0c;由于这个项目使用的是maven聚合方式创建的&#xff0c;所以第二步是我在聚合方式下需要添加的依赖&#xff0c;完整的pom.xml内容放到了最下面。 第一步&#xff1a;创建Maven项目 这个里什么也不勾选&#xff0c;直接点…

JDK Locale的妙用:探索多语言和地区设置的强大功能

文章目录 前言应用场景国际化&#xff08;Internationalization&#xff09;格式化&#xff08;Formatting&#xff09;日期格式化数字格式化金额格式化百分比形式格式化 获取Locale信息 前言 JDK&#xff08;Java Development Kit&#xff09;的Locale类用于表示特定的地理、…

openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错

文章目录 openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错210.1 谓词下推引起的查询报错210.1.1 问题现象210.1.2 原因分析210.1.3 处理办法 openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错 210.…

8-小程序数据promise化、共享、分包、自定义tabbar

小程序API Promise化 wx.requet 官网入口 默认情况下&#xff0c;小程序官方异步API都是基于回调函数实现的 wx.request({method: , url: , data: {},header: {content-type: application/json // 默认值},success (res) {console.log(res.data)},fail () {},complete () { }…

[M思维] lc2808. 使循环数组所有元素相等的最少秒数(思维+哈希表+代码实现)

文章目录 1. 题目来源2. 题目解析 1. 题目来源 链接&#xff1a;2808. 使循环数组所有元素相等的最少秒数 2. 题目解析 一道比较简单的思维题吧&#xff0c;将一维数组首尾连接变成环&#xff0c;会发现相同元素中间的距离 / 2&#xff0c;就是需要感染的秒数。包括首尾连接…

linux 脚本 正则表达式

正则表达式 分类 基础正则表达式:BRE 扩展正则表达式:ERE 编程语言支持的高级正则表达式 BRE 和 ERE的语法基本一致&#xff0c;只有部分元字符(预定义好的带有特殊含义的一些符号)需要特殊对待 grep sed 默认使用的基本正则表达式&#xff0c;grep -E,sed -r,egrep,awk使…

zookeeper源码(07)leader、follower和observer

Leader 构造方法 public Leader(QuorumPeer self, LeaderZooKeeperServer zk) throws IOException {this.self self;this.proposalStats new BufferStats();// 获取节点间通信地址Set<InetSocketAddress> addresses;if (self.getQuorumListenOnAllIPs()) {addresses …

ANAPF有源电力滤波器选型计算——安科瑞赵嘉敏

配电系统中谐波电流的计算涉及很多因素。对于改造项目&#xff0c;可使用专业电能质量分析仪测得所需谐波数据&#xff1b;对于新建项目&#xff0c;设计人员并不能直接获得供电系统的的谐波数据&#xff0c;因此&#xff0c;我司研发人员通过众多不同行业、不同类型的项目&…

MySQL原理(二)存储引擎(2)MyISAM

一、MyISAM介绍 1、介绍&#xff1a; MyISAM引擎是MySQL5.5版本之前的数据库所默认的数据表引擎。每一个采用MyISAM引擎的数据表在实际存储中都是由三个文件组成&#xff0c;分别是frm文件保存表的结构&#xff0c;MYD文件保存表的数据、MYI文件保存表的索引&#xff0c;文件…

Android C++生成complier_command.json

Android C 程序开发现状 在 Android 下开发 C 程序&#xff0c;我见过绝大多数人都是不使用任何语法插件&#xff0c;就靠硬写&#xff0c;写完之后再根据编译报错来修改语法错误。这也怪不得程序员&#xff0c;一方面&#xff0c;Android 使用 Arm 平台的 clang 编译器&#x…

JSP仓储管理系统myeclipse定制开发SQLServer数据库网页模式java编程jdbc

一、源码特点 JSP仓储管理系统系统是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库 &#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为SQLServer2008&#x…

扩展学习|一文明晰推荐系统应用开发核心技术发展

文献来源&#xff1a;Lu J, Wu D, Mao M, et al. Recommender system application developments: a survey[J]. Decision support systems, 2015, 74: 12-32. 主题&#xff1a;关于推荐系统应用开发的调查研究 关键词:推荐系统、电子服务个性化、电子商务、电子学习、电子政务 …

除了Adobe之外,还有什么方法可以将Excel转为PDF?

前言 Java是一种广泛使用的编程语言&#xff0c;它在企业级应用开发中发挥着重要作用。而在实际的开发过程中&#xff0c;我们常常需要处理各种数据格式转换的需求。今天小编为大家介绍下如何使用葡萄城公司的的Java API 组件GrapeCity Documents for Excel&#xff08;以下简…

Java递归结构

1.递归是一种常见的算法思路&#xff0c;在很多算法中都会用到。比如&#xff1a;深度优先搜索&#xff08;DFS&#xff09;等。 2.递归的基本思想就是“自己调用自己”。 递归结构包括两个部分&#xff1a; 递归头&#xff1a;什么时候不调用自身方法。如果没有递归头&#…