[wip] async support

congzhangzh · congzhangzh · commit 2fa4ae305166 · 2025-04-02T23:52:55.000+08:00
diff --git a/README.md b/README.md
@@ -150,11 +150,87 @@ webview.navigate(f"data:text/html,{quote(html)}")
 webview.run()
 ```
 
+### Async Python Functions with JavaScript:
+
+Webview Python supports binding asynchronous Python functions that can be called from JavaScript. This is useful for time-consuming operations that should not block the main thread.
+
+```python
+import asyncio
+from webview.webview import Webview, Size, SizeHint
+
+webview = Webview(debug=True)
+
+# Async Python function that can be called from JavaScript
+async def delayed_message(message, delay=1):
+    # Simulating a time-consuming operation
+    await asyncio.sleep(delay)
+    return f"Async response after {delay}s: {message}"
+
+# Async function with progress reporting
+async def process_with_progress(steps=5, step_time=1):
+    results = []
+    for i in range(1, steps + 1):
+        await asyncio.sleep(step_time)
+        # Report progress to JavaScript
+        progress = (i / steps) * 100
+        webview.eval(f"updateProgress({progress}, 'Processing: Step {i}/{steps}')")
+        results.append(f"Step {i} completed")
+    
+    return {
+        "status": "complete",
+        "steps": steps,
+        "results": results
+    }
+
+# Bind async Python functions
+webview.bind("delayedMessage", delayed_message)
+webview.bind("processWithProgress", process_with_progress)
+
+# HTML/JavaScript
+html = """
+<html>
+<head>
+    <script>
+        async function callAsyncPython() {
+            try {
+                document.getElementById('result').innerHTML = "Waiting for async response...";
+                const result = await delayedMessage("Hello from async world!", 2);
+                document.getElementById('result').innerHTML = result;
+            } catch (err) {
+                document.getElementById('result').innerHTML = `Error: ${err}`;
+            }
+        }
+        
+        function updateProgress(percent, message) {
+            document.getElementById('progress').style.width = percent + '%';
+            document.getElementById('progress-text').textContent = message;
+        }
+    </script>
+</head>
+<body>
+    <button onclick="callAsyncPython()">Call Async Python</button>
+    <div id="result"></div>
+    <div id="progress" style="background-color: #ddd; width: 100%">
+        <div id="progress-bar" style="height: 20px; background-color: #4CAF50; width: 0%"></div>
+    </div>
+    <div id="progress-text"></div>
+</body>
+</html>
+"""
+
+webview.navigate(f"data:text/html,{quote(html)}")
+webview.run()
+```
+
+For a more complete example, see [bind_in_local_async.py](examples/bind_in_local_async.py) and [bind_in_local_async.html](examples/bind_in_local_async.html) in the examples directory.
+
 ## Features
 
 - Create desktop applications using HTML, CSS, and JavaScript
 - Load local HTML files or remote URLs
 - Bidirectional Python-JavaScript communication
+- Support for async Python functions with JavaScript promises
+- Progress reporting for long-running tasks
 - Window size and title customization
 - Debug mode for development
 - Cross-platform support (Windows, macOS, Linux)
@@ -261,6 +337,7 @@ python -m build -n -w
 
 - [x] Publish to PyPI
 - [x] Setup GitHub Actions for CI/CD
+- [x] Add async function support 
 - [ ] Add preact example
 - [ ] Add three.js example
 - [ ] Add three.js fiber example
@@ -271,7 +348,11 @@ python -m build -n -w
 ## References
 
 - [Webview](https://github.com/webview/webview)
+- [webview C API IMPL](https://github.com/webview/webview/blob/master/core/include/webview/c_api_impl.hh)
+- [Webview C API](https://github.com/webview/webview/blob/master/src/webview.h)
 - [webview_deno](https://github.com/eliassjogreen/webview_deno)
+- [asyncio-guest](https://github.com/congzhangzh/asyncio-guest)
+- [asyncio-guest win32](https://github.com/congzhangzh/asyncio-guest/blob/master/asyncio_guest/asyncio_guest_win32.py)
 
 # License
 
diff --git a/examples/bind_in_local_async.html b/examples/bind_in_local_async.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Python-JavaScript 异步绑定演示</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 760px;
+            margin: 0 auto;
+        }
+        .demo-section {
+            margin-bottom: 30px;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background-color: #f9f9f9;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        h2 {
+            margin-top: 0;
+            color: #444;
+        }
+        .result {
+            margin-top: 15px;
+            padding: 15px;
+            background: #fff;
+            border: 1px solid #eee;
+            border-radius: 4px;
+            min-height: 50px;
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-right: 8px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        .error {
+            color: red;
+        }
+        .progress-bar {
+            width: 100%;
+            background-color: #e0e0e0;
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+        .progress {
+            height: 20px;
+            background-color: #4CAF50;
+            border-radius: 4px;
+            width: 0%;
+            transition: width 0.3s;
+        }
+        .progress-label {
+            margin-top: 5px;
+            font-size: 14px;
+            color: #666;
+        }
+        pre {
+            background-color: #f5f5f5;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+    </style>
+    <script>
+        // 简单延迟响应测试
+        async function testDelayedResponse() {
+            const resultDiv = document.getElementById('delayed-result');
+            resultDiv.innerHTML = '请等待...';
+            
+            try {
+                const seconds = parseFloat(document.getElementById('delay-seconds').value) || 1;
+                const result = await delayedResponse(seconds);
+                resultDiv.innerHTML = result;
+            } catch (err) {
+                resultDiv.innerHTML = `<span class="error">错误: ${err}</span>`;
+            }
+        }
+        
+        // 进度报告测试
+        async function testProgress() {
+            const resultDiv = document.getElementById('progress-result');
+            const progressBar = document.getElementById('progress-bar');
+            const progressLabel = document.getElementById('progress-label');
+            
+            resultDiv.innerHTML = '任务执行中...';
+            progressBar.style.width = '0%';
+            progressLabel.textContent = '0%';
+            
+            try {
+                const steps = parseInt(document.getElementById('progress-steps').value) || 5;
+                const stepTime = parseFloat(document.getElementById('step-time').value) || 0.5;
+                
+                const result = await processWithProgress(steps, stepTime);
+                resultDiv.innerHTML = `<pre>${JSON.stringify(result, null, 2)}</pre>`;
+            } catch (err) {
+                resultDiv.innerHTML = `<span class="error">错误: ${err}</span>`;
+            }
+        }
+        
+        // 用于从Python更新进度条
+        function updateProgress(percent, message) {
+            const progressBar = document.getElementById('progress-bar');
+            const progressLabel = document.getElementById('progress-label');
+            
+            progressBar.style.width = `${percent}%`;
+            progressLabel.textContent = `${Math.round(percent)}% - ${message}`;
+        }
+        
+        // 模拟API请求测试
+        async function testFetchData() {
+            const resultDiv = document.getElementById('fetch-result');
+            resultDiv.innerHTML = '获取数据中...';
+            
+            try {
+                const delay = parseFloat(document.getElementById('fetch-delay').value) || 2;
+                const success = document.getElementById('fetch-success').checked;
+                
+                const result = await fetchData(delay, success);
+                resultDiv.innerHTML = `<pre>${JSON.stringify(result, null, 2)}</pre>`;
+            } catch (err) {
+                resultDiv.innerHTML = `<span class="error">错误: ${err}</span>`;
+            }
+        }
+    </script>
+</head>
+<body>
+    <div class="container">
+        <h1>Python-JavaScript 异步绑定演示</h1>
+        
+        <!-- 简单延迟响应 -->
+        <div class="demo-section">
+            <h2>简单延迟响应</h2>
+            <p>测试基本的异步函数，带有延迟响应</p>
+            
+            <div>
+                <label for="delay-seconds">延迟时间(秒): </label>
+                <input type="number" id="delay-seconds" min="0.1" step="0.1" value="1">
+            </div>
+            
+            <div style="margin-top: 10px;">
+                <button onclick="testDelayedResponse()">测试延迟响应</button>
+            </div>
+            
+            <div class="result" id="delayed-result">
+                结果将显示在这里
+            </div>
+        </div>
+        
+        <!-- 进度报告 -->
+        <div class="demo-section">
+            <h2>异步进度报告</h2>
+            <p>通过JavaScript回调函数报告异步操作的进度</p>
+            
+            <div>
+                <label for="progress-steps">步骤数: </label>
+                <input type="number" id="progress-steps" min="1" value="5">
+                
+                <label for="step-time" style="margin-left: 10px;">每步时间(秒): </label>
+                <input type="number" id="step-time" min="0.1" step="0.1" value="0.5">
+            </div>
+            
+            <div style="margin-top: 10px;">
+                <button onclick="testProgress()">开始任务</button>
+            </div>
+            
+            <div class="progress-bar">
+                <div class="progress" id="progress-bar"></div>
+            </div>
+            <div class="progress-label" id="progress-label">0%</div>
+            
+            <div class="result" id="progress-result">
+                结果将显示在这里
+            </div>
+        </div>
+        
+        <!-- 模拟API请求 -->
+        <div class="demo-section">
+            <h2>模拟异步API请求</h2>
+            <p>测试异步API请求和错误处理</p>
+            
+            <div>
+                <label for="fetch-delay">延迟时间(秒): </label>
+                <input type="number" id="fetch-delay" min="0.1" step="0.1" value="2">
+                
+                <label style="margin-left: 10px;">
+                    <input type="checkbox" id="fetch-success" checked> 请求成功
+                </label>
+            </div>
+            
+            <div style="margin-top: 10px;">
+                <button onclick="testFetchData()">获取数据</button>
+            </div>
+            
+            <div class="result" id="fetch-result">
+                结果将显示在这里
+            </div>
+        </div>
+    </div>
+</body>
+</html> 
diff --git a/examples/bind_in_local_async.py b/examples/bind_in_local_async.py
@@ -0,0 +1,63 @@
+import os
+import asyncio
+from webview import Webview, SizeHint, Size
+
+# Create webview instance
+webview = Webview(debug=True)
+
+# 异步函数示例 - 简单延迟响应
+async def delayed_response(seconds=1):
+    await asyncio.sleep(seconds)
+    return f"异步响应完成，耗时 {seconds} 秒"
+
+# 异步函数示例 - 模拟进度报告
+async def process_with_progress(steps=5, step_time=1):
+    results = []
+    for i in range(1, steps + 1):
+        await asyncio.sleep(step_time)
+        # 通过JavaScript回调报告进度
+        progress = (i / steps) * 100
+        webview.eval(f"updateProgress({progress}, '处理中: 步骤 {i}/{steps}')")
+        results.append(f"步骤 {i} 完成")
+    
+    return {
+        "status": "完成",
+        "steps": steps,
+        "results": results
+    }
+
+# 异步函数示例 - 模拟API请求
+async def fetch_data(delay=2, success=True):
+    await asyncio.sleep(delay)
+    
+    if not success:
+        raise Exception("模拟的API请求失败")
+        
+    return {
+        "id": 123,
+        "name": "示例数据",
+        "timestamp": "2023-06-15T12:34:56Z",
+        "items": [
+            {"id": 1, "value": "项目 1"},
+            {"id": 2, "value": "项目 2"},
+            {"id": 3, "value": "项目 3"}
+        ]
+    }
+
+# Bind Python functions
+webview.bind("delayedResponse", delayed_response)
+webview.bind("processWithProgress", process_with_progress)
+webview.bind("fetchData", fetch_data)
+
+webview.title = "Python-JavaScript 异步绑定演示"
+webview.size = Size(800, 600, SizeHint.FIXED)
+
+# Get the absolute path to the HTML file
+current_dir = os.path.dirname(os.path.abspath(__file__))
+html_path = os.path.join(current_dir, 'bind_in_local_async.html')
+
+# Load the local HTML file
+webview.navigate(f"file://{html_path}")
+
+# Run the webview
+
diff --git a/src/webview/__init__.py b/src/webview/__init__.py
@@ -0,0 +1 @@
+from .webview import Webview, Size, SizeHint
diff --git a/src/webview/webview.py b/src/webview/webview.py

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+from .webview import Webview, Size, SizeHint`