logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔5
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置基于Node的WIKI管理
前端知识16
HTML常用知识CSS常用知识CSS美化checkbox复选框JavaScript常用知识JavaScript格式化时间戳JavaScript窗口宽高处理JavaScript黑夜主题切换实现方案JavaScript数字转大写简易图片查看器TypeScript基础知识Threejs基础三要素Threejs网格辅助和轨道控制器Threejs物体绘制Electron基础使用Nodejs基础知识animate.css页面动画
Vue框架19
Vite的使用及扩展Vue3父子组件Vue3使用Marked解析MarkdownMermaid图表生成库初始化页面加载动画Axios表单提交二维码解决方案NProgress加载进度条Vue3动态菜单实现Vue3使用ECharts图表Vue3处理Excel导入导出keep-alive页面缓存及setup问题Element:文件上传Element:结合Pinia实现动态菜单Element:图片上传组件Element:自定义统一弹窗组件Element:表格自定义指令控制按钮显示(鉴权)可视化大屏使用缩放适配分辨率
UniApp15
UniApp的基础使用封装网络请求工具及文件上传uni-app的开发记录微信小程序分享原生文件上传Pinia取消滚动条(兼容小程序)tabbar消息数量显示scroll-view上滑到底部加载数据状态栏高度动态设配数据共享与传递uview-plus导航栏实现背景融合Wot UIWot UI实现顶部背景图融合uni-app x
Java基础知识10
基础知识面向对象Lambda表达式常用API常用知识积累try-with-resource注解反射多线程经纬度距离计算
SpringBoot31
application配置Maven创建聚合项目全局异常处理锁机制项目启动初始化数据方式邮件功能集成原生定时任务异步集成阿里云OSS阿里OSS预签名上传基于hutool读excelJSR303WebSocketWebSocket版AI接口流式调用Smart-Doc接口文档生成器application配置信息加密雪花算法工具AOP实现请求参数脱敏思路JWT生成Token及工具类SpringBoot默认JSON与对象转换若依框架:安装使用若依框架:优化和调整文件上传若依框架:管理后台页面优化若依框架:后端接口代码优化SpringAISpringBoot实现AI接口流式调用服务启动时创建MySQL连接自建项目工程树形结构处理工具微信支付代码微信手机号登录
SpringMVC14
跨域处理拦截器RESTful风格伪前后端分离Jackson转换器调整Thymeleaf基于拦截器做权限校验AOP打印接口请求响应日志AOP打印接口请求响应耗时文件上传和回显POST请求加解密实现(AES)POST请求加解密实现(RSA+AES)参数动态校验实现方案真实IP和归属地
MyBatis8
MyBatis基本使用与配置Mapper使用相关MaBatis多数据源配置MyBatisPlus数据统计类处理方案MyBatisPlus条件查询正向工程的实现(H2)mybatis-plus-join
SpringCloud15
Netflix:微服务与搭建Netflix:服务的消费与提供Netflix:EurekaNetflix:ActuatorNetflix:RibbonNetflix:FeignNetflix:HystrixNetflix:ZuulAlibaba:简介与搭建Alibaba:Nacos注册中心Alibaba:RibbonAlibaba:OpenFeignAlibaba:Nacos配置中心Alibaba:GetewayAlibaba:Sentinel
MySQL6
MySQL基础知识MySQL多表查询与事务MySQL常用函数及解决方案MySQL视图MySQL索引安装MySQL
Redis7
Redis介绍和安装Redis配置文件Redis持久化Redis集群Redis语法基础Redis相关问题及解决方案SpringBoot集成Redis使用记录
MongoDB10
Linux安装MongoDBMongoDB基础语法MongoTemplate及SpringBoot配置MongoTemplate中Update操作MongoTemplate中聚合查询MongoTemplate日期归档示例项目使用相关知识归纳地理位置存储与距离查询MongoDB副本集与事务获取类名和属性名工具类
其他数据库1
H2数据库
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
工具集合13
IDEAMavenGradleGitNginx安装Nginx配置VSCodeJMeter压测DockerOllamaRustFSPicGoObs录制
Linux知识11
Linux常用命令Jar启动脚本VirtualBox安装CentOSVirtualBox安装Ubuntu树莓派安装及使用frp内网穿透ArchLinux:基础系统安装ArchLInux:图形化界面安装ArchLinux:常用软件ArchLinux:深度优化ArchLinux:Niri
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

依赖

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

启动Bean

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {

	/**
	 * 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
	 */
	@Bean
	public ServerEndpointExporter serverEndpointExporter() {
		return new ServerEndpointExporter();
	}

}

服务端代码

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * 前后端交互的类实现消息的接收推送(自己发送给自己)
 * 
 * "/test/one" 前端通过此URI和后端交互,建立连接
 */
@Slf4j
@ServerEndpoint(value = "/test/one")
@Component
public class OneWebSocket {

	/**
	 * 记录当前在线连接数
	 */
	private static final AtomicInteger onlineCount = new AtomicInteger(0);

	/**
	 * 存放所有在线的客户端
	 */
	private static final Map<String, Session> clients = new ConcurrentHashMap<>();

	/**
	 * 连接建立成功调用的方法
	 */
	@OnOpen
	public void onOpen(Session session) {
		// 在线数加1
		onlineCount.incrementAndGet();
		// 存放客户端
		clients.put(session.getId(), session);
		log.info("有新连接[{}]加入,当前在线人数为:{}", session.getId(), onlineCount.get());
	}

