当前位置：首页 > news >正文

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

news 来源：原创 2024/9/19 6:21:59

业务场景：

领导让我们做一个根据进度实时刷新的进度条，如下所示
在这里插入图片描述
后面去网上查了下，可以通过websocket这种双向通信协议的持久链接实现。

配置

创建配置类，启用websocket支持

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 {@Beanpublic ServerEndpointExporter serverEndpointExporter (){ServerEndpointExporter exporter = new ServerEndpointExporter();return exporter;}
}

定义处理类;
使用ConcurrentHashMap存储所有活跃的WebSocket连接会话
当客户端连接时(@OnOpen), 会将当前会话保存到静态变量sessions中
当客户端断开连接时(@OnClose), 从sessions中移除对应的会话

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;// 收到消息@OnMessagepublic 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);}// 连接打开@OnOpenpublic void onOpen(Session session, EndpointConfig endpointConfig){// 保存 session 到对象this.session = session;sessions.put(session.getId(), session);log.info("[websocket] 新的连接：id={}", this.session.getId());}// 连接关闭@OnClosepublic void onClose(CloseReason closeReason){log.info("[websocket] 连接断开：id={}，reason={}", this.session.getId(),closeReason);}// 连接异常@OnErrorpublic 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传给后端

getProgress() {this.isFinish = false;return new Promise((resolve, reject) => {const id = this.generateUniqueId();// 假设WebSocket服务的URL是 ws://yourserver.com/templates/variablesconst 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);};});},