SpringBoot 整合 WebScoket 实现监听文件导入的进度条显示
-
本次开发环境为 IDEA + maven + WebScoket + HbuliderX
-
所用技术栈有:SpringBoot 2.3.5 + WebScoket + vue2.0
-
开始本次教程
-
首先需要在 pom.xml 文件中导入 WebScoket 依赖:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
-
开启WebSocket的支持,并把该类注入到spring容器中
@Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
-
编写WebSocketServer
package cn.han.han_parse.config; import cn.hutool.log.Log; import cn.hutool.log.LogFactory; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import org.apache.commons.lang.StringUtils; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.concurrent.ConcurrentHashMap; /** * @author zhengkai.blog.csdn.net */ @ServerEndpoint("/imserver/{userId}") @Component public class WebSocketServer { static Log log = LogFactory.get(WebSocketServer.class); /** * 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。 */ private static int onlineCount = 0; /** * concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。 */ private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>(); /** * 与某个客户端的连接会话,需要通过它来给客户端发送数据 */ private Session session; /** * 接收userId */ private String userId = ""; /** * 连接建立成功调用的方法 */ @OnOpen public void onOpen(Session session, @PathParam("userId") String userId) { this.session = session; this.userId = userId; if (webSocketMap.containsKey(userId)) { webSocketMap.remove(userId); webSocketMap.put(userId, this); //加入set中 } else { webSocketMap.put(userId, this); //加入set中 addOnlineCount(); //在线数加1 } log.info("用户连接:" + userId + ",当前在线人数为:" + getOnlineCount()); try { sendMessage("连接成功"); } catch (IOException e) { log.error("用户:" + userId + ",网络异常!!!!!!"); } } /** * 连接关闭调用的方法 */ @OnClose public void onClose() { if (webSocketMap.containsKey(userId)) { webSocketMap.remove(userId); //从set中删除 subOnlineCount(); } log.info("用户退出:" + userId + ",当前在线人数为:" + getOnlineCount()); } /** * 收到客户端消息后调用的方法 * * @param message 客户端发送过来的消息 */ @OnMessage public void onMessage(String message, Session session) { log.info("用户消息:" + userId + ",报文:" + message); //可以群发消息 //消息保存到数据库、redis if (StringUtils.isNotBlank(message)) { try { //解析发送的报文 JSONObject jsonObject = JSON.parseObject(message); //追加发送人(防止串改) jsonObject.put("fromUserId", this.userId); String toUserId = jsonObject.getString("toUserId"); //传送给对应toUserId用户的websocket if (StringUtils.isNotBlank(toUserId) && webSocketMap.containsKey(toUserId)) { webSocketMap.get(toUserId).sendMessage(jsonObject.toJSONString()); } else { log.error("请求的userId:" + toUserId + "不在该服务器上"); //否则不在这个服务器上,发送到mysql或者redis } } catch (Exception e) { e.printStackTrace(); } } } /** * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { log.error("用户错误:" + this.userId + ",原因:" + error.getMessage()); error.printStackTrace(); } /** * 实现服务器主动推送 */ public void sendMessage(String message) throws IOException { log.info("服务器推送信息为:" + message); this.session.getBasicRemote().sendText(message); } /** * 发送自定义消息 */ public static void sendInfo(String message, @PathParam("userId") String userId) throws IOException { log.info("发送消息到:" + userId + ",报文:" + message); if (StringUtils.isNotBlank(userId) && webSocketMap.containsKey(userId)) { webSocketMap.get(userId).sendMessage(message); } else { log.error("用户" + userId + ",不在线!"); } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketServer.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketServer.onlineCount--; } }
-
文件导入的Controller层:
@RequestMapping("/upload") @ResponseBody public String upload(MultipartFile file, HttpServletRequest request) { return trapezeService.readExcelFile(file); }
-
Service 层:
@Override public String readExcelFile(MultipartFile file) { String result = ""; //创建处理EXCEL的类 ReadExcel readExcel = new ReadExcel(); //解析excel,获取上传的事件单 List<Trapeze> trapezeList = readExcel.getExcelInfo(file); //至此已经将excel中的数据转换到list里面了,接下来就可以操作list,可以进行保存到数据库,或者其他操作, //final Integer integer = trapezeMapper.insertList(trapezeList); //因为需要计算导入的数据百分比,所以在此使用for循环导入数据 for (int i = 0; i < trapezeList.size(); i++) { trapezeMapper.insertTrapeze(trapezeList.get(i)); final Double aDouble = Double.valueOf(trapezeList.size()); final double v = Double.valueOf(i + 1) / aDouble * 100; System.out.println("v:"); System.out.println(v); try { WebSocketServer.sendInfo(String.valueOf(v), "111"); } catch (IOException e) { e.printStackTrace(); } } // System.out.println("受影响行数为:" + integer); //和你具体业务有关,这里不做具体的示范 if (trapezeList != null && !trapezeList.isEmpty()) { result = "上传成功"; } else { result = "上传失败"; } return result; }
-
使用Element,需要导入Element 命令为:cnpm i element-ui -S,在此使用的时自己封装的axios:
import axios from "axios"; let base = ''; export const postRequest = (url,params) =>{ return axios({ method:'post', url:`${base}${url}`, data:params, dataType:'JSON', responseType: 'JSON' }) }
vue中的代码:
<template> <div> <input type="button" value="永远相信美好的事情即将发生!" @click="download()"> <el-button type="primary" @click="upModel" icon="el-icon-upload">上传数据</el-button> <el-dialog title="上传文件" :visible.sync="uploadDialog" class="eldialog"> <el-form ref="addForm" class="eldialogForm" id="addForm"> <el-form-item label> <el-upload class="upload-demo" drag :before-upload="beforeUpload" :on-exceed="handleExceed" :limit="1" :http-request="uploadFile" multiple ref="upload" action> <i class="el-icon-upload"></i> <div class="el-upload__text"> 将文件拖到此处,或 <em>点击上传</em> </div> <div class="el-upload__tip" slot="tip">只能上传Excel文件,且不超过500kb</div> </el-upload> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="closeFile()">取 消</el-button> <el-button type="primary" @click="postFile()">确 定</el-button> </div> </el-dialog> <el-progress :percentage="percentMsg"></el-progress> </div> </template> <script> import { postRequest } from "@/util/api"; export default { data() { return { uploading: '', uploadDialog: '', websocket: "", percentMsg: 0, } }, mounted() { var webSocket = null; // WebSocket if ("WebSocket" in window) { webSocket = new WebSocket("ws://localhost:8080/imserver/111"); var that = this; webSocket.onopen = function(event) { console.log('建立连接'); } webSocket.onclose = function(event) { console.log('连接关闭'); } webSocket.onmessage = function(event) { console.log('收到消息:' + event.data) var msg = event.data; //this.percentMsg=event.data //that.percentMsg = that.aaa(this.innerText); //this.aaa(event.data) that.aaa(msg); } webSocket.onerror = function() { alert('websocket通信发生错误'); } window.onbeforeunload = function() { webSocket.close(); } } else { alert("当前浏览器 Not support websocket"); } }, methods: { aaa(msg) { this.percentMsg = msg; }, download() { postRequest('/excel/download').then(res => { console.log(res); window.location.href = res.config.url; }) }, beforeUpload(file) { if (file.type == "" || file.type == null || file.type == undefined) { const FileExt = file.name.replace(/.+\./, "").toLowerCase(); if ( FileExt == "xls" || FileExt == "xlsx" || FileExt == "XLS" || FileExt == "XLSX" ) { return true; } else { this.$message.error("上传文件必须是Excel格式!"); return false; } } return true; }, upModel() { this.uploading = true; this.file = []; this.uploadDialog = true; }, // 上传文件个数超过定义的数量 handleExceed(files, fileList) { this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`); }, uploadFile(item) { this.file = item.file; }, postFile() { const fileObj = this.file; var fileData = new FormData(); fileData.append("file", fileObj); let headers = { "Content-Type": "multipart/form-data" }; this.uploading = true; postRequest('/excel/upload', fileData).then(res => { console.log("res:", res); if (res.status == 200) { this.$message.success("读取成功"); this.uploadDialog = false; } else { this.$message.error("错误!请检查上传文件内容"); } }); setTimeout(function() { this.uploading = false; }, 1500); }, colseFile() { this.uploadDialog = false; } } } </script> <style> </style>
-