	/**
	 * 连接关闭调用的方法
	 */
	@OnClose
	public void onClose(Session session) {
		// 在线数减1
		onlineCount.decrementAndGet();
		// 踢除关闭客户端
		clients.remove(session.getId());
		log.info("有一连接[{}]关闭,当前在线人数为:{}", session.getId(), onlineCount.get());
	}

	/**
	 * 收到客户端消息后调用的方法
	 */
	@OnMessage
	public void onMessage(String message, Session session) {
		log.info("服务端收到客户端[{}]的消息:{}", session.getId(), message);
		this.sendMsgToAll(session.getId() + "发言:" + message, session);
	}

	@OnError
	public void onError(Session session, Throwable error) {
		log.error("客服端[{}]发生错误", session.getId());
		error.printStackTrace();
	}

	/**
	 * 服务端发送消息给客户端
	 */
	private void sendMsgToOne(String message, Session toSession) {
		try {
			log.info("服务端给客户端[{}]发送消息:{}", toSession.getId(), message);
			toSession.getBasicRemote().sendText(message);
		} catch (Exception e) {
			log.error("服务端发送消息给客户端失败:{}", e.getMessage());
		}
	}

	/**
	 * 群发消息(除自己)
	 */
	private void sendMsgToAll(String message, Session fromSession) {
		for (Map.Entry<String, Session> sessionEntry : clients.entrySet()) {
			Session toSession = sessionEntry.getValue();
			// 排除掉自己
			if (!fromSession.getId().equals(toSession.getId())) {
				log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);
				toSession.getAsyncRemote().sendText(message);
			}
		}
	}

}

客户端代码

<!DOCTYPE HTML>
<html>
<head>
    <title>My WebSocket</title>
</head>

<body>
<input id="text" type="text" />
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    // 判断当前浏览器是否支持WebSocket, 注意此处要更换为自己的地址
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:18001/test/one");
    } else {
        alert('browser not support websocket')
    }

    // 连接发生错误的回调方法
    websocket.onerror = function() {
        setMessageInnerHTML("connect fail");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event) {
        setMessageInnerHTML("connect success");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function() {
        setMessageInnerHTML("connect close");
    }

    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常
    window.onbeforeunload = function() {
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

连接携带Token

@Slf4j
@ServerEndpoint(value = "/websocket/one/{token}")
@Component
public class OneWebSocket {
    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
        // 在线数加1
        onlineCount.incrementAndGet();
        // 存放客户端
        clients.put(session.getId(), session);
        log.info("有新连接[{}]加入,token为{},当前在线人数为:{}", session.getId(), token, onlineCount.get());
    }
}

根据Token拒绝连接

@OnOpen
public void onOpen(Session session, @PathParam("token") String token) {
    if (token.length() == 0 || !isValidToken(token)) {
        session.close();
        return;
    }
    // 在线数加1
    onlineCount.incrementAndGet();
    // 存放客户端
    clients.put(session.getId(), session);
    log.info("有新连接[{}]加入,token为{},当前在线人数为:{}", session.getId(), token, onlineCount.get());
}

private boolean isValidToken(String token) {
    // TODO: 根据业务逻辑判断token是否有效
    return true;
}

信息存入

/**
 * 连接建立成功调用的方法
 */
@OnOpen
public void onOpen(Session session, @PathParam("token") String token) throws IOException {
    // 根据token从缓存中查询用户信息,不存在则未登录
    String redisData = redisTemplate.opsForValue().get(RedisKeyEnum.KEY_DESKTOP_USER.value() + token);
    if (Objects.isNull(redisData)) {
        session.close();
    }
    // 将缓存数据转为对象
    LoginRespVo userCacheVo = new ObjectMapper().readValue(redisData, LoginRespVo.class);
    // 放入信息中
    session.getUserProperties().put("schoolId", userCacheVo.getSchoolId());
    // 获取信息
    String tokenSave = (String) session.getUserProperties().get("token");
    // 在线数加1
    onlineCount.incrementAndGet();
    // 存放客户端
    clients.put(session.getId(), session);
    log.info("有新连接[{}]加入,token为{},当前在线人数为:{}", session.getId(), token, onlineCount.get());
}

使用Redis

由于websocket的加载机制与其他不同,所以无法直接使用redisTemplate,需要在项目启动后进行手动注入

第一步:在websocket的类上加入一个静态的redisTemplate

public static RedisTemplate<String, String> redisTemplate;

第二步:在启动完成后进行注入

/**
 * 启动后执行
 */
@Slf4j
@Component
public class StartRun implements ApplicationRunner {

    @Resource
    private RedisTemplate<String, String> redisTemplate;

    @Override
    public void run(ApplicationArguments args) {
        // 给websocket注入
        OneWebSocket.redisTemplate = redisTemplate;
    }

}

wss配置

location /websocket {
      proxy_pass http://localhost:19092;
      proxy_http_version 1.1;
      proxy_set_header    Upgrade    "websocket";
      proxy_set_header    Connection "Upgrade";
      proxy_read_timeout 3600s;
}
依赖
启动Bean
服务端代码
客户端代码
连接携带Token
根据Token拒绝连接
信息存入
使用Redis
wss配置