通过websock实现实时刷新前端(可实现进度条)

业务场景：

领导让我们做一个根据进度实时刷新的进度条，如下所示

后面去网上查了下，可以通过websocket这种双向通信协议的持久链接实现。

配置

创建配置类，启用websocket支持

java 复制代码

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


@Configuration
@EnableWebSocket
public class WebSocketConfiguration {

	@Bean
	public ServerEndpointExporter serverEndpointExporter (){
		ServerEndpointExporter exporter = new ServerEndpointExporter();
		return exporter;
	}
}

定义处理类;

使用ConcurrentHashMap存储所有活跃的WebSocket连接会话

当客户端连接时(@OnOpen), 会将当前会话保存到静态变量sessions中

当客户端断开连接时(@OnClose), 从sessions中移除对应的会话

java 复制代码

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.time.Instant;
import java.util.concurrent.ConcurrentHashMap;

@Slf4j
@Component
@ServerEndpoint("/progress")
public class ProgressWebSocketHandler  {

	private static ConcurrentHashMap<String, Session> sessions = new ConcurrentHashMap<>();


	private Session session;

	// 收到消息
	@OnMessage
	public void onMessage(String message) throws IOException{

		log.info("[websocket] 收到消息：id={}，message={}", this.session.getId(), message);

		if (message.equalsIgnoreCase("bye")) {
			// 由服务器主动关闭连接。状态码为 NORMAL_CLOSURE（正常关闭）。
			this.session.close(new CloseReason(CloseReason.CloseCodes.NORMAL_CLOSURE, "Bye"));;
			return;
		}

		this.session.getAsyncRemote().sendText("["+ this.session.getId() +"] Hello " + message);
	}

	// 连接打开
	@OnOpen
	public void onOpen(Session session, EndpointConfig endpointConfig){
		// 保存 session 到对象
		this.session = session;
		sessions.put(session.getId(), session);
		log.info("[websocket] 新的连接：id={}", this.session.getId());
	}

	// 连接关闭
	@OnClose
	public void onClose(CloseReason closeReason){
		log.info("[websocket] 连接断开：id={}，reason={}", this.session.getId(),closeReason);
	}

	// 连接异常
	@OnError
	public void onError(Throwable throwable) throws IOException {

		log.info("[websocket] 连接异常：id={}，throwable={}", this.session.getId(), throwable.getMessage());

		// 关闭连接。状态码为 UNEXPECTED_CONDITION（意料之外的异常）
		this.session.close(new CloseReason(CloseReason.CloseCodes.UNEXPECTED_CONDITION, throwable.getMessage()));
	}


	public static void sendMessage(String sessionId, String message) {
		Session session = sessions.get(sessionId);
		if (session != null && session.isOpen()) {
			try {
				session.getAsyncRemote().sendText("["+ session.getId() +"] Hello " + message);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}
}

测试链接

用postman或者aipfox创建一个websocket链接，地址格式为ws://+主机+端口+你指定的ServerEndpoint路径名，比如我在本地测试，websocket所在的微服务端口号为8118，在处理类用了@ServerEndpoint("/progress")，那么链接地址为ws://localhost:8118/progress

点击链接，出行图下提示说明连接成功了

随便写点什么，点击发送，中括号里的数组就是sessionId(连接Id）。

业务代码

前端代码

前端不是我写的，不过也很好懂，大致意思就是开通一个websocket通道，然后把sessionId传给后端

javascript 复制代码

getProgress() {
      this.isFinish = false;
      return new Promise((resolve, reject) => {
        const id = this.generateUniqueId();
        // 假设WebSocket服务的URL是 ws://yourserver.com/templates/variables
        const socket = new WebSocket("ws://localhost:8118/progress?");
        // 连接打开时触发的函数
        socket.onopen = (event) => {
         
          socket.send(this.id);
        };
        // 接收到服务器消息时触发的函数
        socket.onmessage = (event) => {
          let process = event.data.split(": ");
          if (process.length > 1) {
            this.process = process[1].replace("%", "");
          }
          if (this.process == "100") {
            this.isFinish = true;
          }
          let match = event.data.match(/\[(\d+)\]/);
          if (match) {
            let result_number = match[1];
            this.id = result_number;
            // console.log(this.id, "this.ids");
            resolve(this.id);
          }
        };
        // 连接关闭时触发的函数
        socket.onclose = function (event) {
          if (event.wasClean) {
            console.log("WebSocket 连接已正常关闭");
          } else {
            // 例如，服务器进程被杀死或网络中断
            console.log("WebSocket 连接意外关闭");
          }
          console.log("关闭代码: " + event.code + " 关闭原因: " + event.reason);
        };
        // 发生错误时触发的函数
        socket.onerror = function (error) {
          console.error("WebSocket 发生错误:", error);
        };
      });
    },

后端代码

在业务接口形参里接收前端传过来的sessionId，在你写的业务逻辑代码里面调用sendMessage方法，返回数据给前端

在测试软件上测试你的业务接口，这是你的业务代码接口，跟websocket接口是两个通道，不要混淆了。