# 步驟1：創(chuàng)建Web服務(wù)器骨架
async def init_app():
    app = web.Application()
    app.router.add_get('/', index_handler)  # 主頁
    app.router.add_get('/ws', ws_handler)   # WebSocket端點(diǎn)
    return app

# 步驟2：實(shí)現(xiàn)WebSocket握手
async def ws_handler(request):
    ws = web.WebSocketResponse()
    await ws.prepare(request)  # 完成協(xié)議升級(jí)
    return ws

# 步驟3：鍵位映射表配置
KEY_MAPPING = {
    'Backspace': 'backspace',
    'Space': 'space',
    'Enter': 'enter',
    'Ctrl': 'ctrl',
    'Alt': 'alt',
    'Win': 'win'
}

# 步驟4：按鍵事件處理
async def handle_keypress(ws, data):
    key = KEY_MAPPING.get(data['key'], data['key'])
    if data.get('is_press'):  # 按下動(dòng)作
        pyautogui.keyDown(key)
    else:                     # 釋放動(dòng)作
        pyautogui.keyUp(key)

# 步驟5：安全剪貼板操作
def safe_paste(text):
    old = pyperclip.paste()
    try:
        pyperclip.copy(text)
        pyautogui.hotkey('ctrl', 'v')  # 通用粘貼快捷鍵
    finally:
        pyperclip.copy(old)  # 恢復(fù)原內(nèi)容

// 步驟6：鍵盤事件綁定
function bindKeys() {
    document.querySelectorAll('.key').forEach(key => {
        key.addEventListener('touchstart', e => {
            e.preventDefault()
            sendKey(key.dataset.code, true)  // 按下
        })
        
        key.addEventListener('touchend', e => {
            e.preventDefault()
            sendKey(key.dataset.code, false) // 釋放
        })
    })
}

// 步驟7：Shift狀態(tài)管理
let shiftActive = false
function toggleShift() {
    shiftActive = !shiftActive
    document.querySelectorAll('.char-key').forEach(key => {
        key.textContent = shiftActive 
            ? key.dataset.upper 
            : key.dataset.lower
    })
}

# 步驟8：修飾鍵狀態(tài)跟蹤
class KeyState:
    def __init__(self):
        self.ctrl = False
        self.alt = False
        self.win = False

# 步驟9：組合鍵邏輯
async def handle_combo(ws, data):
    if data['key'] in ('Ctrl', 'Alt', 'Win'):
        key_state[data['key'].lower()] = data['state']
    elif data['key'] == 'C' and key_state.ctrl:
        pyautogui.hotkey('ctrl', 'c')
3.2 歷史記錄功能
javascript
復(fù)制
// 步驟10：本地存儲(chǔ)管理
const HISTORY_KEY = 'kb_history'
function saveHistory(text) {
    const history = JSON.parse(localStorage.getItem(HISTORY_KEY) || []
    if (!history.includes(text)) {
        const newHistory = [text, ...history].slice(0, 10)
        localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory))
    }
}

// 動(dòng)態(tài)鍵盤生成器
function generateKeyboard() {
    keyboard.innerHTML = '';
    const keys = currentKeyboardCase === 'lower' ? lowerKeys : upperKeys;
    
    keys.forEach(row => {
        const rowDiv = document.createElement('div');
        rowDiv.className = 'keyboard-row';
        
        row.forEach(key => {
            const button = document.createElement('button');
            button.className = 'key';
            button.textContent = key;
            button.onclick = () => sendKey(key);
            rowDiv.appendChild(button);
        });
        
        keyboard.appendChild(rowDiv);
    });
}

# 剪貼板安全處理流程
original_clipboard = pyperclip.paste()  # 備份
try:
    pyperclip.copy(text)          # 寫入
    pyautogui.hotkey('ctrl', 'v') # 粘貼
finally:
    pyperclip.copy(original_clipboard) # 還原

held_keys = {
    'Ctrl': False,
    'Alt': False,
    'Win': False 
}

# 鍵位狀態(tài)同步
async def handle_key_state(key, state):
    if state == 'down':
        pyautogui.keyDown(key.lower())
        held_keys[key] = True
    else:
        pyautogui.keyUp(key.lower())
        held_keys[key] = False

