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

JavaWeb合集14-WebSocket

news 2025/11/10 3:54:04

十四、WebSocket

WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信，浏览器和服务器只需要完成一次握手， 两者之间就可以创建持久性的连接，并进行双向数据传输。

HTTP协议和WebSocket协议对比：

  1. HTTP是短连接，WebSocket是长连接
  2. HTTP通信是单向的，基于请求响应模式，WebSocket支持双向通信
  3. HTTP和WebSocket底层都是TCP连接

应用场景：视频弹幕、网页聊天、体育实况更新、股票基金报价实时更新。

在这里插入图片描述

1、入门案例

实现步骤：

  1. 直接使用websocket.html页面作为WebSocket客户端

    <html>
<body class="gray-bg"><div class="online"><input  id="text" type="text"><button onclick="send()">发送消息</button><button onclick="closeWebSocket()">关闭连接</button><div id="message"></div> </div><script th:inline="javascript">let websocket = null;let host = document.location.host;let sid=getRandomIntInclusive(0,1000000)function getRandomIntInclusive(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min; // 最小值和最大值都是包含的
}//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {//连接WebSocket节点websocket = new WebSocket("ws://localhost:9091/ws/"+sid);} else {alert('浏览器不支持webSocket');}//连接发生错误的回调方法websocket.onerror = function () {setMessageInnerHTML("连接失败");};//连接成功建立的回调方法websocket.onopen = function (event) {setMessageInnerHTML("连接成功");};//接收到消息的回调方法websocket.onmessage = function (event) {let data = event.data;console.log("后端传递的数据:" + data);//将后端传递的数据渲染至页面setMessageInnerHTML(data)};//连接关闭的回调方法websocket.onclose = function () {setMessageInnerHTML("已关闭");};//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function () {websocket.close();};//将消息显示在网页上function setMessageInnerHTML(innerHTML) {document.getElementById('message').innerHTML+=innerHTML+'<br/>'};//手动关闭连接function closeWebSocket() {websocket.close();};//发送消息function send() {let message = document.getElementById('text').value;websocket.send(message);setMessageInnerHTML("已向服务器发送内容："+message+)};</script></body>
</html>

  2. 导入WebSocket的maven坐标

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

  3. 导入WebSocket服务端组件WebSocketServer, 用于和客户端通信

    //主要是将目前的类定义成一个websocket服务器端(就像Controller层), 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
@ServerEndpoint("/ws/{sid}")
@Component
@Slf4j
public class WebSocketService {/*** 用来存放所有的webSocket连接*/private static Map<String,Session> sessionMap=new HashMap<>();/*** 连接建立成功调用的方法** @param session 会话*/@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);}/*** 连接关闭调用的方法*/@OnClosepublic void onClose(@PathParam("sid") String sid) {log.info("窗口:" + sid + "关闭了连接");sessionMap.remove(sid);  // 移除连接池中的连接}/*** 自定义消息推送、可群发** @param message 消息*/public static void sendAllClient(String message)  {System.out.println("推送消息到窗口，推送内容:" + message);// 遍历所有连接(获取到Map的全部vaue值，进行遍历)for (Session item : sessionMap.values()) {try {item.getBasicRemote().sendText(message);  // 发送消息}catch (Exception e){e.printStackTrace();}}}
}

  4. 导入配置类WebSocketConfiguration, 注册WebSocket的服务端组件

    @Configuration
public class WebSocketConfig {/*** 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket  ,如果你使用外置的tomcat就不需要该配置文件*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

  5. 导入定时任务类WebSocketTask, 定时向客户端推送数据

    @Component
public class WebSocketTask {//将WebSocketService注入到WebSocketTask中@Autowiredprivate WebSocketService webSocketService;/*** 每5秒执行一次*/@Scheduled(cron = "0/5 * * * * ? ")public void webSocketService(){webSocketService.sendAllInfo("服务器定时推送消息: "+LocalDateTime.now());}
}

相关文章：

JavaWeb合集14-WebSocket

十四、WebSocket WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c; 两者之间就可以创建持久性的连接&#xff0c;并进行双向数据传输。 HTTP协议和WebSocket协议对比&#xff1a; HTTP是短连…...

