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

SpringBoot-WebSocket浏览器-服务器双向通信

news 2026/5/29 2:38:28

文章目录

  • WebSocket 介绍
  • 入门案例

WebSocket 介绍

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

在这里插入图片描述
在这里插入图片描述

应用场景：

  • 视频弹幕
  • 网页聊天
  • 体育实况更新
  • 股票基金报价实时更新

入门案例

实现步骤：

  1. 直接使用 websocket.html 页面作为 WebSocket 客户端
  2. 导入 WebSocket 的 maven 坐标
  3. 导入 WebSocket 服务端组件 WebSocketServer，用于和客户端通信
  4. 导入配置类 WebSocketConfiguration ，注册 WebSocket 的服务端组件
  5. 导入定时任务类 WebSocketTask，定时向客户端推送数据

websocket.html

<!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 = "wxx-" + 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>

maven 坐标

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

WebSocketServer

/*** WebSocket服务*/
@Component
@ServerEndpoint("/ws/{sid}")
public class WebSocketServer {private static String mess = "";//存放会话对象private static Map<String, Session> sessionMap = new HashMap();/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("sid") String sid) throws IOException {System.out.println("客户端：" + sid + "建立连接");String s = sid + "加入群聊<br/>";mess += s;sendToAllClient(sid + "加入群聊");sessionMap.put(sid, session);session.getBasicRemote().sendText(mess);}/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, @PathParam("sid") String sid) {System.out.println("收到来自客户端：" + sid + "的信息:" + message);String s = sid + "："+ message + "<br />";mess += s;sendToAllClient(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();}}}
}

WebSocketConfiguration

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

WebSocketTask

@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()));}
}

请求地址

在这里插入图片描述

服务端给客户端发消息

在这里插入图片描述

客户端给服务端发消息

在这里插入图片描述

相关文章：

SpringBoot-WebSocket浏览器-服务器双向通信

文章目录 WebSocket 介绍入门案例 WebSocket 介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c;并进行双向数据传输。 应用场景&#xff1a; 视…...

编程日记 2023/11/6 6:14:34

Docker网络模式_Docker常用命令_以及Docker如何给运行的镜像内容连接互联网_Docker网络模式原理---Docker工作笔记004

然后我们来看一下docker的网络模式: 这个docker我们先看一下电脑上的网络,有两个,1个是lo是测试用的一个是enp0s3这个是我们以太网地址,然后我们去: 安装docker 安装后我们再去ip address可以看到多出来一个网络是docker0 这里ip地址是172.17.0.1这个是私有地址外部无法访问 这…...

编程日记 2023/11/6 6:13:33

爬虫项目-爬取股吧（东方财富）评论

1.最近帮别人爬取了东方财富股吧的帖子和评论&#xff0c;网址如下&#xff1a;http://mguba.eastmoney.com/mguba/list/zssh000300 2.爬取字段如下所示&#xff1a; 3.爬虫的大致思路如下&#xff1a;客户要求爬取评论数大于5的帖子&#xff0c;首先获取帖子链接&#xff0c…...

编程日记 2023/11/6 6:12:31

【Midjourney入门教程2】Midjourney的基础操作和设置

文章目录 Midjourney的常用命令和基础设置1、 /imagine2、 /blend3、 /info4、 /subscribe5、 /settings&#xff08;Midjourney的基础设置&#xff09;6、 /shorten 有部分同学说我不想要英文界面的&#xff0c;不要慌&#xff1a; 点击左下角个人信息的设置按钮&#xff0c;找…...

编程日记 2023/11/6 6:11:30

后端使用DES加密，前端解密方法

前言&#xff1a; 现在为了防止用户直接篡改数据会采用加密的方式进行传输&#xff0c;加密的方法有很多种&#xff0c;这篇文章主要讲解下后端使用DES加密的数据传输给前端&#xff0c;前端接收到之后如何去解密。 操作步骤如下&#xff1a; 1.安装crypto-js npm install c…...

编程日记 2023/11/6 6:10:29

chrome 扩展 popup 弹窗的使用

popup的基本使用方法 popup介绍 popup 是点击 browser_action 或者 page_action图标时打开的一个小窗口网页&#xff0c;焦点离开网页就立即关闭&#xff0c;一般用来做一些临时性的交互。 popup配置 V3版本中&#xff08;V2版本是在 browser_action 中 &#xff09;&#x…...

编程日记 2023/11/6 6:09:28

Spring Security入门教程，springboot整合Spring Security

Spring Security是Spring官方推荐的认证、授权框架&#xff0c;功能相比Apache Shiro功能更丰富也更强大&#xff0c;但是使用起来更麻烦。 如果使用过Apache Shiro&#xff0c;学习Spring Security会比较简单一点&#xff0c;两种框架有很多相似的地方。 目录 一、准备工作 …...

编程日记 2023/11/6 6:07:27

如何在 Unbuntu 下安装配置 Apache Zookeeper

