electron获取元素xpath、pc端网页展示获取到的xpath、websocket给两端传值

目录

  • 需求点:
  • 思路:
    • 思路:
      • 一、electron获取xpath
        • 1、创建主窗口
        • 2、创建子窗口并且setBrowserView到主窗口,子窗口默认加载error.html
        • 3、如果获取到了url,就加载url
        • 4、获取xpath并传递
      • 二、electron通过websocket传递消息
      • 三、vue监听websocket
      • 四、electron注册和多次打开问题
        • 1、electron端注册
        • 2、pc端打开
        • 3、electron端检测是第一次打开,还是重复打开

需求点:

1、打开任意网站,点击元素,获取元素xpath(这个在pc端就很难实现了,会涉及到跨域问题,所以用的electron)
2、获取的xpath需要回显到PC端网站,通过接口保存

思路:

1、electron实现获取xpath这一操作
2、pc端需要有 调起electron app 和 拿到 electron app 返回值的操作
3、传值
在传值上先后试过 mqtt、url+localstorage,mqtt因为延时,导致获取以后不能马上看到赋值,pass,url+localstorage就是electron app 通过打开一个新链接的方式跳转到pc,这样会每次打开一个新链接,并且涉及到要一直判断什么时候该保存,什么时候该清空,体验不太好,所以最后选择websocket

思路:

仅用于描述思路,代码不完整,不能直接使用

一、electron获取xpath

建2个窗口,主窗口通过 process.argv 获取 打开app时候的 参数,如果参数中包含url,则认为是pc端启动的app,这时候子窗口加载url地址,否则认为是单独启动app,这时候子窗口加载错误页面,提示需要pc端打开。
获取xpath用插件 (get-xpath)

1、创建主窗口
win = new BrowserWindow({
    width: 1500,
    height: 1200,
    webPreferences: {
      webSecurity: true,
      webviewTag: true, // 开启webview
      nodeIntegration: true, // 启用 Node.js 集成
      preload: path.join(__dirname, "/static/js/preload.js"),
    },
  });
win.loadFile("./index.html");
2、创建子窗口并且setBrowserView到主窗口,子窗口默认加载error.html
view = new BrowserView({
    webPreferences: {
      webSecurity: true,
      webviewTag: true, // 开启webview
      nodeIntegration: true, // 启用 Node.js 集成
      preload: path.join(__dirname, "./static/js/capturePage.js"),
    },
  });
  view.setBounds({
    x: 0,
    y: 0,
    width: 1500,
    height: 1200,
    horizontal: true,
    vertical: true,
  });
  winWebContents = win.webContents;
  viewWebContents = view.webContents;
  win.setBrowserView(view);
  viewWebContents.loadFile("./error.html");
3、如果获取到了url,就加载url
if (par && par.href && par.orderId && par.targetHref) {
   viewWebContents.loadURL(par.href);
}
4、获取xpath并传递