编程日记 2024/10/18 11:50:57

Vue快速嵌入百度地图，避坑提效指南

Vue快速嵌入百度地图&#xff0c;避坑提效指南 在Vue项目中引用百度地图并没有高德地图那么方便&#xff0c;但是项目要用&#xff0c;这里分享下找到的方法&#xff0c;方便使用到的时候能快速接入&#xff0c;避雷避坑&#xff01; 新建bmap.js文件 export default {init: f…...

编程日记 2024/10/18 11:48:55

深入理解售后派单管理系统，功能优势一览

售后派单管理系统优化售后服务流程&#xff0c;提升响应速度、运营效率和服务质量。ZohoDesk等系统通过自动化派单、实时调度监控等功能&#xff0c;助力企业赢得竞争优势。适用于电子产品、汽车、IT及房地产等行业。 一、什么是售后派单管理系统 售后派单管理系统是一种专门用…...

编程日记 2024/10/18 11:46:52

一文读懂K8S的PV和PVC以及实践攻略

一文读懂K8S的PV和PVC以及实践攻略 Kubernetes&#xff08;K8S&#xff09;作为当前云原生和微服务架构的首选平台&#xff0c;凭借其强大的容器编排和管理能力&#xff0c;迅速成为一线大厂分布式平台的标配技术。在Kubernetes中&#xff0c;持久化存储是一个核心问题&#x…...

编程日记 2024/10/18 11:45:51

在react-native中如何获取View的漏出比例和漏出时间

写在前面 最近在项目中遇到了一个这样的需求&#xff1a;给一个模块做埋点&#xff0c;要求埋点的触发时机是当模块露出50%且停留300毫秒才进行上报 开搞 首先要有一个View <View></View>然后在View里定义一个ref <View ref { viewRef }></View>然…...

编程日记 2024/10/18 11:40:46

谷歌新安装包文件形式 .aab 在UE4中的打包原理

摘要 本文学习了aab的基本概念以及UE4中产生aab的构建原理。 从官网了解基本概念 官网&#xff1a;Android Developers 1、什么是aab&#xff1f; .aab包形如&#xff1a; 2021年7月&#xff0c;在Google Play应用程序中&#xff0c;已经有数千个应用程序率先跟进了AAB格式。…...

编程日记 2024/10/18 11:39:45

昂首平台：多货币专家顾问助力投资者优化外汇投资

昂首平台推出的多货币专家顾问(EA)为投资者提供了多样化的货币对交易选择。考虑到外汇市场的复杂性&#xff0c;大多数EA系统专注于价差较低的主要货币对&#xff0c;如EUR/USD或GBP/USD。交易那些价差较大的非主流货币对&#xff0c;如EUR/JPY和AUD/CAD&#xff0c;可能会增加…...

编程日记 2024/10/18 11:35:40

Go标准库runtime.MemStats

在 Go 语言中&#xff0c;runtime.MemStats 是一个结构体&#xff0c;它提供了关于 Go 程序内存使用情况的统计信息。这个结构体是 runtime 包中的 MemStats 类型&#xff0c;它包含了多个字段&#xff0c;用于报告内存分配器的统计数据&#xff0c;如内存分配、释放、垃圾回收…...

编程日记 2024/10/18 11:34:39

MAC 电脑Office power point编辑的时候，显示“某些字体无法随演示文稿一起保存，仍然要保存演示文稿吗？”

目录 问题描述&#xff1a; 问题解决&#xff1a; 问题描述&#xff1a; 在使用mac电脑的power point打开别人的.ppt文件之后&#xff0c;在保存的时候&#xff0c;弹出““某些字体无法随演示文稿一起保存&#xff0c;仍然要保存演示文稿吗&#xff1f;”&#xff0c;每次只…...

编程日记 2024/10/18 11:33:38

R语言机器学习算法实战系列（四）随机森林算法+SHAP值 (Random Forest)

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍教程下载数据加载R包导入数据数据预处理数据描述特征选择数据切割调节参数构建模型预测测试数据评估模型模型准确性混淆矩阵模型评估指标ROC CurvePRC Curve特征的重要性模型解释保…...