简介 Zookeeper 是 apache 基金组织下的项目&#xff0c;项目用于简单的监控和管理一组服务&#xff0c;通过简单的接口就可以集中协调一组服务&#xff0c;如配置管理&#xff0c;信息同步&#xff0c;命名&#xff0c;分布式协调。 准备工作 Ubuntu 23.04 或者 20.04访问…...

编程日记 2023/11/6 6:06:26

AI视觉领域流媒体知识入门介绍（二）：深入理解GOP

GOP&#xff08;group of pictures&#xff09; 在流行的视频编码算法中&#xff0c;都包含GOP这个概念&#xff0c;例如MPEG-2, H.264, and H.265。 背景 关于视频存储和传输的“size”&#xff1a; Resolution 分辨率 Uncompressed Bitrate 未压缩时的比特率 1280720 (720p…...

编程日记 2023/11/6 6:05:24

C++ 代码实例：并查集简单创建工具

文章目录 前言代码仓库代码说明main.cppMakefile 结果总结参考资料作者的话 前言 C 代码实例&#xff1a;并查集简单创建工具。 代码仓库 yezhening/Programming-examples: 编程实例 (github.com)Programming-examples: 编程实例 (gitee.com) 代码 说明 简单地创建并查集注…...

编程日记 2023/11/6 6:04:23

Hadoop学习总结（Shell操作）

HDFS Shell 参数 命令参数功能描述-ls查看指定路径的目录结构-du统计目录下所有文件大小-mv移动文件-cp复制文件-rm删除文件 / 空白文件夹-put上传文件-cat查看内容文件-text将源文件输出文本格式-mkdir创建空白文件夹-help帮助 一、ls 命令 ls 命令用于查看指定路径的当前目录…...

编程日记 2023/11/6 6:03:21

LeetCode热题100——链表

链表 1. 相交链表2. 反转链表3. 回文链表4. 环形链表5. 合并两个有序链表 1. 相交链表 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 // 题解&#xff1a;使用A/B循环遍…...

编程日记 2023/11/6 6:02:20

使用C++的QT框架实现贪吃蛇

最近刷抖音经常看到别人使用类似chatGPT的al工具实现这个贪吃蛇游戏&#xff0c;正好我之前也写过&#xff0c;那么今天看看怎么去实现这个简单的游戏 我这边使用的是C的QT框架&#xff0c;当然用哪些框架都可以&#xff0c;主要是逻辑思路 1.生成画布&#xff0c;开始是一些…...

编程日记 2023/11/6 6:01:19

如何发布自己的golang库

如何发布自己的golang库 1、在 github/gitee 上创建一个 public 仓库&#xff0c;仓库名与 go 库名一致&#xff0c;然后将该仓库 clone 到本地。 本文这里使用 gitee。 $ git clone https://gitee.com/zsx242030/goutil.git2、进入项目文件夹&#xff0c;进行初始化。 $ go…...

编程日记 2023/11/6 5:56:11

梳理自动驾驶中的各类坐标系

目录 自动驾驶中的坐标系定义 关于坐标系的定义 几大常用坐标系 世界坐标系 自车坐标系 传感器坐标系 激光雷达坐标系 相机坐标系 如何理解坐标转换 机器人基础中的坐标转换概念 左乘右乘的概念 对左乘右乘的理解 再谈自动驾驶中的坐标转换 本节参考文献 自动驾驶…...

编程日记 2023/11/6 5:55:10

一个可以自动把微信聊天收到的二维码图片实时提取出来并分类的软件

10-1 如果你有需要实时地、自动地把微信各个群收到的二维码图片提取出来的需求&#xff0c;那本文章适合你&#xff0c;本文章的主要内容是教你如何实现自动提取微信收到的二维码图片&#xff0c;助你快速扫码&#xff0c;永远比别人领先一步。 首先需要准备好的材料&#xf…...

编程日记 2023/11/6 5:54:09

02-React组件与模块

组件与模块 前期准备 安装React官方浏览器调试工具&#xff0c;浏览器扩展搜索即可 比如红色的React就是本地开发模式 开启一个用React写的网站&#xff0c;比如美团 此时开发状态就变成了蓝色 组件也能解析出来 何为组件&模块 模块&#xff0c;简单来说就是JS代…...

编程日记 2023/11/6 5:53:08

项目实战：新增@RequestMapping和@GetMapping和@PostMapping三个注解

1、RequestMapping package com.csdn.mymvc.annotation; import java.lang.annotation.*; Target(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) Inherited public interface RequestMapping {String value(); }2、PostMapping package com.csdn.mymvc.annotation; im…...

编程日记 2023/11/6 5:52:06

基于AOSP源码Android-10.0.0_r41分支编译，framework开发，修改系统默认字体大小

文章目录 基于AOSP源码Android-10.0.0_r41分支编译&#xff0c;framework开发&#xff0c;修改系统默认字体大小 基于AOSP源码Android-10.0.0_r41分支编译&#xff0c;framework开发&#xff0c;修改系统默认字体大小 主要修改一个地方就行 代码源码路径 frameworks/base/co…...