@middleware
async def auth_middleware(request, handler):
    token = request.headers.get('Authorization')
    await verify_jwt(token)
    return await handler(request)

app = web.Application(
    middlewares=[compression_middleware]
)

.key {
    will-change: transform, background;
    transition: all 0.1s cubic-bezier(0.22, 1, 0.36, 1);
}

from asyncio import Lock
key_lock = Lock()

async def handle_keypress(key):
    async with key_lock:
        await asyncio.sleep(0.01) # 10ms防抖
        pyautogui.press(key)

import asyncio
import json
import pyautogui
import pyperclip
from aiohttp import web
import os
from pathlib import Path

html = '''
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>虛擬鍵盤</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 20px;
            touch-action: manipulation;
            user-select: none;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .keyboard {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 5px;
            margin-top: 20px;
        }

        .key {
            background: #e0e0e0;
            border: none;
            border-radius: 5px;
            padding: 15px 5px;
            font-size: 16px;
            touch-action: manipulation;
            cursor: pointer;
            transition: all 0.1s;
            box-shadow: 0 2px 3px rgba(0,0,0,0.1);
        }

        .key:active {
            background: #bdbdbd;
            transform: translateY(1px);
            box-shadow: none;
        }

        .key.wide {
            grid-column: span 2;
        }

        .key.extra-wide {
            grid-column: span 3;
        }

        .key.function-key {
            background: #a5d6a7;
        }

        .key.active-shift {
            background: #4caf50;
            color: white;
        }

        .key.active-caps {
            background: #2196f3;
            color: white;
        }

        #status {
            text-align: center;
            margin: 20px 0;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 5px;
            font-weight: bold;
        }

        .text-input-section {
            margin: 20px 0;
            padding: 20px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .text-input-section textarea {
            width: 100%;
            height: 100px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            resize: vertical;
            font-size: 16px;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }

        .button-group button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            flex: 1;
            font-size: 16px;
            transition: background 0.2s;
        }

        .button-group button:active {
            background: #3d8b40;
        }

        .button-group button.secondary {
            background: #2196F3;
        }

        .button-group button.secondary:active {
            background: #0b7dda;
        }

        .history-section {
            margin: 20px 0;
            padding: 20px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .history-list {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: white;
        }

        .history-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .history-text {
            flex: 1;
            margin-right: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .history-actions {
            display: flex;
            gap: 5px;
        }

        .history-actions button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .history-actions button.delete {
            background: #f44336;
        }

        .history-actions button:active {
            opacity: 0.8;
        }

        .keyboard-controls {
            margin: 10px 0;
            display: flex;
            gap: 10px;
        }

        .keyboard-controls button {
            flex: 1;
            padding: 10px;
            font-size: 14px;
        }

        .keyboard-row {
            display: contents;
        }

        .tab-section {
            margin: 20px 0;
        }

        .tab-buttons {
            display: flex;
            border-bottom: 1px solid #ddd;
        }

        .tab-button {
            padding: 10px 20px;
            background: #f1f1f1;
            border: none;
            cursor: pointer;
            flex: 1;
            text-align: center;
        }

        .tab-button.active {
            background: #4CAF50;
            color: white;
        }

        .tab-content {
            display: none;
            padding: 20px;
            background: white;
            border-radius: 0 0 5px 5px;
        }

        .tab-content.active {
            display: block;
        }

        .shortcut-keys {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 10px;
        }

        .shortcut-key {
            background: #bbdefb;
            padding: 15px 5px;
            text-align: center;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="status">等待連接...</div>

    <div class="tab-section">
        <div class="tab-buttons">
            <button class="tab-button active" onclick="openTab('mainKeyboard')">主鍵盤</button>
            <button class="tab-button" onclick="openTab('shortcuts')">快捷鍵</button>
            <button class="tab-button" onclick="openTab('textInput')">文本輸入</button>
        </div>

        <div id="mainKeyboard" class="tab-content active">
            <div class="keyboard-controls">
                <button class="key function-key" id="shiftKey" onclick="toggleShift()">Shift</button>
                <button class="key function-key" id="capsKey" onclick="toggleCaps()">Caps Lock</button>
                <button class="key function-key" onclick="sendSpecialKey('Alt')">Alt</button>
                <button class="key function-key" onclick="sendSpecialKey('Ctrl')">Ctrl</button>
                <button class="key function-key" onclick="sendSpecialKey('Win')">Win</button>
            </div>

            <div class="keyboard" id="keyboard">
                <!-- 鍵盤布局將通過JavaScript生成 -->
            </div>

            <div class="keyboard-controls" style="margin-top: 10px;">
                <button class="key extra-wide function-key" onclick="sendKey('Space')">空格</button>
                <button class="key function-key" onclick="sendKey('Backspace')">刪除</button>
                <button class="key function-key" onclick="sendKey('Enter')">回車</button>
            </div>
        </div>

        <div id="shortcuts" class="tab-content">
            <h3>常用快捷鍵</h3>
            <div class="shortcut-keys">
                <div class="shortcut-key" onclick="sendShortcut('Ctrl', 'C')">復(fù)制 (Ctrl+C)</div>
                <div class="shortcut-key" onclick="sendShortcut('Ctrl', 'V')">粘貼 (Ctrl+V)</div>
                <div class="shortcut-key" onclick="sendShortcut('Ctrl', 'X')">剪切 (Ctrl+X)</div>
                <div class="shortcut-key" onclick="sendShortcut('Ctrl', 'Z')">撤銷 (Ctrl+Z)</div>
                <div class="shortcut-key" onclick="sendShortcut('Ctrl', 'A')">全選 (Ctrl+A)</div>
                <div class="shortcut-key" onclick="sendShortcut('Alt', 'Tab')">切換窗口 (Alt+Tab)</div>
                <div class="shortcut-key" onclick="sendShortcut('Win', 'L')">鎖定電腦 (Win+L)</div>
                <div class="shortcut-key" onclick="sendShortcut('Ctrl', 'Shift', 'Esc')">任務(wù)管理器</div>
                <div class="shortcut-key" onclick="sendShortcut('Ctrl', 'Alt', 'Delete')">安全選項(xiàng)</div>
                <div class="shortcut-key" onclick="sendShortcut('Win', 'D')">顯示桌面 (Win+D)</div>
                <div class="shortcut-key" onclick="sendShortcut('Win', 'E')">文件資源管理器</div>
                <div class="shortcut-key" onclick="sendShortcut('Alt', 'F4')">關(guān)閉窗口</div>
            </div>
        </div>

        <div id="textInput" class="tab-content">
            <div class="text-input-section">
                <h3>文本輸入</h3>
                <textarea id="customText" placeholder="在這里輸入要發(fā)送的文本..."></textarea>
                <div class="button-group">
                    <button onclick="sendCustomText()">發(fā)送文本</button>
                    <button class="secondary" onclick="clearInput()">清空輸入</button>
                </div>
            </div>

            <div class="history-section">
                <h3>歷史記錄</h3>
                <div class="history-list" id="historyList">
                    <!-- 歷史記錄將通過JavaScript動(dòng)態(tài)添加 -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let ws = null;
    const keyboard = document.getElementById('keyboard');
    const status = document.getElementById('status');
    const historyList = document.getElementById('historyList');
    const shiftKey = document.getElementById('shiftKey');
    const capsKey = document.getElementById('capsKey');
    const MAX_HISTORY = 10;
    
    let isShiftActive = false;
    let isCapsActive = false;
    let currentKeyboardCase = 'lower';
    let heldKeys = {
        Ctrl: false,
        Alt: false,
        Win: false
    };

    // 從localStorage加載歷史記錄
    let inputHistory = JSON.parse(localStorage.getItem('inputHistory') || '[]');

    // 鍵盤布局 - 小寫
    const lowerKeys = [
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';'],
        ['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/']
    ];

    // 鍵盤布局 - 大寫
    const upperKeys = [
        ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'],
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':'],
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?']
    ];

    // 生成鍵盤按鈕
    function generateKeyboard() {
        keyboard.innerHTML = '';
        const keys = currentKeyboardCase === 'lower' ? lowerKeys : upperKeys;
        
        keys.forEach(row => {
            const rowDiv = document.createElement('div');
            rowDiv.className = 'keyboard-row';
            
            row.forEach(key => {
                const button = document.createElement('button');
                button.className = 'key';
                button.textContent = key;
                
                button.addEventListener('click', () => sendKey(key));
                button.addEventListener('touchend', (e) => {
                    e.preventDefault();
                    sendKey(key);
                });
                
                rowDiv.appendChild(button);
            });
            
            keyboard.appendChild(rowDiv);
        });
    }

    // 切換Shift狀態(tài)
    function toggleShift() {
        isShiftActive = !isShiftActive;
        if (isShiftActive) {
            shiftKey.classList.add('active-shift');
            currentKeyboardCase = 'upper';
        } else {
            shiftKey.classList.remove('active-shift');
            if (!isCapsActive) {
                currentKeyboardCase = 'lower';
            }
        }
        generateKeyboard();
    }

    // 切換Caps Lock狀態(tài)
    function toggleCaps() {
        isCapsActive = !isCapsActive;
        if (isCapsActive) {
            capsKey.classList.add('active-caps');
            currentKeyboardCase = 'upper';
        } else {
            capsKey.classList.remove('active-caps');
            if (!isShiftActive) {
                currentKeyboardCase = 'lower';
            }
        }
        generateKeyboard();
    }

    // 發(fā)送特殊鍵狀態(tài)
    function sendSpecialKey(key) {
        if (ws && ws.readyState === WebSocket.OPEN) {
            heldKeys[key] = !heldKeys[key];
            ws.send(JSON.stringify({
                type: 'specialKey',
                key: key,
                state: heldKeys[key] ? 'down' : 'up'
            }));
        }
    }

    // 發(fā)送快捷鍵
    function sendShortcut(...keys) {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                type: 'shortcut',
                keys: keys
            }));
        }
    }

    // 連接WebSocket服務(wù)器
    function connect() {
        const protocol = location.protocol === 'https:' ? 'wss://' : 'ws://';
        ws = new WebSocket(protocol + location.host + '/ws');

        ws.onopen = () => {
            status.textContent = '已連接';
            status.style.background = '#c8e6c9';
        };

        ws.onclose = () => {
            status.textContent = '連接斷開，嘗試重新連接...';
            status.style.background = '#ffcdd2';
            setTimeout(connect, 3000);
        };
    }

    // 發(fā)送按鍵信息
    function sendKey(key) {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                type: 'keypress',
                key: key
            }));
        }
    }

    // 更新歷史記錄顯示
    function updateHistoryDisplay() {
        historyList.innerHTML = '';
        inputHistory.forEach((text, index) => {
            const historyItem = document.createElement('div');
            historyItem.className = 'history-item';

            const textSpan = document.createElement('span');
            textSpan.className = 'history-text';
            textSpan.textContent = text;

            const actions = document.createElement('div');
            actions.className = 'history-actions';

            const sendButton = document.createElement('button');
            sendButton.textContent = '發(fā)送';
            sendButton.onclick = () => resendHistoryText(text);

            const deleteButton = document.createElement('button');
            deleteButton.textContent = '刪除';
            deleteButton.className = 'delete';
            deleteButton.onclick = () => deleteHistoryItem(index);

            actions.appendChild(sendButton);
            actions.appendChild(deleteButton);

            historyItem.appendChild(textSpan);
            historyItem.appendChild(actions);
            historyList.appendChild(historyItem);
        });
    }

    // 添加到歷史記錄
    function addToHistory(text) {
        if (text && !inputHistory.includes(text)) {
            inputHistory.unshift(text);
            if (inputHistory.length > MAX_HISTORY) {
                inputHistory.pop();
            }
            localStorage.setItem('inputHistory', JSON.stringify(inputHistory));
            updateHistoryDisplay();
        }
    }

    // 刪除歷史記錄項(xiàng)
    function deleteHistoryItem(index) {
        inputHistory.splice(index, 1);
        localStorage.setItem('inputHistory', JSON.stringify(inputHistory));
        updateHistoryDisplay();
    }

    // 重新發(fā)送歷史記錄中的文本
    function resendHistoryText(text) {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                type: 'text',
                content: text
            }));
        }
    }

    // 發(fā)送自定義文本
    function sendCustomText() {
        const textarea = document.getElementById('customText');
        const text = textarea.value;

        if (text && ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                type: 'text',
                content: text
            }));
            addToHistory(text);
            textarea.value = ''; // 清空輸入框
        }
    }

    // 清空輸入框
    function clearInput() {
        document.getElementById('customText').value = '';
    }

    // 切換標(biāo)簽頁
    function openTab(tabName) {
        const tabContents = document.getElementsByClassName('tab-content');
        for (let i = 0; i < tabContents.length; i++) {
            tabContents[i].classList.remove('active');
        }

        const tabButtons = document.getElementsByClassName('tab-button');
        for (let i = 0; i < tabButtons.length; i++) {
            tabButtons[i].classList.remove('active');
        }

        document.getElementById(tabName).classList.add('active');
        event.currentTarget.classList.add('active');
    }

    // 初始化
    connect();
    generateKeyboard();
    updateHistoryDisplay();
</script>
</body>
</html>
'''

