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

JavaWeb合集14-WebSocket

news 2025/9/16 16:46:25

十四、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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/9/16 1:45:45

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/9/5 19:39:35

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/8/23 22:05:50

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/9/12 22:08:06

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2025/9/14 8:09:15

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/7/29 3:05:57

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2025/9/7 8:46:29