编程日记 2023/11/6 5:51:06

如何再kali中下载iwebsec靶场

这个靶场有三种搭建方法&#xff1a; 第一种是在线靶场&#xff1a;http://www.iwebsec.com:81/ 第二种是虚拟机版本的&#xff0c;直接下载到本地搭建 官网地址下载&#xff1a;http://www.iwebsec.com/ 而第三种就是利用docker搭建这个靶场&#xff0c;我这里是用kali进行…...

编程日记 2023/11/6 5:50:05

强化学习在并行机构人形机器人控制中的应用

1. 项目概述在机器人控制领域&#xff0c;强化学习(RL)正逐渐成为解决复杂动力学系统问题的有力工具。然而&#xff0c;当面对具有并行驱动机构的人形机器人时&#xff0c;传统RL训练方法往往面临一个关键挑战&#xff1a;大多数仿真环境无法准确模拟闭环运动链(Closed Kinemat…...

编程新知 2026/5/26 4:48:24

ARM指令追踪技术及TRCVICTLR寄存器详解

1. ARM指令追踪技术概述在嵌入式系统开发和调试过程中&#xff0c;指令追踪&#xff08;Instruction Trace&#xff09;是一项至关重要的技术。它通过硬件机制记录处理器的执行流程&#xff0c;为开发者提供程序运行的完整轨迹。ARM架构从v7开始引入嵌入式跟踪宏单元&#xff0…...

编程新知 2026/5/26 3:05:52

DeepSeek系统设计辅助：如何在48小时内完成可审计、可回滚、可压测的AI服务架构图？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek系统设计辅助 DeepSeek系统设计辅助模块面向架构师与后端工程师&#xff0c;提供模型能力调用、接口契约生成、异步任务编排等核心支撑能力。该模块不替代人工设计决策&#xff0c;而是通过结构…...

编程新知 2026/5/26 2:47:45

Java数组工具类实战：设计不可实例化的静态工具类

实现一个工具类 MathUtils&#xff0c;满足以下要求&#xff1a; 1. 所有方法均为静态&#xff0c;且该类不能从外部实例化&#xff08;提示&#xff1a;使用私有构造器&#xff09;。 2. 提供三个静态方法&#xff1a;- maxArray(int[] arr)&#xff1a;返回较大值&#xff1b…...

编程新知 2026/5/26 1:51:13

AI开始替人办事后，最危险的不是模型不够强，而是它把旧资料当真了

AI开始替人办事后&#xff0c;最危险的不是模型不够强&#xff0c;而是它把旧资料当真了2026年真正值得重视的AI底层能力&#xff0c;是让模型知道该信谁 你有没有发现一个很扎心的变化。 以前我们用AI&#xff0c;最怕它不会。 现在我们用AI&#xff0c;最怕它太会了。 它能写…...

编程新知 2026/5/26 0:36:28

MySQL GROUP BY 原理与优化

我刚工作的时候&#xff0c;有次统计每个用户的订单总金额&#xff0c;写了 SELECT user_id, SUM(amount) FROM orders GROUP BY user_id&#xff0c;结果执行了 60 秒还没出结果。DBA 帮我一看执行计划&#xff0c;发现没走索引&#xff0c;导致 Using temporary&#xff08;用…...

编程新知 2026/5/25 23:59:47

巧用对称性与平均值原理：低成本实现高精度电阻分压器校准

1. 项目概述&#xff1a;用数学思维突破测量设备的精度极限在电子实验室里捣鼓精密电路&#xff0c;尤其是涉及到电压基准、信号调理或者高精度ADC前端时&#xff0c;一个绕不开的坎就是精密分压器。你可能在设计一个需要0.1%甚至更高精度的分压网络&#xff0c;但手头的万用表…...

编程新知 2026/5/25 23:27:14

taotoken如何帮助ubuntu开发者应对大模型api的频繁更新与版本迭代

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken如何帮助Ubuntu开发者应对大模型API的频繁更新与版本迭代 对于在Ubuntu环境下进行开发的工程师而言&#xff0c;大模型API…...

编程新知 2026/5/25 23:00:46

Performance-Fish：让你的《环世界》后期游戏帧率提升400%的终极优化方案

Performance-Fish&#xff1a;让你的《环世界》后期游戏帧率提升400%的终极优化方案 【免费下载链接】Performance-Fish Performance Mod for RimWorld 项目地址: https://gitcode.com/gh_mirrors/pe/Performance-Fish 你是否曾在《环世界》游戏后期&#xff0c;面对庞大…...

编程新知 2026/5/25 21:29:49

国内大学生常用的AI写作辅助平台有哪些？

国内高校学生常用的 AI 写作辅助平台&#xff0c;以本土化全流程工具为主&#xff0c;结合通用大模型与专项功能模块&#xff0c;覆盖选题构思、大纲搭建、初稿撰写、语言润色、降重处理、查重检测及格式排版等关键环节&#xff0c;以下是主流平台详解与对比&#xff1a; 一、本…...

编程新知 2026/5/25 20:03:51