maven引入
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>5.2.12.RELEASE</version>
</dependency>
千万别使用下图依赖,别问我为什么,我也不知道,下图依赖可能会出现会注入报serverEndpointExporter错误,如果没有就当我没有说
配置类
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; @Configuration public class WebSocketConfig { /** * 用于扫描和注册所有携带ServerEndPoint注解的实例。 * <p> * PS:若部署到外部容器 则无需提供此类。 */ @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } @Bean public WebsocketFilter websocketFilter(){ return new WebsocketFilter(); } @Bean public FilterRegistrationBean getFilterRegistrationBean(){ FilterRegistrationBean bean = new FilterRegistrationBean(); bean.setFilter(websocketFilter()); //放行 bean.addUrlPatterns("/websocket/*", "/newsWebsocket/*"; return bean; } }
拦截器
/** * websocket 前端将token放到子协议里传入 与后端建立连接时需要用到http协议，此处用于校验token的有效性 * @Author taoYan * @Date 2022/4/21 17:01 **/ @Slf4j public class WebsocketFilter implements Filter { private static final String TOKEN_KEY = "Sec-WebSocket-Protocol"; private static CommonAPI commonApi; private static RedisUtil redisUtil; @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { if (commonApi == null) { commonApi = SpringContextUtils.getBean(CommonAPI.class); } if (redisUtil == null) { redisUtil = SpringContextUtils.getBean(RedisUtil.class); } HttpServletRequest request = (HttpServletRequest)servletRequest; String token = request.getHeader(TOKEN_KEY);//获取携带token log.info("websocket连接 Token安全校验，Path = {}，token:{}", request.getRequestURI(), token); try { //根据token去校验用户是否存在，token登录时限是否超时 if (StringUtils.isBlank(token)) { throw new RuntimeException("token不能为空!"); } // 解密获得username，用于和数据库进行对比 String username = JwtUtil.getUsername(token); if (username == null) { throw new RuntimeException("token非法无效!"); } // 查询用户信息 LoginUser user = TokenUtils.getLoginUser(username, commonApi, redisUtil); if (user == null) { throw new RuntimeException("用户不存在!"); } // 判断用户状态 if (user.getStatus() != 1) { throw new RuntimeException("账号已被锁定,请联系管理员!"); } // 校验token是否超时失效 & 或者账号密码是否错误 if (!jwtTokenRefresh(token, username, user.getPassword(), redisUtil)) { throw new RuntimeException(CommonConstant.TOKEN_IS_INVALID_MSG); } } catch (Exception exception) { log.error("websocket连接校验失败，{}，token:{}", exception.getMessage(), token); return; } HttpServletResponse response = (HttpServletResponse)servletResponse; response.setHeader(TOKEN_KEY, token); filterChain.doFilter(servletRequest, servletResponse); }
会话服务器
import com.alibaba.fastjson.JSON; import org.springblade.modules.websocket.model.Message; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; /** * WebSocket 服务端 * * @see ServerEndpoint WebSocket服务端 需指定端点的访问路径 * @see Session WebSocket会话对象 通过它给客户端发送消息 */ @Component @Slf4j @ServerEndpoint("/websocket/{userId}") public class WebSocket { private Session session; /** * 用户ID */ private String userId; private static final String REDIS_TOPIC_NAME = "socketHandler"; /** * 缓存 webSocket连接到单机服务class中（整体方案支持集群） */ private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>(); /** * 线程安全Map */ private static ConcurrentHashMap<String, Session> sessionPool = new ConcurrentHashMap<>(); @OnOpen public void onOpen(Session session, @PathParam(value = "userId") String userId) { try { //TODO 通过header中获取token，进行check this.session = session; this.userId = userId; webSockets.add(this); sessionPool.put(userId, session); log.info("【websocket消息】有新的连接，总数为:" + webSockets.size()); } catch (Exception e) { } } @OnClose public void onClose() { try { webSockets.remove(this); sessionPool.remove(this.userId); log.info("【websocket消息】连接断开，总数为:" + webSockets.size()); } catch (Exception e) { } } @OnMessage public void onMessage(String message) { //todo 现在有个定时任务刷，应该去掉 log.debug("【websocket消息】收到客户端消息:" + message); JSONObject obj = new JSONObject(); //业务类型 obj.put(WebsocketConst.MSG_CMD, WebsocketConst.CMD_CHECK); //消息内容 obj.put(WebsocketConst.MSG_TXT, "心跳响应"); //update-begin-author:taoyan date:20220308 for: 消息通知长连接启动心跳机制，后端代码小bug #3473 for (WebSocket webSocket : webSockets) { // webSocket.pushMessage(obj.toJSONString()); webSocket.session.getAsyncRemote().sendText(message); } //update-end-author:taoyan date:20220308 for: 消息通知长连接启动心跳机制，后端代码小bug #3473 } /** * 配置错误信息处理 * @param session * @param t */ @OnError public void onError(Session session, Throwable t) { //什么都不想打印都去掉就好了 log.info("【websocket消息】出现未知错误 "); //打印错误信息，如果你不想打印错误信息，去掉就好了 //这里打印的也是 java.io.EOFException: null t.printStackTrace(); } /** * 服务端推送消息 * * @param userId * @param message */ public void pushMessage(String userId, String message) { Session session = sessionPool.get(userId); if (session != null && session.isOpen()) { try { //update-begin-author:taoyan date:20211012 for: websocket报错 https://gitee.com/jeecg/jeecg-boot/issues/I4C0MU synchronized (session){ log.info("【websocket消息】 单点消息:" + message); session.getBasicRemote().sendText(message); } //update-end-author:taoyan date:20211012 for: websocket报错 https://gitee.com/jeecg/jeecg-boot/issues/I4C0MU } catch (Exception e) { e.printStackTrace(); } } } /** * 服务器端推送消息 */ public void pushMessage(String message) { try { webSockets.forEach(ws -> ws.session.getAsyncRemote().sendText(message)); } catch (Exception e) { e.printStackTrace(); } } }
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>本地websocket测试</title>
<meta name="robots" content="all" />
<meta name="keywords" content="本地,websocket,测试工具" />
<meta name="description" content="本地,websocket,测试工具" />
<style>
.btn-group{
display: inline-block;
}
</style>
</head>
<body>
<input type='text' value='ws://localhost:3000/api/ws' class="form-control" style='width:390px;display:inline'
id='wsaddr' />
<div class="btn-group" >
<button type="button" class="btn btn-default" οnclick='addsocket();'>连接</button>
<button type="button" class="btn btn-default" οnclick='closesocket();'>断开</button>
<button type="button" class="btn btn-default" οnclick='$("#wsaddr").val("")'>清空</button>
</div>
<div class="row">
<div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div>
<input type="text" id='message' class="form-control" style='width:810px' placeholder="待发信息" οnkeydοwn="en(event);">
<span class="input-group-btn">
<button class="btn btn-default" type="button" οnclick="doSend();">发送</button>
</span>
</div>
</div>
</body>
<script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function formatDate(now) {
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) +
" " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (
second = second < 10 ? ("0" + second) : second);
}
var output;
var websocket;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function addsocket() {
var wsaddr = $("#wsaddr").val();
if (wsaddr == '') {
alert("请填写websocket的地址");
return false;
}
StartWebSocket(wsaddr);
}
function closesocket() {
websocket.close();
}
function StartWebSocket(wsUri) {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("<span style='color:red'>连接成功，现在你可以发送信息啦！！！</span>");
}
function onClose(evt) {
writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>");
websocket.close();
}
function onMessage(evt) {
writeToScreen('<span style="color:blue">服务端回应 ' + formatDate(new Date()) + '</span><br/><span class="bubble">' +
evt.data + '</span>');
}
function onError(evt) {
writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);
}
function doSend() {
var message = $("#message").val();
if (message == '') {
alert("请先填写发送信息");
$("#message").focus();
return false;
}
if (typeof websocket === "undefined") {
alert("websocket还没有连接，或者连接失败，请检测");
return false;
}
if (websocket.readyState == 3) {
alert("websocket已经关闭，请重新连接");
return false;
}
console.log(websocket);
$("#message").val('');
writeToScreen('<span style="color:green">你发送的信息 ' + formatDate(new Date()) + '</span><br/>' + message);
websocket.send(message);
}
function writeToScreen(message) {
var div = "<div class='newmessage'>" + message + "</div>";
var d = $("#output");
var d = d[0];
var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
$("#output").append(div);
if (doScroll) {
d.scrollTop = d.scrollHeight - d.clientHeight;
}
}
function en(event) {
var evt = evt ? evt : (window.event ? window.event : null);
if (evt.keyCode == 13) {
doSend()
}
}
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看