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

SpringBoot集成WebSocket

news 2025/9/15 5:09:43

SpringBoot集成WebSocket

项目结构图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRd8ZkqJ-1693291730114)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829143057984.png)]$

项目架构图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Dz61vLO-1693291730115)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829143146449.png)]$

前端项目

socket.js 注意前端这里的端口是9000, 路劲是ws开头

function createScoket(token){var socket;if(typeof(WebSocket) == "undefined") {console.log("您的浏览器不支持WebSocket");}else{var host = window.location.origin.replace("http:","ws:")//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接socket = new WebSocket(host+":9000/ws/"+token);//打开事件socket.onopen = function() {console.log("Socket 已打开");//socket.send("这是来自客户端的消息" + location.href + new Date());};//获得消息事件socket.onmessage = function(result) {console.log("客户端收到服务端发送的消息: " + result);console.log("result.data: " + result.data);};//关闭事件socket.onclose = function() {console.log("Socket已关闭");};//发生了错误事件socket.onerror = function() {console.log("Socket发生了错误");}//窗口关闭$(window).unload(function(event){socket.close();});}return socket;
}

index1.html 创建socket唯一标识就是, 后端会把它当做key

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>客户端A</title><script src="jquery.js"></script><script src="socket.js"></script><script>var socket;function connect() {if (!socket) {// 建立socket链接的唯一标识socket = createScoket("123");}}function sendMessage() {var content = $("#content").val();socket.send(content);}</script>
</head>
<body>
<input type="button" value="链接服务器" onclick="connect()" /> <br>
<input type="text" id="content"> <input type="button" value="发送消息" onclick="sendMessage()" />
</body>
</html>

index2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>客户端B</title><script src="jquery.js"></script><script src="socket.js"></script><script>var socket;function connect() {if (!socket) {// 建立socket链接的唯一标识socket = createScoket("234");}}function sendMessage() {var content = $("#content").val();socket.send(content);}</script>
</head>
<body>
<input type="button" value="链接服务器" onclick="connect()" /> <br>
<input type="text" id="content"> <input type="button" value="发送消息" onclick="sendMessage()" />
</body>
</html>

后端项目

需要引入websocket的依赖

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

WebSocketServer.class 这里编写websocket根据前端做长连接的接口地址

@OnOpen 建立socket链接
@OnMessage 接收客户端发送的消息
@OnClose 关闭socket链接
@OnError socket异常信息

package com.xiaoge;import org.springframework.stereotype.Component;import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.ConcurrentHashMap;/*** todo 类里面这几个方法注解事件, 对应着前端相同的事件*/
@ServerEndpoint("/ws/{token}")  // 这个注解相当于RequestMapping, 写路径, 这个路径跟前端约定好的, 可以看前端项目的socket.js文件里面的createScoket方法
@Component
public class WebSocketServer {private Session session;public static ConcurrentHashMap<String,Session> clients = new ConcurrentHashMap<>();/*** 建立socket链接* @param session* @param token*/@OnOpenpublic void onOpen(Session session, @PathParam( "token") String token){// 建立和浏览器的会话映射关系System.out.println("浏览器和服务器建立连接");clients.put(token,session);}/*** 接收客户端发送的消息* @param msg*/@OnMessagepublic void onMessage(@PathParam( "token") String token, String msg) {System.out.println("收到客户端标识为: "+ token +"发送的消息: " + msg);}/*** 关闭socket链接* @param token*/@OnClosepublic void onClose(@PathParam( "token") String token){System.out.println("浏览器和服务器断开连接");clients.remove(token);}/*** socket报错** @param error*/@OnErrorpublic void onError(Throwable error) {error.printStackTrace();}
}

启动类型上, 把ServerEndpointExporter注入到IOC, 就会扫描我们贴了@ServerEndpoint注解的类, 把它的地址发布出去

package com.xiaoge;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;/*** TODO** @author <a href="mailto:1330137071@qq.com">Zhang Xiao</a>* @since*/
@SpringBootApplication
public class WebsocketServerApplication {public static void main(String[] args) {SpringApplication.run(WebsocketServerApplication.class, args);}/*** 扫描我们贴了@ServerEndpoint注解的类, 把它的地址发布出去* @return*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

MessageController.class 通过这个/sendMsg接口对跟socket长连接的前端通信

package com.xiaoge;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import javax.websocket.Session;
import java.io.IOException;/*** TODO** @author <a href="mailto:1330137071@qq.com">Zhang Xiao</a>* @since*/
@RestController
public class MessageController {/*** todo 访问这个接口的时候, websocket就会给跟websocket建立连接的客户变标识为token的发送消息* @param token* @param msg* @return* @throws IOException*/@GetMapping("/sendMsg")public String sendMessage(String token, String msg) throws IOException {Session session = WebSocketServer.clients.get(token);// 正常应该需要判断session是否为空, 但是我这里就不判断了session.getBasicRemote().sendText(msg);return "消息发送成功!";}}

演示

客户端A/B链接后端socket

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmHOI7cN-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144515875.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvPJ1jBP-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144559640.png)]$

客户端A/B给socket发送消息

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMBsES98-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144653456.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WD2Bevx1-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144707202.png)]$

后端给前端发送消息

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2lGIV7y-1693291730117)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144752955.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPARSEiq-1693291730117)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144823572.png)]$

应对很多的Socket链接应该怎么应对?

在这里插入图片描述
客户端通过nginx, 使用ip_hash到对应的webSocket服务, 应用程序通过mq广播模式发送到每一台webSocket服务, 总有一台是保存了, 对应的用户长连接的, 它会把消息通知给前端。
客户端不是关闭浏览器, 那样socket就没有被删除, 它只是断网了, 你不知道它还需不需要这个socket, 长此以往下去, 容易内存溢出, 这时候就需要心跳机制, 每隔一段时间发送一次心跳, 更新心跳时间, 这样就知道那些socket有用, 那些socket没用, 这样就可以把对应的socket链接删除。

demo地址: https://download.csdn.net/download/zsx1314lovezyf/88269081?spm=1001.2014.3001.5503

SpringBoot集成WebSocket

SpringBoot集成WebSocket 项目结构图项目架构图前端项目 socket.js 注意前端这里的端口是9000, 路劲是ws开头 function createScoket(token){var socket;if(typeof(WebSocket) "undefined") {console.log("您的浏览器不支持WebSocket");}else{var ho…...

编程日记 2023/9/1 14:56:46

Linux服务器部署JavaWeb后端项目

适用于：MVVM前后台分离开发、部署、域名配置前端：Vue 后端：Spring Boot 这篇文章只讲后端部署，前端部署戳这里目录 Step1：服务器上搭建后端所需环境1、更新服务器软件包2、安装JDK83、安装MySQL4、登录MySQL5、修…...

编程日记 2023/9/1 14:55:45

原生小程序 wxs 语法（详细）

WXS WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。另外， WXS 还可以用来编写简单的 WXS 事件响应函数。从语法上看， WXS 类似于有少量限制的 Java…...

编程日记 2023/9/1 14:54:44

MySQL中count(*)和count(1)和count(column)使用比较

分页查询数据，需要返回total，而这个值一般都是通过count函数实现。但是，针对count函数，有多种写法，如count(*)、count(1) 和 count(column)等。本文主要介绍以上几种写法的差异。注意，这里仅针对MySQL数据…...

编程日记 2023/9/1 14:53:42

python用 xlwings库对Excel进行字体、边框设置、合并单元格，版本转换等操作

xlwings 其他的一些单元格读取写入操作网上很多， 下面就写些如何设置单元格的字体对齐，字体大小、边框， 合并单元格， 这些设置。 import xlwings as xwapp xw.App(visibleTrue, add_bookFalse) app.display_alerts False #…...

编程日记 2023/9/1 14:52:41

Golang 中的 archive/zip 包详解（二）：常用类型

Golang 中的 archive/zip 包用于处理 ZIP 格式的压缩文件，提供了一系列用于创建、读取和解压缩 ZIP 格式文件的函数和类型，使用起来非常方便。 zip.File 类型定义如下： type File struct {FileHeaderzip *Readerzipr io…...

编程日记 2023/9/1 14:51:39

Qt应用开发(基础篇)——错误提示框 QErrorMessage

一、前言 QErrorMessage类继承于QDialog，是一个用来显示错误信息的对话框。提示框QDialog 消息对话框 QMessageBox QErrorMessage错误消息对话框提供了一个主文本窗口、一个复选框、一个图标和按钮。文本框用来显示错误信息，复选框用来让用户选择未来是…...

编程日记 2023/9/1 14:50:38

HLS 后端示例

更多 TVM 中文文档可访问 →Apache TVM 是一个端到端的深度学习编译框架，适用于 CPU、GPU 和各种机器学习加速芯片。 | Apache TVM 中文站 TVM 支持带有 SDAccel 的 Xilinx FPGA 板，接下来介绍如何将 TVM 部署到 AWS F1 FPGA 实例。备注：此功…...

编程日记 2023/9/1 14:49:35

实录分享 | Alluxio在AI/ML场景下的应用

欢迎来到【微直播间】，2min纵览大咖观点本次分享主要包括五个方面： 关于Alluxio；盘点企业在尝试AI时面临的挑战；Alluxio在技术栈中的位置；Alluxio在模型训练&模型上线场景的应用；效果对比&#xff1…...

编程日记 2023/9/1 14:48:33

Streamlit 讲解专栏（十二）：数据可视化-图表绘制详解（下）

文章目录 1 前言2 使用st.vega_lite_chart绘制Vega-Lite图表2.1 示例1：绘制散点图2.2 示例2：自定义主题样式 3 使用st.plotly_chart函数创建Plotly图表3.1 st.plotly_chart函数的基本用法3.2 st.plotly_chart 函数的更多用法 4 Streamlit 与 Bokeh 结合进…...

编程日记 2023/9/1 14:47:32

Dockerfile 使用教程

1.Dockerfile 1.1 什么是Dockerfile Dockerfile可以认为是 Docker镜像的描述文件，是由一系列命令和参数构成的脚本。主要作用是用来构建docker镜像的构建文件。通过架构图可以看出通过DockerFile可以直接构建镜像 1.2 Dockerfile解析过程构建镜像步骤&#xf…...

编程日记 2023/9/1 14:46:31

InnoDB的Buffer

一、Buffer内存结构 MySQL 服务器启动的时候就向操作系统申请了一片连续的内存，默认128M，可通过从参数修改。 [server] innodb_buffer_pool_size 268435456 1.1 控制块控制块包括该页所属的表空间编号、页号、缓存页在 Buffer Pool 中的地址、链表…...

编程日记 2023/9/1 14:45:30

普洛斯常熟东南数据中心获LEED金级认证及IDCC绿色算力基础设施奖

近日，普洛斯常熟东南数据中心获得美国绿色建筑评估标准体系LEED v4 BDC（建筑设计与建造）金级认证，并获评IDCC2023长三角区域绿色算力基础设施奖。以可持续发展理念为核心，该数据中心从设计规划、开发建设，到…...

编程日记 2023/9/1 14:44:27

RabbitMQ 启动及参数说明

/usr/local/lib/erlang/erts-10.4/bin/beam.smp -W w -A 128 -MBas ageffcbf -MHas ageffcbf -MBlmbcs 512 -MHlmbcs 512 -MMmcs 30 -P 1048576 -t 5000000 -stbt db -zdbbl 128000 -K true – -root /usr/local/lib/erlang -progname erl – -home /var/lib/rabbitmq – -pa /…...

编程日记 2023/9/1 14:43:26

SpringBoot集成WebSocket

项目结构图

项目架构图

前端项目

socket.js 注意前端这里的端口是9000, 路劲是ws开头

index1.html 创建socket唯一标识就是, 后端会把它当做key

index2.html

后端项目

演示

应对很多的Socket链接应该怎么应对?

相关文章：