Web页面无操作时使系统锁定

在掘金里看到 一篇文章 ，说领导让实习生实现一个功能，在浏览器中实现一个页面无操作时锁屏的功能。
我突然感觉好熟悉，不就是以前网络上一个梗的衍生吗（根据用户心情来修改手机保护壳颜色）？

不过话说回来，还真给他实现了，他的实现思路大概就是把整个 Web 应用使用 sys-shim 库打包成一个本地的应用，然后调用本地 API 来锁定系统。

但是个人感觉没必要，他这个实现过程非常滴曲线救国，
不就是想让浏览器调用本地 API 吗？

直接在客户电脑上跑一个 HTTP 服务，然后让浏览器去请求这个 HTTP 服务，服务来调用本地 API 不就行了？

为什么必须绕这么一个弯，是因为截至目前，浏览器都不能直接调用本地 API（为了安全）。

当然这种方法是有前提的，那就是该项目必须是 ToB（面向企业） 项目。

只有 ToB 的项目，才能实现去特定客户的电脑上安装一个 HTTP 服务。

好了，不说了，下面看实现：Web 页面无操作时使系统锁定

本地 HTTP 服务

需要在客户电脑上运行一个本地 HTTP 服务，用来调用系统锁定 API。
这里使用 NodeJS 来实现。

// server.js
const http = require("http");
const port = 5667;

const handler = (req, res) => {
  res.writeHead(200, {
    "Content-Type": "text/plain;charset=utf8",
  });

  if (/\/lock$/.test(req.url)) {
    lock();
    res.end("锁定成功");
  } else {
    res.end("路径错误");
  }
};
const server = http.createServer(handler);
server.listen(port);

// 使计算机锁定
const { exec } = require("child_process");
const lockCommand = "rundll32.exe user32.dll,LockWorkStation"; // 锁定命令
function lock() {
  exec(lockCommand, (error, stdout, stderr) => {
    if (error) {
      console.error(`执行出错: ${error}`);
      return;
    }
    console.log("电脑已锁定。");
  });
}

然后使用 NodeJS 将本地 HTTP 服务跑起来就可以了

部署为 HTTP 服务

这一步是为了方便 HTTP 服务随着计算机启动而一起启动。
需要先把 HTTP 服务的 js 文件打包成一个 exe 文件。

# 安装pkg库，用来将js文件打包为exe文件
npm i -g pkg

# 执行
npx pkg server.js

可以获得一个 exe 文件。
然后需要在客户电脑上注册一个服务，用来随计算机启动而启动这个 HTTP 服务。
过程略，很简单，自行百度去。

Web 页面

页面上，当鼠标没有移动/键盘没有敲击后的一段时间，执行系统的锁定。

// index.js

/**
 * 请求锁定系统
 */
function requestLock() {
  const port = 5667;
  fetch(`http://localhost:${port}/lock`);
}

let timer = 0; // 定时器
const interval = 10 * 60; // 10 分钟

/**
 * 防抖
 */
function debouncing() {
  if (timer != 0) clearTimeout(timer);
  timer = setTimeout(() => {
    requestLock();
    timer = 0;
  }, interval);
}
debouncing(); // 初始调用

// 监听鼠标移动/键盘敲击
document.onmousemove = debouncing;
document.onkeydown = debouncing;