async def websocket_handler(request):
    ws = web.WebSocketResponse()
    await ws.prepare(request)

    try:
        async for msg in ws:
            if msg.type == web.WSMsgType.TEXT:
                data = json.loads(msg.data)

                if data['type'] == 'keypress':
                    key = data['key']
                    if key == 'Space':
                        pyautogui.press('space')
                    elif key == 'Backspace':
                        pyautogui.press('backspace')
                    elif key == 'Enter':
                        pyautogui.press('enter')
                    else:
                        pyautogui.press(key)

                elif data['type'] == 'text':
                    # 使用剪貼板來處理文本輸入
                    text = data['content']
                    original_clipboard = pyperclip.paste()  # 保存原始剪貼板內(nèi)容

                    try:
                        pyperclip.copy(text)  # 復(fù)制新文本到剪貼板
                        pyautogui.hotkey('ctrl', 'v')  # 模擬粘貼操作
                    finally:
                        # 恢復(fù)原始剪貼板內(nèi)容
                        pyperclip.copy(original_clipboard)

                elif data['type'] == 'specialKey':
                    key = data['key']
                    state = data['state']
                    if key in ['Ctrl', 'Alt', 'Win']:
                        if state == 'down':
                            pyautogui.keyDown(key.lower())
                        else:
                            pyautogui.keyUp(key.lower())

                elif data['type'] == 'shortcut':
                    keys = data['keys']
                    # 處理特殊鍵名映射
                    key_combos = []
                    for key in keys:
                        if key.lower() == 'win':
                            key_combos.append('win')
                        elif key.lower() == 'delete':
                            key_combos.append('del')
                        else:
                            key_combos.append(key.lower())
                    
                    # 釋放所有可能被按住的鍵
                    pyautogui.keyUp('ctrl')
                    pyautogui.keyUp('alt')
                    pyautogui.keyUp('win')
                    
                    # 執(zhí)行快捷鍵
                    if len(key_combos) == 2:
                        pyautogui.hotkey(key_combos[0], key_combos[1])
                    elif len(key_combos) == 3:
                        pyautogui.hotkey(key_combos[0], key_combos[1], key_combos[2])

    except Exception as e:
        print(f"WebSocket error: {e}")
    finally:
        # 確保釋放所有按鍵
        pyautogui.keyUp('ctrl')
        pyautogui.keyUp('alt')
        pyautogui.keyUp('win')
        return ws

async def index_handler(request):
    return web.Response(text=html, content_type='text/html')

def get_local_ip():
    import socket
    try:
        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        s.connect(('8.8.8.8', 80))
        ip = s.getsockname()[0]
        s.close()
        return ip
    except:
        return '127.0.0.1'

async def init_app():
    app = web.Application()
    app.router.add_get('/', index_handler)
    app.router.add_get('/ws', websocket_handler)
    return app

if __name__ == '__main__':
    ip = get_local_ip()
    port = 8080

    print(f"正在啟動(dòng)服務(wù)器...")
    print(f"請(qǐng)?jiān)谑謾C(jī)瀏覽器訪問: http://{ip}:{port}")

    app = init_app()
    web.run_app(app, host='0.0.0.0', port=port)

# 安裝依賴
pip install aiohttp pyautogui pyperclip

# 啟動(dòng)服務(wù)（默認(rèn)8080端口）
python keyboard_server.py

FROM python:3.9-slim
COPY . /app
RUN pip install -r /app/requirements.txt
EXPOSE 8080
CMD ["python", "/app/keyboard_server.py"]