logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端编程3
前端基础知识16
UniApp15
Vue框架19
Java编程7
Java基础知识14
SpringBoot31
SpringMVC14
MyBatis8
SpringCloud15
RocketMQ1
MyCat1
数据库4
MySQL6
Redis7
MongoDB10
H21
Java技术栈4
知识整理分布式锁的实现方案MySQL事务MySQL的锁
软件工具箱14
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaPicGoRustFSVSCodeDockerObsidianObs录制
Linux知识11
树莓派安装及使用ArchLinux:常用软件ArchLinux:基础系统安装ArchLinux:深度优化ArchLInux:图形化界面安装ArchLinux:Nirifrp内网穿透Jar启动脚本Linux常用命令VirtualBox安装CentOSVirtualBox安装Ubuntu
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
创意设计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配置