SpringBoot集成websocket发送后台日志到前台页面
业务需求
后台为一个采集系统，需要将采集过程中产生的日志实时发送到前台页面展示，以便了解采集过程。
技能点
- SpringBoot 2.x
- websocket
- logback
- thymeleaf
- RabbitMQ
之所以使用到RabbitMQ是因为实际环境中采集服务为多个，为了统一处理日志信息，将日志都先灌入mq中，再统一从mq中进行消费
引入关键pom
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<!--rabbitmq -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-amqp</artifactId>
</dependency>
logback配置文件引入AmqpAppender
<springProperty scope="context" name="rabbitmq-address" source="spring.rabbitmq.addresses" defaultValue="127.0.0.1:5672" />
<springProperty scope="context" name="rabbitmq-username" source="spring.rabbitmq.username" defaultValue="guest" />
<springProperty scope="context" name="rabbitmq-password" source="spring.rabbitmq.password" defaultValue="guest" />
<springProperty scope="context" name="rabbitmq-virtual-host" source="spring.rabbitmq.virtual-host" defaultValue="/" />
<springProperty scope="context" name="exhcange-name" source="platform.parameter.exhcangeName" defaultValue="default-exchange" />
<springProperty scope="context" name="binding-key" source="platform.parameter.bindingKey" defaultValue="default-routing" />
<appender name="RabbitMq" class="org.springframework.amqp.rabbit.logback.AmqpAppender">
<layout>
<pattern>[%X{traceId}] - %d{HH:mm:ss.SSS} %-5level %logger{36} - %msg%n</pattern> <!--<1>-->
</layout>
<!--rabbitmq地址 -->
<addresses>${rabbitmq-address}</addresses>
<username>${rabbitmq-username}</username>
<password>${rabbitmq-password}</password>
<virtualHost>${rabbitmq-username}</virtualHost>
<declareExchange>false</declareExchange>
<exchangeType>direct</exchangeType>
<exchangeName>${exhcange-name}</exchangeName>
<routingKeyPattern>${binding-key}</routingKeyPattern>
<generateId>true</generateId>
<charset>UTF-8</charset>
<durable>true</durable>
<deliveryMode>NON_PERSISTENT</deliveryMode>
<filter class="com.log.websocket.stomp.LogFilter">
<level>INFO</level>
</filter>
</appender>
<springProfile name="dev">
<root level="debug">
<appender-ref ref="RabbitMq" />
</root>
</springProfile>
日志过滤器
logback配置文件中添加的AmqpAppender使用了filter，具体的filter如下所示：
public class LogFilter extends AbstractMatcherFilter<ILoggingEvent> {
Level level;
@Override
public FilterReply decide(ILoggingEvent event) {
if (!isStarted()) {
return FilterReply.NEUTRAL;
}
//过滤指定级别的日志
if(event.getLevel().equals(level)){
Map<String, String> mdcMap = event.getMDCPropertyMap();
String tracId = mdcMap.get("traceId");
//过滤日志中带有traceId的日志，其他的不需要，traceId使用aop添加
if(StringUtils.isNotBlank(tracId)){
return FilterReply.ACCEPT;
}
}
return FilterReply.DENY;
}
public void setLevel(Level level) {
this.level = level;
}
@Override
public void start() {
if (this.level != null) {
super.start();
}
}
}
说明：
AmqpAppender中的filter设置了过滤级别，因此只过滤指定级别的日志；
过滤日志中带有traceId的日志，traceId通过aop添加，具体参考后面的aop设置；
aop方式添加traceId
编写LogAspect如下所示：
@Order(1)
@Aspect
@Component
public class LogAspect {
/**
* 所有的业务类的类名都是xxSpiderxxImpl，统一入口都是gatherData方法
*/
@Pointcut("execution(* com.log..*.service..*Spider*Impl.gatherData(..))")
public void pointCut() {}
@Before("pointCut()")
public void before(JoinPoint joinPoint){
//切点已经确定是com.log..*.service..*Spider*Impl.gatherData(..)，该方法的参数只有一个，且为GatherTaskVO
GatherTaskVO vo = (GatherTaskVO)joinPoint.getArgs()[0];
//将任务id作为traceId
MDC.put("traceId", vo.getId());
}
@After("pointCut()")
public void after(JoinPoint joinPoint){
//方法执行完成以后，删除traceId
MDC.remove("traceId");
}
}
解释一下MDC：
对于多个线程同时执行的系统或者分布式系统中，各个线程的日志穿插执行，导致我们无法直观的直接定位整个操作流程，因此，我们需要对一个线程的操作流程进行归类标记，比如使用线程+时间戳或者用户id等，从而使我们能够从混乱的日志中梳理处整个线程的操作流程，因此Slf4j的MDC应运而生，logback和log4j支持MDC。
MDC中提供的方法如下所示;
package org.jboss.logging;
import java.util.Collections;
import java.util.Map;
/**
* 删除了非必须代码以及注释
* Mapped diagnostic context. Each log provider implementation may behave different.
*/
public final class MDC {
//uts the value onto the context.
public static Object put(String key, Object val);
//Returns the value for the key or {@code null} if no value was found.
public static Object get(String key);
//Removes the value from the context.
public static void remove(String key);
//Clears the message diagnostics context.
public static void clear()；
}
MDC提供的方法比较简单，使用也很简单，只需要将指定的值put到线程上下文中，在对应的地方调用get方法获取到值即可。
注意看上述AmqpAppender配置中标记<1>中的traceId即为我们此处添加到线程上下文中的值，如下所示
<layout>
<pattern>[%X{traceId}] - %d{HH:mm:ss.SSS} %-5level %logger{36} - %msg%n</pattern>
</layout>
开启websocket支持
Springboot环境下注入ServerEndpointExporter以开启websocket支持
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
websocketServer
websocketServer用来开启连接，关闭连接以及接收消息等
@Slf4j
@ServerEndpoint("/socketserver/{taskId}")
@Component
public class WebSocketServer {
/**concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。*/
private static ConcurrentHashMap<String,WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
/**与某个客户端的连接会话，需要通过它来给客户端发送数据*/
private Session session;
/**接收taskId*/
private String taskId="";
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session,@PathParam("taskId") String taskId) {
this.session = session;
this.taskId=taskId;
if(webSocketMap.containsKey(taskId)){
webSocketMap.remove(taskId);
webSocketMap.put(taskId,this);
}else{
webSocketMap.put(taskId,this);
}
try {
sendMessage("socket连接成功");
} catch (IOException e) {
log.error("socket>>"+taskId+",网络异常!!!!!!");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
if(webSocketMap.containsKey(taskId)){
webSocketMap.remove(taskId);
}
}
/**
* 收到客户端消息后调用的方法
* TODO 客户端交互使用，暂无用到
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("socket>>>:"+taskId+",报文:"+message);
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("用户错误:"+this.taskId+",原因:"+error.getMessage());
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessage(String message) throws IOException {
//加锁，否则会出现java.lang.IllegalStateException: The remote endpoint was in state [TEXT_FULL_WRITING] which is an invalid state for called method异常，并发使用session发送消息导致的
synchronized (this.session){
this.session.getBasicRemote().sendText(message);
}
}
public ConcurrentHashMap<String,WebSocketServer> getWebSocketMap(){ return webSocketMap; }
}
前台页面
前台页面使用js来调用websocket，请求websocketserver打开socket连接，并且开始和后台交互发送消息
<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="utf-8">
<title>任务日志展示</title>
</head>
<body>
<script th:src="@{/js/jquery.min.js}"></script>
<input type="hidden" id="gather_task_id" th:value="${taskId}" />
<script>
var socket;
function openSocket() {
var detailDiv = $("#log_detail");
var taskId = $("#gather_task_id").val();
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
var socketUrl="http://localhost:8888/socketserver/"+taskId;
socketUrl=socketUrl.replace("https","ws").replace("http","ws");
if(socket!=null){
socket.close();
socket=null;
}
socket = new WebSocket(socketUrl);
//打开事件
socket.onopen = function() {
console.log("websocket已打开");
};
//获得消息事件
socket.onmessage = function(msg) {
console.log(msg.data);
//发现消息进入 开始处理前端触发逻辑
detailDiv.append("<p>"+msg.data+"</p>")
};
//关闭事件
socket.onclose = function() {
console.log("websocket已关闭");
};
//发生了错误事件
socket.onerror = function() {
console.log("websocket发生了错误");
}
}
function sendMessage() {
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else {
console.log("您的浏览器支持WebSocket");
console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
}
}
function printLog(){
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
alert("您的浏览器不支持WebSocket");
}else {
openSocket();
}
}
function quit(){
if(socket!=null){
socket.close();
socket=null;
var detailDiv = $("#log_detail");
detailDiv.append("<p>客户端已退出</p>")
}
}
</script>
<a href="javascript:void(0);" onclick="printLog()" >打印日志</a>
<a href="javascript:void(0);" onclick="quit()">退出</a>
<div id="log_detail">
</div>
</body>
</html>
消费mq中的日志消息
service中产生的日志是添加到mq队列中的，因此需要一个消费者消费队列中的数据，并且使用websocketserver将消息发送到对应的页面上，从而在页面上进行展示
@Component
@Slf4j
public class LogConsumer {
@Resource
private WebSocketService webSocketService;
@RabbitHandler
@RabbitListener(
bindings = @QueueBinding(
value = @Queue(name = "${platform.parameter.queueName}",durable = "true"),
exchange = @Exchange(name = "${platform.parameter.exhcangeName}",ignoreDeclarationExceptions="true",durable = "true"),
key = "${platform.parameter.bindingKey}"
),
concurrency = "2"
)
public void listennerPush(String msg, Channel channel, Message message) throws IOException {
try {
log.debug("consumer>>>接收到的消息>>>{}",msg);
//[1] - 13:15:17.484 - TwitterSpiderMobileService实现类方法<<<<任务id：1
msg.split(" - ")[0].trim().replace("[","").replace("]","");
String tracId = msg.substring(0,msg.indexOf(" - ")).trim().replace("[","").replace("]","");
msg = msg.substring(msg.indexOf(" - ")+2);
//调用websocket发送日志信息到页面上
webSocketService.sendMessage(tracId,msg);
} catch (Exception e) {
log.error("获取消息失败，异常原因：{}",e.getMessage(),e);
} finally {
channel.basicAck(message.getMessageProperties().getDeliveryTag(), false);
}
}
}
sendMessage方法如下所示：
@Override
public void sendMessage(String taskId, String logMessage) {
try {
ConcurrentHashMap<String, WebSocketServer> map = webSocketServer.getWebSocketMap();
WebSocketServer server = map.get(taskId);
if(server!=null){
server.sendMessage(logMessage);
}else{
log.warn("客户端已退出");
}
} catch (IOException e) {
log.error("向客户端发送消息时出现异常，异常原因:{}",e.getMessage(),e);
}
}
最终效果图
经过以上步骤即可将service中生成的日志接近实时的显示在前台页面上，最后的显示效果如下所示：
参考资料
1.SpringBoot2.0集成WebSocket，实现后台向前端推送信息
本文所对应的代码已上传gitee，有需要的可以自行下载。
