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

processflow流程图多人协作预热

news 2025/7/23 21:13:05

前言

在线上办公如火如荼的今天，多人协作功能是每个应用绕不开的门槛。processflow在线流程图（前身基于drawio二次开发）沉寂两年之久，经过长时间设计开发，调整，最终完成了多人协作的核心模块设计。废话不多说，上操作视频展示下效果：

Video_2023-09-04_150131

多人协作技术原理剖析

秉着都2023年了，谁还重复造轮子的理念，这里现学现用，利用了一些商业成熟的技术和软件来实现自己的目标。主要用到了两点技术：

利用websocket的push&subscribe实现多人之间的行为共享（鼠标点击；移动；图标内容变更）
利用onedrive实现历史快照文件的存储

client生产事件主要分为以下几种：

                    switch (data.action){//传递鼠标移动和点击事件case 'message':processMsg(data.msg, data.from);break;case 'clientsList':clientsList(data.msg);break;case 'signal':signal(data.msg);break;case 'newClient':newClient(data.msg);break;case 'clientLeft':clientLeft(data.msg);break;case 'sendSignalFailed':sendSignalFailed(data.msg);break;}

server端主要作用就是接收client端的各个事件，然后对事件进行处理，然后广播出去；

比如：newClient新客户端加入，server端会将clientId和session记录到缓存中，然后将新的clientId广播出去，所有的客户端接收到有新协作者加入后，会进行相关准备操作。

clientLeft：当有客户端下线，也会将session剔除，然后广播出去，所有客户端会将下线的client的光标移除。

push队列主要对各个客户端的事件进行排序。幂等操作，然后发布。

存储端：

主要用onedrive进行存储，历史版本管理，冲突解决。这里插一句，不要问为什么用onedrive，因为drawio集成了onedrive，这里不想重写一套新的文件操作api，直接用现成的了。鉴于国内对onedrive网络支持的不太友好，这也是为什么迟迟不上线的原因之一，后续考虑将接口统一走后端代理，由后端统一访问onedrive。

private Response contactOAuthServer(String authSrvUrl, String code, String refreshToken, String secret,String client, String redirectUri, boolean directResp, int retryCount) {HttpURLConnection con = null;Response response = new Response();try {URL obj = new URL(authSrvUrl);con = (HttpURLConnection) obj.openConnection();con.setRequestMethod("POST");boolean jsonResponse = false;StringBuilder urlParameters = new StringBuilder();if (postType == X_WWW_FORM_URLENCODED) {con.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");if (withAcceptJsonHeader) {con.setRequestProperty("Accept", "application/json");}urlParameters.append("client_id=");urlParameters.append(Utils.encodeURIComponent(client, "UTF-8"));urlParameters.append("&client_secret=");urlParameters.append(Utils.encodeURIComponent(secret, "UTF-8"));if (code != null) {if (withRedirectUrl) {urlParameters.append("&redirect_uri=");urlParameters.append(Utils.encodeURIComponent(redirectUri, "UTF-8"));}urlParameters.append("&code=");urlParameters.append(Utils.encodeURIComponent(code, "UTF-8"));urlParameters.append("&grant_type=authorization_code");} else {if (withRedirectUrlInRefresh) {urlParameters.append("&redirect_uri=");urlParameters.append(Utils.encodeURIComponent(redirectUri, "UTF-8"));}urlParameters.append("&refresh_token=");urlParameters.append(Utils.encodeURIComponent(refreshToken, "UTF-8"));urlParameters.append("&grant_type=refresh_token");jsonResponse = true;}} else if (postType == JSON) {con.setRequestProperty("Content-Type", "application/json");JsonObject urlParamsObj = new JsonObject();urlParamsObj.addProperty("client_id", client);urlParamsObj.addProperty("redirect_uri", redirectUri);urlParamsObj.addProperty("client_secret", secret);if (code != null) {urlParamsObj.addProperty("code", code);urlParamsObj.addProperty("grant_type", "authorization_code");} else {urlParamsObj.addProperty("refresh_token", refreshToken);urlParamsObj.addProperty("grant_type", "refresh_token");jsonResponse = true;}urlParameters.append(urlParamsObj.toString());}// Send post requestcon.setDoOutput(true);DataOutputStream wr = new DataOutputStream(con.getOutputStream());wr.writeBytes(urlParameters.toString());wr.flush();wr.close();BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));String inputLine;StringBuffer authRes = new StringBuffer();while ((inputLine = in.readLine()) != null) {authRes.append(inputLine);}in.close();response.status = con.getResponseCode();Gson gson = new Gson();JsonObject json = gson.fromJson(authRes.toString(), JsonElement.class).getAsJsonObject();String accessToken = getAccessToken(json);int expiresIn = getExpiresIn(json);response.refreshToken = getRefreshToken(json);response.accessToken = accessToken;JsonObject respObj = new JsonObject();respObj.addProperty("access_token", accessToken);if (expiresIn > -1) {respObj.addProperty("expires_in", expiresIn);}if (directResp) {response.content = respObj.toString();} else {// Writes JavaScript coderesponse.content = processAuthResponse(respObj.toString(), jsonResponse);}} catch (IOException e) {StringBuilder details = new StringBuilder("");if (con != null) {try {BufferedReader in = new BufferedReader(new InputStreamReader(con.getErrorStream()));String inputLine;while ((inputLine = in.readLine()) != null) {System.err.println(inputLine);details.append(inputLine);details.append("\n");}in.close();} catch (Exception e2) {// Ignore}}if (e.getMessage() != null && e.getMessage().contains("401")) {response.status = HttpServletResponse.SC_UNAUTHORIZED;} else if (retryCount > 0 && e.getMessage() != null && e.getMessage().contains("Connection timed out")) {return contactOAuthServer(authSrvUrl, code, refreshToken, secret,client, redirectUri, directResp, --retryCount);} else {response.status = HttpServletResponse.SC_INTERNAL_SERVER_ERROR;e.printStackTrace();log.error("AUTH-SERVLET: [" + authSrvUrl + "] ERROR: " + e.getMessage() + " -> " + details.toString());}if (DEBUG) {StringWriter sw = new StringWriter();PrintWriter pw = new PrintWriter(sw);e.printStackTrace(pw);pw.println(details.toString());pw.flush();response.content = sw.toString();}}return response;}