4 changed files with 633 additions and 6 deletions
-
308src/app/[lang]/test-webview/page.tsx
-
133src/components/ui/report-actions-sheet.tsx
-
195src/hooks/useFlutterBridge.ts
-
3src/types/window.d.ts
@ -0,0 +1,308 @@ |
|||||
|
"use client"; |
||||
|
|
||||
|
import { useState, useEffect } from "react"; |
||||
|
import { useFlutterBridge } from "@/hooks/useFlutterBridge"; |
||||
|
import Button from "@/components/ui/button"; |
||||
|
|
||||
|
export default function TestWebViewPage() { |
||||
|
const { sendToFlutter, logs, lastEvent, events, isReady } = useFlutterBridge({ |
||||
|
enableLogging: true, |
||||
|
}); |
||||
|
|
||||
|
const [config, setConfig] = useState<any>(null); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
// شناسایی INITIAL_CONFIG
|
||||
|
const initialConfig = events.find((e) => e.type === "INITIAL_CONFIG"); |
||||
|
if (initialConfig) { |
||||
|
setConfig(initialConfig.payload); |
||||
|
} |
||||
|
}, [events]); |
||||
|
|
||||
|
// تابع تست برای شبیهسازی ایونتهای Flutter
|
||||
|
const simulateFlutterEvent = (type: string, payload: any) => { |
||||
|
window.dispatchEvent( |
||||
|
new CustomEvent("flutterEvent", { |
||||
|
detail: { type, payload, timestamp: Date.now() }, |
||||
|
}) |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div className="min-h-screen bg-gray-50 p-4"> |
||||
|
<div className="max-w-4xl mx-auto"> |
||||
|
{/* Header */} |
||||
|
<div className="bg-white rounded-lg shadow-md p-6 mb-4"> |
||||
|
<h1 className="text-2xl font-bold text-gray-800 mb-2"> |
||||
|
🧪 Flutter WebView Bridge Test |
||||
|
</h1> |
||||
|
<div className="flex items-center gap-3"> |
||||
|
<div |
||||
|
className={`w-3 h-3 rounded-full ${isReady ? "bg-green-500 animate-pulse" : "bg-red-500"}`} |
||||
|
/> |
||||
|
<span className="text-sm text-gray-600"> |
||||
|
{isReady ? "✅ Bridge Ready" : "⏳ Waiting for Flutter..."} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> |
||||
|
{/* کارت 1: ارسال ایونتها */} |
||||
|
<div className="bg-white rounded-lg shadow-md p-6"> |
||||
|
<h2 className="text-lg font-bold text-gray-800 mb-4"> |
||||
|
📤 ارسال به Flutter |
||||
|
</h2> |
||||
|
<div className="space-y-2"> |
||||
|
<Button |
||||
|
onClick={() => |
||||
|
sendToFlutter("WEB_READY", { |
||||
|
timestamp: Date.now(), |
||||
|
url: window.location.href, |
||||
|
}) |
||||
|
} |
||||
|
> |
||||
|
🚀 WEB_READY |
||||
|
</Button> |
||||
|
<Button onClick={() => sendToFlutter("REQUEST_LOCATION")}> |
||||
|
📍 REQUEST_LOCATION |
||||
|
</Button> |
||||
|
<Button |
||||
|
onClick={() => |
||||
|
sendToFlutter("REQUEST_CONSULTANT", { |
||||
|
consultant: "habib@gmail.com", |
||||
|
}) |
||||
|
} |
||||
|
> |
||||
|
👨⚕️ REQUEST_CONSULTANT |
||||
|
</Button> |
||||
|
<Button |
||||
|
onClick={() => |
||||
|
sendToFlutter("PAGE_LOADED", { |
||||
|
page: window.location.pathname, |
||||
|
}) |
||||
|
} |
||||
|
> |
||||
|
📄 PAGE_LOADED |
||||
|
</Button> |
||||
|
<Button |
||||
|
onClick={() => |
||||
|
sendToFlutter("ERROR_OCCURRED", { |
||||
|
message: "Test error", |
||||
|
code: "TEST_ERROR", |
||||
|
}) |
||||
|
} |
||||
|
> |
||||
|
❌ ERROR_OCCURRED |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* کارت 2: شبیهسازی ایونتهای Flutter */} |
||||
|
<div className="bg-white rounded-lg shadow-md p-6"> |
||||
|
<h2 className="text-lg font-bold text-gray-800 mb-4"> |
||||
|
📥 شبیهسازی Flutter |
||||
|
</h2> |
||||
|
<p className="text-xs text-gray-600 mb-3"> |
||||
|
برای تست بدون Flutter از این دکمهها استفاده کنید |
||||
|
</p> |
||||
|
<div className="space-y-2"> |
||||
|
<button |
||||
|
onClick={() => |
||||
|
simulateFlutterEvent("INITIAL_CONFIG", { |
||||
|
version: "1.0.0", |
||||
|
layout: { |
||||
|
breakpoint: "mobile", |
||||
|
screenWidth: 375, |
||||
|
screenHeight: 812, |
||||
|
isMobile: true, |
||||
|
}, |
||||
|
safeArea: { top: 44, bottom: 34, left: 0, right: 0 }, |
||||
|
platform: { os: "ios", version: "17.2" }, |
||||
|
locale: { languageCode: "fa", isRtl: true }, |
||||
|
}) |
||||
|
} |
||||
|
className="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm py-2 px-4 rounded-lg transition" |
||||
|
> |
||||
|
🔧 INITIAL_CONFIG |
||||
|
</button> |
||||
|
<button |
||||
|
onClick={() => |
||||
|
simulateFlutterEvent("KEYBOARD_CHANGED", { |
||||
|
visible: true, |
||||
|
height: 336, |
||||
|
animationDuration: 250, |
||||
|
}) |
||||
|
} |
||||
|
className="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm py-2 px-4 rounded-lg transition" |
||||
|
> |
||||
|
⌨️ KEYBOARD_CHANGED |
||||
|
</button> |
||||
|
<button |
||||
|
onClick={() => |
||||
|
simulateFlutterEvent("ORIENTATION_CHANGED", { |
||||
|
orientation: "landscape", |
||||
|
screenWidth: 812, |
||||
|
screenHeight: 375, |
||||
|
}) |
||||
|
} |
||||
|
className="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm py-2 px-4 rounded-lg transition" |
||||
|
> |
||||
|
📱 ORIENTATION_CHANGED |
||||
|
</button> |
||||
|
<button |
||||
|
onClick={() => |
||||
|
simulateFlutterEvent("SAFE_AREA_CHANGED", { |
||||
|
top: 0, |
||||
|
bottom: 0, |
||||
|
left: 0, |
||||
|
right: 0, |
||||
|
}) |
||||
|
} |
||||
|
className="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm py-2 px-4 rounded-lg transition" |
||||
|
> |
||||
|
🔒 SAFE_AREA_CHANGED |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* کارت 3: آخرین ایونت */} |
||||
|
{lastEvent && ( |
||||
|
<div className="bg-green-50 rounded-lg shadow-md p-6 border-2 border-green-200"> |
||||
|
<h2 className="text-lg font-bold text-green-800 mb-4"> |
||||
|
📥 آخرین ایونت دریافتی |
||||
|
</h2> |
||||
|
<div className="bg-white p-3 rounded border border-green-300"> |
||||
|
<div className="font-mono text-xs"> |
||||
|
<div className="text-green-600 font-bold mb-2"> |
||||
|
Type: {lastEvent.type} |
||||
|
</div> |
||||
|
<div className="text-gray-600"> |
||||
|
<pre className="whitespace-pre-wrap break-all"> |
||||
|
{JSON.stringify(lastEvent.payload, null, 2)} |
||||
|
</pre> |
||||
|
</div> |
||||
|
<div className="text-gray-400 mt-2 text-[10px]"> |
||||
|
{new Date(lastEvent.timestamp || Date.now()).toLocaleString( |
||||
|
"fa-IR" |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* کارت 4: Config دریافتی */} |
||||
|
{config && ( |
||||
|
<div className="bg-purple-50 rounded-lg shadow-md p-6 border-2 border-purple-200"> |
||||
|
<h2 className="text-lg font-bold text-purple-800 mb-4"> |
||||
|
⚙️ Initial Config |
||||
|
</h2> |
||||
|
<div className="bg-white p-3 rounded border border-purple-300 max-h-[400px] overflow-auto"> |
||||
|
<pre className="font-mono text-xs text-gray-600 whitespace-pre-wrap break-all"> |
||||
|
{JSON.stringify(config, null, 2)} |
||||
|
</pre> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
|
||||
|
{/* لاگها */} |
||||
|
<div className="bg-white rounded-lg shadow-md p-6 mt-4"> |
||||
|
<div className="flex items-center justify-between mb-4"> |
||||
|
<h2 className="text-lg font-bold text-gray-800"> |
||||
|
📋 لاگها ({logs.length}) |
||||
|
</h2> |
||||
|
<button |
||||
|
onClick={() => { |
||||
|
const logsText = logs.join("\n"); |
||||
|
navigator.clipboard.writeText(logsText); |
||||
|
alert("لاگها کپی شدند!"); |
||||
|
}} |
||||
|
className="text-sm text-blue-600 hover:text-blue-800" |
||||
|
> |
||||
|
📋 کپی |
||||
|
</button> |
||||
|
</div> |
||||
|
<div className="bg-gray-50 rounded border border-gray-200 p-3 max-h-[400px] overflow-auto"> |
||||
|
{logs.length === 0 ? ( |
||||
|
<p className="text-sm text-gray-500 text-center py-4"> |
||||
|
هنوز لاگی ثبت نشده است |
||||
|
</p> |
||||
|
) : ( |
||||
|
<div className="space-y-1"> |
||||
|
{logs.map((log, index) => ( |
||||
|
<div |
||||
|
key={index} |
||||
|
className={`font-mono text-xs p-2 rounded ${ |
||||
|
log.includes("[ERROR]") |
||||
|
? "bg-red-100 text-red-800" |
||||
|
: log.includes("[SUCCESS]") |
||||
|
? "bg-green-100 text-green-800" |
||||
|
: "bg-white text-gray-700" |
||||
|
}`}
|
||||
|
> |
||||
|
{log} |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* راهنما */} |
||||
|
<div className="bg-blue-50 rounded-lg shadow-md p-6 mt-4 border-2 border-blue-200"> |
||||
|
<h2 className="text-lg font-bold text-blue-800 mb-4">💡 راهنما</h2> |
||||
|
<div className="space-y-2 text-sm text-blue-900"> |
||||
|
<p className="font-semibold">🎯 نحوه تست:</p> |
||||
|
<ol className="list-decimal list-inside space-y-1 mr-2"> |
||||
|
<li>اگر در Flutter هستید، صفحه را load کنید</li> |
||||
|
<li> |
||||
|
Flutter باید INITIAL_CONFIG بفرستد (اگر نفرستاد، از دکمه |
||||
|
شبیهسازی استفاده کنید) |
||||
|
</li> |
||||
|
<li>دکمه WEB_READY را بزنید تا به Flutter اطلاع دهید</li> |
||||
|
<li>سایر دکمهها را تست کنید</li> |
||||
|
<li>لاگها را در Console و در این صفحه مشاهده کنید</li> |
||||
|
</ol> |
||||
|
<p className="font-semibold mt-4">🔧 بدون Flutter:</p> |
||||
|
<p> |
||||
|
از دکمههای "شبیهسازی Flutter" استفاده کنید تا ببینید WebView چگونه |
||||
|
react میکند |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* تمام ایونتها */} |
||||
|
{events.length > 0 && ( |
||||
|
<div className="bg-white rounded-lg shadow-md p-6 mt-4"> |
||||
|
<h2 className="text-lg font-bold text-gray-800 mb-4"> |
||||
|
📜 تاریخچه ایونتها ({events.length}) |
||||
|
</h2> |
||||
|
<div className="space-y-2 max-h-[300px] overflow-auto"> |
||||
|
{events.map((event, index) => ( |
||||
|
<div |
||||
|
key={index} |
||||
|
className="bg-gray-50 rounded border border-gray-200 p-3" |
||||
|
> |
||||
|
<div className="flex items-center justify-between mb-1"> |
||||
|
<span className="font-bold text-sm text-gray-800"> |
||||
|
{event.type} |
||||
|
</span> |
||||
|
<span className="text-xs text-gray-500"> |
||||
|
{new Date(event.timestamp || Date.now()).toLocaleTimeString( |
||||
|
"fa-IR" |
||||
|
)} |
||||
|
</span> |
||||
|
</div> |
||||
|
<pre className="font-mono text-xs text-gray-600 whitespace-pre-wrap break-all"> |
||||
|
{JSON.stringify(event.payload, null, 2)} |
||||
|
</pre> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,195 @@ |
|||||
|
/** |
||||
|
* Hook برای ارتباط دو طرفه با Flutter WebView |
||||
|
* دریافت و ارسال ایونتها |
||||
|
*/ |
||||
|
|
||||
|
import { useEffect, useRef, useState } from 'react'; |
||||
|
|
||||
|
// تایپهای ایونتهای دریافتی از Flutter
|
||||
|
export type FlutterEventType = |
||||
|
| 'LAYOUT_CHANGED' |
||||
|
| 'KEYBOARD_CHANGED' |
||||
|
| 'SAFE_AREA_CHANGED' |
||||
|
| 'ORIENTATION_CHANGED' |
||||
|
| 'SCREEN_SIZE_CHANGED' |
||||
|
| 'INITIAL_CONFIG'; |
||||
|
|
||||
|
export interface FlutterEvent { |
||||
|
type: FlutterEventType; |
||||
|
payload: any; |
||||
|
timestamp?: number; |
||||
|
} |
||||
|
|
||||
|
// تایپهای ایونتهای ارسالی به Flutter
|
||||
|
export type WebEventType = |
||||
|
| 'WEB_READY' |
||||
|
| 'REQUEST_LOCATION' |
||||
|
| 'REQUEST_CONSULTANT' |
||||
|
| 'PAGE_LOADED' |
||||
|
| 'ERROR_OCCURRED'; |
||||
|
|
||||
|
export interface WebEvent { |
||||
|
type: WebEventType; |
||||
|
payload?: any; |
||||
|
timestamp: number; |
||||
|
} |
||||
|
|
||||
|
interface UseFlutterBridgeOptions { |
||||
|
onEvent?: (event: FlutterEvent) => void; |
||||
|
enableLogging?: boolean; |
||||
|
} |
||||
|
|
||||
|
interface UseFlutterBridgeReturn { |
||||
|
// دریافت ایونتها
|
||||
|
events: FlutterEvent[]; |
||||
|
lastEvent: FlutterEvent | null; |
||||
|
|
||||
|
// ارسال ایونتها
|
||||
|
sendToFlutter: (type: WebEventType, payload?: any) => void; |
||||
|
|
||||
|
// آماده بودن
|
||||
|
isReady: boolean; |
||||
|
|
||||
|
// لاگها
|
||||
|
logs: string[]; |
||||
|
} |
||||
|
|
||||
|
export function useFlutterBridge( |
||||
|
options: UseFlutterBridgeOptions = {} |
||||
|
): UseFlutterBridgeReturn { |
||||
|
const { onEvent, enableLogging = true } = options; |
||||
|
|
||||
|
const [events, setEvents] = useState<FlutterEvent[]>([]); |
||||
|
const [lastEvent, setLastEvent] = useState<FlutterEvent | null>(null); |
||||
|
const [isReady, setIsReady] = useState(false); |
||||
|
const [logs, setLogs] = useState<string[]>([]); |
||||
|
|
||||
|
const logsRef = useRef<string[]>([]); |
||||
|
|
||||
|
// تابع کمکی برای اضافه کردن لاگ
|
||||
|
const addLog = (message: string, type: 'info' | 'success' | 'error' = 'info') => { |
||||
|
const timestamp = new Date().toLocaleTimeString('fa-IR'); |
||||
|
const logMessage = `[${timestamp}] [${type.toUpperCase()}] ${message}`; |
||||
|
|
||||
|
if (enableLogging) { |
||||
|
console.log(logMessage); |
||||
|
} |
||||
|
|
||||
|
logsRef.current = [...logsRef.current, logMessage].slice(-50); // نگه داشتن 50 لاگ آخر
|
||||
|
setLogs(logsRef.current); |
||||
|
}; |
||||
|
|
||||
|
// تابع ارسال ایونت به Flutter
|
||||
|
const sendToFlutter = (type: WebEventType, payload?: any) => { |
||||
|
const event: WebEvent = { |
||||
|
type, |
||||
|
payload, |
||||
|
timestamp: Date.now(), |
||||
|
}; |
||||
|
|
||||
|
try { |
||||
|
// روش 1: postMessage (استاندارد)
|
||||
|
if (window.parent && window.parent !== window) { |
||||
|
window.parent.postMessage(event, '*'); |
||||
|
addLog(`📤 ارسال به Flutter: ${type}`, 'success'); |
||||
|
} |
||||
|
|
||||
|
// روش 2: Flutter WebView interface (Android)
|
||||
|
if ((window as any).FlutterChannel) { |
||||
|
(window as any).FlutterChannel.postMessage(JSON.stringify(event)); |
||||
|
addLog(`📤 ارسال به Flutter (Android): ${type}`, 'success'); |
||||
|
} |
||||
|
|
||||
|
// روش 3: iOS WebKit message handler
|
||||
|
if ((window as any).webkit?.messageHandlers?.FlutterChannel) { |
||||
|
(window as any).webkit.messageHandlers.FlutterChannel.postMessage(event); |
||||
|
addLog(`📤 ارسال به Flutter (iOS): ${type}`, 'success'); |
||||
|
} |
||||
|
|
||||
|
// اگر هیچ کدام موجود نبود
|
||||
|
if ( |
||||
|
(!window.parent || window.parent === window) && |
||||
|
!(window as any).FlutterChannel && |
||||
|
!(window as any).webkit?.messageHandlers?.FlutterChannel |
||||
|
) { |
||||
|
addLog(`⚠️ محیط Flutter یافت نشد - در حالت توسعه`, 'info'); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
addLog(`❌ خطا در ارسال به Flutter: ${error}`, 'error'); |
||||
|
console.error('Error sending to Flutter:', error); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// Listen کردن به ایونتهای Flutter
|
||||
|
useEffect(() => { |
||||
|
addLog('🚀 شروع listening به ایونتهای Flutter', 'info'); |
||||
|
|
||||
|
const handleFlutterEvent = (event: MessageEvent) => { |
||||
|
try { |
||||
|
const data = typeof event.data === 'string' |
||||
|
? JSON.parse(event.data) |
||||
|
: event.data; |
||||
|
|
||||
|
// چک کردن اینکه ایونت از Flutter است
|
||||
|
if (data && data.type) { |
||||
|
const flutterEvent: FlutterEvent = { |
||||
|
type: data.type, |
||||
|
payload: data.payload, |
||||
|
timestamp: data.timestamp || Date.now(), |
||||
|
}; |
||||
|
|
||||
|
addLog(`📥 دریافت از Flutter: ${data.type}`, 'success'); |
||||
|
|
||||
|
setEvents((prev) => [...prev, flutterEvent].slice(-20)); // نگه داشتن 20 ایونت آخر
|
||||
|
setLastEvent(flutterEvent); |
||||
|
|
||||
|
// Handle INITIAL_CONFIG
|
||||
|
if (data.type === 'INITIAL_CONFIG') { |
||||
|
setIsReady(true); |
||||
|
addLog('✅ WebView آماده شد', 'success'); |
||||
|
} |
||||
|
|
||||
|
// Callback
|
||||
|
if (onEvent) { |
||||
|
onEvent(flutterEvent); |
||||
|
} |
||||
|
} |
||||
|
} catch (error) { |
||||
|
addLog(`❌ خطا در parse ایونت Flutter: ${error}`, 'error'); |
||||
|
console.error('Error parsing Flutter event:', error); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// Listen به message event
|
||||
|
window.addEventListener('message', handleFlutterEvent); |
||||
|
|
||||
|
// Listen به custom events
|
||||
|
const handleCustomEvent = (event: Event) => { |
||||
|
const customEvent = event as CustomEvent; |
||||
|
if (customEvent.detail) { |
||||
|
handleFlutterEvent({ |
||||
|
data: customEvent.detail, |
||||
|
} as MessageEvent); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
window.addEventListener('flutterConfig', handleCustomEvent as EventListener); |
||||
|
window.addEventListener('flutterEvent', handleCustomEvent as EventListener); |
||||
|
|
||||
|
// Cleanup
|
||||
|
return () => { |
||||
|
window.removeEventListener('message', handleFlutterEvent); |
||||
|
window.removeEventListener('flutterConfig', handleCustomEvent as EventListener); |
||||
|
window.removeEventListener('flutterEvent', handleCustomEvent as EventListener); |
||||
|
addLog('🛑 متوقف کردن listening', 'info'); |
||||
|
}; |
||||
|
}, [onEvent, enableLogging]); |
||||
|
|
||||
|
return { |
||||
|
events, |
||||
|
lastEvent, |
||||
|
sendToFlutter, |
||||
|
isReady, |
||||
|
logs, |
||||
|
}; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue