166 lines
No EOL
5.3 KiB
Markdown
166 lines
No EOL
5.3 KiB
Markdown
# 📊 Система отображения событий Flutter WebView Bridge
|
||
|
||
## ✅ Добавлено в оба приложения
|
||
|
||
### 🎯 Цель
|
||
Отображение всех отправленных и полученных payload'ов в реальном времени для демонстрации bridge коммуникации.
|
||
|
||
---
|
||
|
||
## 📱 Host App (Flutter Mobile)
|
||
|
||
### 🔧 Добавленные компоненты:
|
||
|
||
#### 1. **Список событий**
|
||
```dart
|
||
final List<Map<String, dynamic>> _events = [];
|
||
static const int _maxEvents = 10;
|
||
```
|
||
|
||
#### 2. **Callback для входящих payload'ов**
|
||
```dart
|
||
_bridgeController.onPayloadReceived = (payload) {
|
||
_addEvent('Received', payload.runtimeType.toString(), payload.toString());
|
||
};
|
||
```
|
||
|
||
#### 3. **Метод добавления событий**
|
||
```dart
|
||
void _addEvent(String type, String payloadType, String details) {
|
||
setState(() {
|
||
_events.insert(0, {
|
||
'timestamp': DateTime.now(),
|
||
'type': type,
|
||
'payloadType': payloadType,
|
||
'details': details,
|
||
});
|
||
|
||
if (_events.length > _maxEvents) {
|
||
_events.removeRange(_maxEvents, _events.length);
|
||
}
|
||
});
|
||
}
|
||
```
|
||
|
||
#### 4. **UI панель событий**
|
||
- Компактная панель высотой 120px
|
||
- Отображение времени, типа и названия payload
|
||
- Цветовая индикация: зеленый (получено) / синий (отправлено)
|
||
- Кнопка "Clear" для очистки списка
|
||
|
||
---
|
||
|
||
## 🌐 Web App (Flutter Web)
|
||
|
||
### 🔧 Добавленные компоненты:
|
||
|
||
#### 1. **Список событий**
|
||
```dart
|
||
final List<Map<String, dynamic>> _events = [];
|
||
static const int _maxEvents = 10;
|
||
```
|
||
|
||
#### 2. **Callback для входящих payload'ов**
|
||
```dart
|
||
_webBridge.onPayloadReceived = (payload) {
|
||
_addEvent('Received', payload.runtimeType.toString(), payload.toString());
|
||
};
|
||
```
|
||
|
||
#### 3. **Метод добавления событий**
|
||
```dart
|
||
void _addEvent(String type, String payloadType, String details) {
|
||
setState(() {
|
||
_events.insert(0, {
|
||
'timestamp': DateTime.now(),
|
||
'type': type,
|
||
'payloadType': payloadType,
|
||
'details': details,
|
||
});
|
||
|
||
if (_events.length > _maxEvents) {
|
||
_events.removeRange(_maxEvents, _events.length);
|
||
}
|
||
});
|
||
}
|
||
```
|
||
|
||
#### 4. **UI панель событий**
|
||
- Card с заголовком "Recent Events"
|
||
- Список высотой 100px
|
||
- Отображение времени, типа и названия payload
|
||
- Цветовая индикация: зеленый (получено) / синий (отправлено)
|
||
- Кнопка "Clear" для очистки списка
|
||
|
||
---
|
||
|
||
## 🔄 Обновленные Bridge компоненты
|
||
|
||
### 📱 BridgeWebViewController (Host)
|
||
```dart
|
||
// Добавлен callback
|
||
Function(BridgePayload)? onPayloadReceived;
|
||
|
||
// Обновлен метод handleWebMessage
|
||
onPayloadReceived?.call(payload);
|
||
```
|
||
|
||
### 🌐 WebBridge (Web)
|
||
```dart
|
||
// Добавлен callback
|
||
Function(BridgePayload)? onPayloadReceived;
|
||
|
||
// Обновлен метод _handleHostMessage
|
||
onPayloadReceived?.call(payload);
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 Демонстрируемые возможности
|
||
|
||
### ✅ Отправленные события (Sent):
|
||
- **Host → Web**: PingPayload, ShowNativeDialogPayload, SecretAdminCommandPayload
|
||
- **Web → Host**: PingPayload, GetUserInfoPayload, LoginRequestPayload, SubmitQuizPayload
|
||
|
||
### ✅ Полученные события (Received):
|
||
- **Host ← Web**: Все ответы от web приложения
|
||
- **Web ← Host**: Все ответы от host приложения
|
||
|
||
### ✅ Визуальные индикаторы:
|
||
- 🟢 **Зеленый**: Полученные payload'ы (иконка download)
|
||
- 🔵 **Синий**: Отправленные payload'ы (иконка upload)
|
||
- ⏰ **Время**: Точное время отправки/получения
|
||
- 📝 **Тип**: Название класса payload'а
|
||
|
||
---
|
||
|
||
## 🚀 Как использовать
|
||
|
||
### 1. **Запустите оба приложения**
|
||
- Host app на телефоне
|
||
- Web app на ноутбуке
|
||
|
||
### 2. **Отправьте payload'ы**
|
||
- Нажмите кнопки в host app (Send Ping, Show Dialog, Admin Command)
|
||
- Нажмите кнопки в web app (Send Ping, Request User Info, Login, Quiz)
|
||
|
||
### 3. **Наблюдайте события**
|
||
- В host app: панель событий под панелью управления
|
||
- В web app: карточка событий перед footer
|
||
|
||
### 4. **Проверьте коммуникацию**
|
||
- Убедитесь, что события появляются в обоих приложениях
|
||
- Проверьте правильность типов payload'ов
|
||
- Убедитесь в корректности времени
|
||
|
||
---
|
||
|
||
## 🎉 Результат
|
||
|
||
**Теперь вы можете видеть все ping'и и другие payload'ы в реальном времени!**
|
||
|
||
- ✅ Полный цикл коммуникации видим
|
||
- ✅ Типы payload'ов отображаются
|
||
- ✅ Время отправки/получения фиксируется
|
||
- ✅ Изоляция payload'ов демонстрируется
|
||
- ✅ Bridge система работает стабильно |