NFC_WebReader/index.html at main · CJhangTW/NFC_WebReader · GitHub

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NFC 模擬感應器 Demo</title>
    <style>
        body { font-family: sans-serif; padding: 20px; line-height: 1.6; }
        .card { border: 1px solid #ccc; padding: 15px; border-radius: 8px; background: #f9f9f9; }
        button { background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; width: 100%; }
        button:disabled { background: #ccc; }
        #log { margin-top: 20px; padding: 10px; background: #eee; font-size: 12px; height: 150px; overflow-y: auto; border-radius: 4px; }
        .status { font-weight: bold; margin-bottom: 10px; }
    </style>
</head>
<body>

    <h2>NFC 感應器模擬器</h2>
    <div class="card">
        <div class="status">狀態: <span id="statusText">等待啟動</span></div>
        <p>設備編號 (Sensor ID): <strong>PHONE_DEMO_001</strong></p>
        <button id="startBtn">啟動感應掃描</button>
    </div>

    <div id="log">系統日誌：<br></div>

    <script>
        const startBtn = document.getElementById('startBtn');
        const statusText = document.getElementById('statusText');
        const logElement = document.getElementById('log');
        const SENSOR_ID = "PHONE_DEMO_001"; // 模擬感應器 ID

        function updateLog(msg) {
            const now = new Date().toLocaleTimeString();
            logElement.innerHTML += `[${now}] ${msg}<br>`;
            logElement.scrollTop = logElement.scrollHeight;
        }

        startBtn.addEventListener('click', async () => {
            if (!('NDEFReader' in window)) {
                updateLog("錯誤：此瀏覽器不支援 Web NFC。");
                return;
            }

            try {
                const ndef = new NDEFReader();
                await ndef.scan();

                statusText.innerText = "掃描中...";
                statusText.style.color = "green";
                startBtn.disabled = true;
                updateLog("NFC 已啟動，請靠近標籤...");

                ndef.addEventListener("reading", ({ serialNumber, message }) => {
                    updateLog(`讀取成功！ID: ${serialNumber}`);

                    // 遍歷所有 NDEF 紀錄
                    for (const record of message.records) {
                        updateLog("紀錄類型: " + record.recordType);
                        updateLog("MIME 類型: " + record.mediaType);

                        // 1. 讀取純文字 (Text Record)
                        if (record.recordType === "text") {
                            const textDecoder = new TextDecoder(record.encoding);
                            const text = textDecoder.decode(record.data);
                            updateLog(`文字內容: ${text}`);
                        }

                        // 2. 讀取網址 (URL Record)
                        if (record.recordType === "url") {
                            const textDecoder = new TextDecoder();
                            const url = textDecoder.decode(record.data);
                            updateLog(`網址: ${url}`);
                        }

                        // 3. 讀取 JSON 或自定義數據 (Mime Record)
                        if (record.mediaType === "application/json") {
                            const textDecoder = new TextDecoder();
                            const jsonData = JSON.parse(textDecoder.decode(record.data));
                            updateLog(`JSON 數據: ${JSON.stringify(jsonData)}`);
                        }
                    }

                    sendToBackend(serialNumber);
                });

                ndef.addEventListener("readingerror", () => {
                    updateLog("讀取失敗，請重新靠近標籤。");
                });

            } catch (error) {
                updateLog(`啟動失敗: ${error}`);
            }
        });

        function sendToBackend(tagId) {
            // 這裡替換成您實際的後端網址
            const apiEndpoint = "https://your-api-endpoint.com/log";
            const queryUrl = `${apiEndpoint}?tag_id=${tagId}&sensor_id=${SENSOR_ID}`;

            updateLog(`正在發送請求至後端...`);

            fetch(queryUrl, { method: 'GET', mode: 'cors' })
                .then(response => {
                    updateLog(`後端回應狀態: ${response.status}`);
                })
                .catch(err => {
                    updateLog(`連線失敗: ${err.message}`);
                });
        }
    </script>
</body>
</html>