编程日记 2024/10/18 11:30:33

用柔性神经k-Opt学习搜索路径问题的可行和不可行区域(未完,先看前驱文章L2S)

文章目录 Abstract1 IntroductionAbstract 介绍了一种名为 Neural k-Opt（NeuOpt）的新型学习搜索（L2S）求解器，用于解决路径问题。它学习执行基于定制的动作分解方法和定制的循环双流（Recurrent Dual-Stream）解码器的灵活 k-opt 交换。 作为一项开创性的工作，我们绕过了…...

编程日记 2024/10/18 11:29:31

【升华】人工智能python重要库scikit-learn学习

一、人工智能python重要库scikit-learn 在人工智能10大算法中&#xff0c;有8个算法都导入了 sklearn库 from sklearn.model_selection import train_test_split from sklearn.linear_model import LinearRegression from sklearn import metrics # 导入所需的库 from sklea…...

编程日记 2024/10/18 11:27:29

Stable Diffusion Web UI 大白话术语解释 (二)

归纳整理&#xff0c;Stable Diffusion Web UI 使用过程中&#xff0c;相关术语 ControlNet ControlNet 说简单点&#xff0c;就是你可以给 AI 一些“规则”&#xff0c;比如让它根据某些线条、结构或者骨架去画图。 这样能让 AI 画出更符合你要求的图片&#xff0c;特别适合画…...

编程日记 2024/10/18 11:26:28

vue-vben-admin 首页加载慢优化 升级vite2到vite3

我的vben-admin是2.8版本的,首次首页加载太慢了,升级下vite,原来1分钟,现在20s左右 1.修改package.json 添加 "terser": "^5.14.2",修改 "vitejs/plugin-legacy": "^2.0.0","vitejs/plugin-vue": "^3.0.1",&qu…...

编程日记 2024/10/18 11:22:23

集合框架07：LinkedList使用

1.视频链接&#xff1a;13.14 LinkedList使用_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p142.LinkedList集合的增删改查操作 package com.yundait.Demo01;im…...

编程日记 2024/10/18 11:20:21

一区鱼鹰优化算法+深度学习+注意力机制！OOA-TCN-LSTM-Attention多变量时间序列预测

一区鱼鹰优化算法深度学习注意力机制&#xff01;OOA-TCN-LSTM-Attention多变量时间序列预测 目录 一区鱼鹰优化算法深度学习注意力机制&#xff01;OOA-TCN-LSTM-Attention多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.基于OOA-TCN-LSTM-Attenti…...

编程日记 2024/10/18 11:19:20

Cesium 黑夜效果

Cesium 黑夜效果 原理&#xff1a; 根据相机到片元的距离雾化场景的后处理效果 效果&#xff1a;...

编程日记 2024/10/18 11:18:19

leetcode动态规划（二）-斐波那契数列

题目 509.斐波那契数列 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0…...

编程日记 2024/10/18 11:15:16

【MySQL】增删改查-进阶(一)

目录 &#x1f334;数据库约束 &#x1f6a9;约束类型 &#x1f6a9;NOT NULL &#x1f6a9;UNIQUE &#x1f6a9;DEFAULT &#x1f6a9;PRIMARY KEY &#x1f6a9;FOREIGN KEY &#x1f6a9;CHECK &#x1f384;表的设计 &#x1f6a9;一对一 &#x1f6a9;一对多 …...

编程日记 2024/10/18 11:13:13

MacOS RocketMQ安装

MacOS RocketMQ安装 文章目录 MacOS RocketMQ安装一、下载二、安装修改JVM参数启动关闭测试关闭测试测试收发消息运行自带的生产者测试类运行自带的消费者测试类参考博客&#xff1a;https://blog.csdn.net/zhiyikeji/article/details/140911649 一、下载 打开官网&#xff0c;…...

编程日记 2024/10/18 11:12:11

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/11/9 19:36:23

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/10/29 18:00:42

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/10/8 5:48:25

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/11/8 9:16:25

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/10/22 19:09:43

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/11/7 20:31:27

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/10/30 3:23:02