上方代码有个(preload: path.join(__dirname, “./static/js/capturePage.js”) 在这里新建一个capturePage.js文件,文件里的功能需要实现:a.引入插件; b.拦截加载页面的原生点击事件;c.给点击事件加效果;d.传递获取到的xpath给主进程

const { ipcRenderer } = require("electron");
const getXPath = require("get-xpath");

// 高亮的样式
const cla = "clickClass";
const style = "background:#ffeded;outline:2px dashed #ff5050;";
// box-sizing:border-box!important;
// 清空并初始化元素
function initDom(cla) {
  const body = document.querySelector("html");
  const allChoosedDom = body.querySelectorAll(`.${cla}`);
  allChoosedDom &&
    allChoosedDom.forEach((item) => {
      item.style.cssText = "";
      item.classList.remove(cla);
    });
}

document.addEventListener("DOMContentLoaded", (event) => {
  const errBox = document?.querySelector("#errBox");
  // console.log(errBox, "errBox");
  if (errBox) return;
  // mouseover、mouseout共用方法
  function changeDomStyle(env) {
    document.addEventListener(env, function (event) {
      event.preventDefault();
      let element = event.target;
      const inlineStyle = element.style.cssText;
      let all = inlineStyle;
      const hoverStyle = "background:#9eddc3;outline:2px solid #41b584;";
      const initStyle = "background:none; outline:none;";
      // box-sizing:border-box!important;
      if (env === "mouseover") {
        all += hoverStyle;
        element.style.cssText = all;
      }
      if (env === "mouseout") {
        if (element.classList.contains(cla)) {
          all += style;
          element.style.cssText = all;
        } else {
          all += initStyle;
          element.style.cssText = all;
        }
      }
    });
  }
  changeDomStyle("mouseover");
  changeDomStyle("mouseout");
  // 点击获取元素
  document.addEventListener("click", function (event) {
    event.preventDefault();
    initDom(cla);
    var element = event.target;
    element.classList.add(cla);
    element.style.cssText = style;
    ipcRenderer.send("submit-xpath", getXPath(element));
  });
});

至此,electron获取xpath交互差不多完成

二、electron通过websocket传递消息

此处需关注,初始化ws和发送消息是异步的,链接一次即可,发送消息可以多次,每次xpath获取到了就发送一次

// 初始化
const WebSocket = require("ws");
let wss, wslocal;
wss = new WebSocket.Server({ port: 66666});
wss.on("connection", (ws) => {
  wslocal = ws;
  ws.on("message", (message) => {
    console.log(`Received message: ${message}`);
  });
  ws.on("error", (error) => {
    console.log(error, "error");
  });
});
wss.on("error", (error) => {
  console.log("WebSocket-error:", error);
});
// 触发
// 子窗口给渲染进程-xpath
ipcMain.on("submit-xpath", (event, xpath) => {
  //给客户端发消息
  wslocal.send(
    `${decodeURIComponent(par.targetHref)}?orderId=${
      par.orderId
    }&xpath=${xpath}`
  );
  // 通过打开新窗口的方法传值-此方法体验不好,已废弃
  /* shell.openExternal(
    `${decodeURIComponent(par.targetHref)}?orderId=${
      par.orderId
    }&xpath=${xpath}`
  ); */
});

三、vue监听websocket

这里需要实现1、判断用户是否安装app(这里是根据ws链接情况判断的,10s没有连接到,就默认没有安装)2、获取值

const loading = ref(false)
  const websocket = ref(null)
  const retryCount = ref(0)
  const maxRetries = ref(5)
  const retryDelay = ref(2000) // 2秒
  const timeoutId = ref(null)
  const createWeb = () => {
    if (!timeoutId.value) {
      loading.value = true
      timeoutId.value = setTimeout(() => {
        gp.$baseMessage(
          '连接超时,请先下载APP',
          'error',
          false,
          'vab-hey-message-error'
        )
        loading.value = false
      }, 10000)
    }
    websocket.value = new WebSocket('ws://localhost:66666')
    websocket.value.onopen = (event) => {
      console.log('WebSocket连接已建立', event)
      loading.value = false
    }
    websocket.value.onmessage = (event) => {
      clearTimeout(timeoutId.value) // 清除超时定时器
      const { data } = event
    }
    websocket.value.onclose = (event) => {
      if (event.code === 1006 && retryCount.value < maxRetries.value) {
        // 如果是网络问题导致的连接关闭,则重试连接
        retryCount.value++
        setTimeout(createWeb(), retryDelay.value) // 2秒后再次尝试连接
      } else {
        console.log(event, '其他原因导致的连接关闭')
      }
    }
    websocket.value.onerror = (error) => {
      console.log(error, 'error')
    }
  }

四、electron注册和多次打开问题

1、electron端注册
// 注册app,用于PC端唤醒
setDefaultProtocol: (scheme) => {
  //判断系统
  if (process.platform === "win32") {
    let args = [];
    if (!app.isPackaged) {
      //开发阶段调试阶段需要将运行程序的绝对路径加入启动参数
      args.push(path.resolve(process.argv[1]));
    }
    //添加--防御自定义协议漏洞,忽略后面追加参数
    args.push("--");
    //判断是否已经注册
    if (!app.isDefaultProtocolClient(scheme, process.execPath, args)) {
      app.setAsDefaultProtocolClient(scheme, process.execPath, args);
    }
  } else {
    //判断是否已经注册
    if (!app.isDefaultProtocolClient(scheme)) {
      app.setAsDefaultProtocolClient(scheme);
    }
  }
}
2、pc端打开
// myApp是我随便取的,换成自己的就可以了
const allHref = `myApp://?orderId=${orderId}&href=${href}&targetHref=${targetHref}`
window.location.href = allHref
3、electron端检测是第一次打开,还是重复打开

(因为我的需求设计是,pc端每次想要获取的时候,都可以唤醒electron app,所以需要这个,如果没有这部分的需求,这段就没必要加了)

// 获取单实例锁
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  app.quit();
} else {
  app.on("second-instance", (event, argv) => {
    ipcMain.removeAllListeners();
    // 处理收到的参数
    protocol = mainSupplement.handleArgv(argv, "myApp");
    par = mainSupplement.handleURL(protocol);
    // 唤起已打开的窗口
    if (win) {
      if (win.isMinimized()) win.restore();
      win.focus();
      // 加载需要抓取的页面
      if (par && par.href && par.orderId && par.targetHref) {
        viewWebContents.loadURL(par.href);
        // 子窗口给渲染进程-xpath
        ipcMain.on("submit-xpath", (event, xpath) => {
          //给客户端发消息
          wslocal.send(
            `${decodeURIComponent(par.targetHref)}?orderId=${
              par.orderId
            }&xpath=${xpath}`
          );
        });
      }
    }
  });
  //冷启动主进程代码执行直接在这里获取启动协议
  // 处理收到的参数
  protocol = mainSupplement.handleArgv(process.argv, "myApp");
  par = mainSupplement.handleURL(protocol);
}

因为启动分为第一次启动和第二次启动,这个部分在electron文档可以看到,不多说,就是需要根据两种情境配置2份代码,app.on(“second-instance”) 和 app.whenReady() 代码非常相似

app.whenReady().then(async () => {
  await createWindow();
  // 加载需要抓取的页面
  if (par && par.href && par.orderId && par.targetHref) {
    viewWebContents.loadURL(par.href);
    // 子窗口给渲染进程-xpath
    ipcMain.removeAllListeners();
    ipcMain.on("submit-xpath", (event, xpath) => {
      //给客户端发消息
      wslocal.send(
        `${decodeURIComponent(par.targetHref)}?orderId=${
          par.orderId
        }&xpath=${xpath}`
      );
    });
  }

你可能感兴趣的:(electron,websocket,javascript)