SpringBoot 整合 WebScoket 实现监听文件导入的进度条显示

  1. 本次开发环境为 IDEA + maven + WebScoket + HbuliderX
  2. 所用技术栈有：SpringBoot 2.3.5 + WebScoket + vue2.0
  3. 开始本次教程
  1. 首先需要在 pom.xml 文件中导入 WebScoket 依赖：
<dependency>  
           <groupId>org.springframework.boot</groupId>  
           <artifactId>spring-boot-starter-websocket</artifactId>  
       </dependency>
  1. 开启WebSocket的支持，并把该类注入到spring容器中
@Configuration  
public class WebSocketConfig {  
	
    @Bean  
    public ServerEndpointExporter serverEndpointExporter() {  
        return new ServerEndpointExporter();  
    }  
  
}
  1. 编写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--;
    }
}
  1. 文件导入的Controller层：
@RequestMapping("/upload")
    @ResponseBody
    public String upload(MultipartFile file, HttpServletRequest request) {

        return trapezeService.readExcelFile(file);
    }
  1. 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;
    }
  1. 使用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 = .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>