已实装在 about | Tilnel’s Blog

给静态页面加这种东西，疑似有点闲。

实现分为三步：

1、判断我是否在工位 - 采取的标准是检测右手边主机是否锁屏

2、动态更新

3、将其显示在静态页面上。毕竟 github.io 仓库太慢了

判断

修改 Windows 组策略使得锁定(4800)解锁(4801)事件被记录。写一个cpp获取最后一个事件，挂在后台。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
void CheckLockUnlockEvents() {
    HANDLE hEventLog = OpenEventLog(NULL, "Security");
    if (hEventLog == NULL) {
        std::cerr << "Failed to open event log.\n";
        return;
    }

    DWORD bytesRead = 0, minBytesNeeded = 0;
    const int bufferSize = 1024 * 10;
    std::vector<BYTE> buffer(bufferSize);

    if (!ReadEventLog(hEventLog, EVENTLOG_SEQUENTIAL_READ | EVENTLOG_BACKWARDS_READ,
                      0, buffer.data(), bufferSize, &bytesRead, &minBytesNeeded)) {
        std::cerr << "Failed to read event log.\n";
        CloseEventLog(hEventLog);
        return;
    }

    auto* pRecord = reinterpret_cast<EVENTLOGRECORD*>(buffer.data());

    while ((BYTE*)pRecord < buffer.data() + bytesRead) {
        if (pRecord->EventID == EVENT_LOCK || pRecord->EventID == EVENT_UNLOCK) {
            std::string eventType = (pRecord->EventID == EVENT_LOCK) ? "Lock" : "Unlock";
            std::string message = "Event: " + eventType + ", Time: " + std::to_string(pRecord->TimeGenerated);
            std::cout << message << std::endl;

            SendUDPMessage(message);  // 发送事件到目标主机
            break;  // 每次检测只发送最新的一个事件
        }
        pRecord = (EVENTLOGRECORD*)((BYTE*)pRecord + pRecord->Length);
    }

    CloseEventLog(hEventLog);
}

更新

把事件信息发到 Linux 主机上。启动一个守护进程，监听消息并生成一个 /tmp/activity 文件，内容为需要在网站上显示的 html 标签。

例如：

1
<font color='#ff0000' 已经离开了</font>

配置 nginx

1
2
3
4
location /activity {
  default_type text/html;
  alias /tmp/activity;
}

显示

塞一个 JavaScript 到主题的 js 文件夹里，fetch 这个 html 标签并塞到另一个 html 标签里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const url = "?";

fetch(url, { mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.text();
    })
    .then(html => {
      document.getElementById('html-container').innerHTML =
          html;
    })
    .catch(error => {
      console.error('Failed to fetch HTML:', error);
      document.getElementById('html-container').innerText =
          'Failed to load content.';
    });

现在，为了从 github.io 上跨域访问，需要设置 nginx 的 Head

1
2
3
4
5
6
7
location = /activity {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
  default_type text/html;
  alias /tmp/activity;
}

然后我们把需要的元素装在 About 的 markdown 里面。

1
2
<div id="html-container">校园网访问可加载当前状态</div>
<script type="text/javascript" src="/js/active.js"></script>

效果：

校园网访问可加载当前状态