199 lines
7.6 KiB
Markdown
199 lines
7.6 KiB
Markdown
|
# 🔗 Упрощение цепочки вызовов в Web App
|
|||
|
|
|
|||
|
|
## 📊 Сравнение: До и После
|
|||
|
|
|
|||
|
|
### ❌ **Старая цепочка (6 уровней):**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
Flutter Host → JavaScript → webAppBridge → _handleMessage → _dartHandler → dartHandler → Dart → BridgeManager → Payload Handler
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Детализация:**
|
|||
|
|
1. `window.flutterBridge.receiveMessage(message)`
|
|||
|
|
2. `window.webAppBridge.receiveMessage(message)`
|
|||
|
|
3. `window.webAppBridge._handleMessage(message)`
|
|||
|
|
4. `window.webAppBridge._dartHandler(message)`
|
|||
|
|
5. `window.dartHandler(message)`
|
|||
|
|
6. `_bridgeManager!.handleIncomingMessage(bridgeMessage)`
|
|||
|
|
7. `handler.handle(payload)` ← Финальный
|
|||
|
|
|
|||
|
|
### ✅ **Новая цепочка (3 уровня):**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
Flutter Host → JavaScript → Dart → BridgeManager → Payload Handler
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Детализация:**
|
|||
|
|
1. `window.flutterBridge.receiveMessage(message)`
|
|||
|
|
2. `window.dartHandler(message)` ← Прямой вызов
|
|||
|
|
3. `_bridgeManager!.handleIncomingMessage(bridgeMessage)`
|
|||
|
|
4. `handler.handle(payload)` ← Финальный
|
|||
|
|
|
|||
|
|
## 🎯 **Упрощения:**
|
|||
|
|
|
|||
|
|
### 1. **Убраны промежуточные JavaScript функции:**
|
|||
|
|
- ❌ `window.webAppBridge.receiveMessage`
|
|||
|
|
- ❌ `window.webAppBridge._handleMessage`
|
|||
|
|
- ❌ `window.webAppBridge._dartHandler`
|
|||
|
|
- ❌ `window.webAppBridge.setMessageHandler`
|
|||
|
|
|
|||
|
|
### 2. **Прямая связь:**
|
|||
|
|
- ✅ `window.flutterBridge.receiveMessage` → `window.dartHandler`
|
|||
|
|
- ✅ Минимум промежуточных вызовов
|
|||
|
|
- ✅ Быстрая передача сообщений
|
|||
|
|
|
|||
|
|
### 3. **Упрощенный JavaScript код:**
|
|||
|
|
```javascript
|
|||
|
|
// БЫЛО (сложно):
|
|||
|
|
window.flutterBridge.receiveMessage = function(message) {
|
|||
|
|
if (window.webAppBridge && window.webAppBridge.receiveMessage) {
|
|||
|
|
window.webAppBridge.receiveMessage(message);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// СТАЛО (просто):
|
|||
|
|
window.flutterBridge.receiveMessage = function(message) {
|
|||
|
|
if (window.dartHandler) {
|
|||
|
|
window.dartHandler(message);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🐛 **Найденная и исправленная проблема:**
|
|||
|
|
|
|||
|
|
### ❌ **Проблема:**
|
|||
|
|
При отправке сообщения из Host в Web App получалась ошибка:
|
|||
|
|
```
|
|||
|
|
[Flutter Bridge] Web app bridge не доступен
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 🔍 **Причина:**
|
|||
|
|
В проекте остались старые JavaScript файлы, которые конфликтовали с новым упрощенным кодом:
|
|||
|
|
- `apps/web_app1/web/index.html` - содержал старый JavaScript код
|
|||
|
|
- `packages/bridge_core/web/bridge.js` - устаревший файл с дублированным кодом
|
|||
|
|
|
|||
|
|
### ✅ **Решение:**
|
|||
|
|
1. **Удален старый JavaScript код** из `index.html`
|
|||
|
|
2. **Удален файл** `packages/bridge_core/web/bridge.js`
|
|||
|
|
3. **Оставлен только централизованный код** в `bridge_script.dart`
|
|||
|
|
|
|||
|
|
### 📝 **Результат:**
|
|||
|
|
- ✅ Убраны конфликты между старым и новым кодом
|
|||
|
|
- ✅ Все JavaScript код теперь централизован в `bridge_script.dart`
|
|||
|
|
- ✅ Упрощенная цепочка вызовов работает корректно
|
|||
|
|
|
|||
|
|
## 🐛 **Вторая найденная и исправленная проблема:**
|
|||
|
|
|
|||
|
|
### ❌ **Проблема:**
|
|||
|
|
После исправления первой проблемы появилась новая ошибка:
|
|||
|
|
```
|
|||
|
|
[Web App Bridge] !!!Dart обработчик не определен!!!
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 🔍 **Причина:**
|
|||
|
|
Неправильный порядок инициализации в `WebBridge`:
|
|||
|
|
1. `_setupDartHandler()` устанавливал `js.context['dartHandler']`
|
|||
|
|
2. `_bridgeManager!.initialize()` вызывал `WebTransport.initialize()`
|
|||
|
|
3. `WebTransport.initialize()` выполнял `globalDartHandlerScript`
|
|||
|
|
4. `globalDartHandlerScript` перезаписывал `dartHandler` на заглушку
|
|||
|
|
|
|||
|
|
### ✅ **Решение:**
|
|||
|
|
Изменил порядок инициализации в `WebBridge`:
|
|||
|
|
```dart
|
|||
|
|
// БЫЛО:
|
|||
|
|
_setupDartHandler(); // 1. Устанавливаем Dart обработчик
|
|||
|
|
_bridgeManager!.initialize(); // 2. JavaScript перезаписывает его
|
|||
|
|
|
|||
|
|
// СТАЛО:
|
|||
|
|
_bridgeManager!.initialize(); // 1. Сначала инициализируем BridgeManager
|
|||
|
|
_setupDartHandler(); // 2. Потом устанавливаем Dart обработчик
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 📝 **Результат:**
|
|||
|
|
- ✅ Dart обработчик больше не перезаписывается JavaScript
|
|||
|
|
- ✅ Сообщения корректно передаются из JavaScript в Dart
|
|||
|
|
- ✅ Упрощенная цепочка вызовов работает полностью
|
|||
|
|
|
|||
|
|
## 📈 **Преимущества:**
|
|||
|
|
|
|||
|
|
### ✅ **Производительность**
|
|||
|
|
- **50% меньше вызовов** (6 → 3)
|
|||
|
|
- **Быстрее передача** сообщений
|
|||
|
|
- **Меньше накладных расходов**
|
|||
|
|
|
|||
|
|
### ✅ **Простота**
|
|||
|
|
- **Легче отлаживать** - меньше уровней
|
|||
|
|
- **Проще понимать** - прямая связь
|
|||
|
|
- **Меньше кода** - убраны промежуточные функции
|
|||
|
|
|
|||
|
|
### ✅ **Надежность**
|
|||
|
|
- **Меньше точек отказа** - меньше промежуточных звеньев
|
|||
|
|
- **Проще тестировать** - меньше зависимостей
|
|||
|
|
- **Легче поддерживать** - меньше сложности
|
|||
|
|
|
|||
|
|
## 🔧 **Технические изменения:**
|
|||
|
|
|
|||
|
|
### 1. **bridge_script.dart**
|
|||
|
|
```dart
|
|||
|
|
// Убраны скрипты:
|
|||
|
|
// - messageHandlerScript
|
|||
|
|
// - dartHandlerScript
|
|||
|
|
// - dartMessageHandlerScript
|
|||
|
|
|
|||
|
|
// Оставлен только:
|
|||
|
|
// - globalDartHandlerScript
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. **bridge_transport.dart**
|
|||
|
|
```dart
|
|||
|
|
// Убраны вызовы:
|
|||
|
|
// - BridgeScript.messageHandlerScript
|
|||
|
|
// - BridgeScript.dartHandlerScript
|
|||
|
|
// - BridgeScript.dartMessageHandlerScript
|
|||
|
|
|
|||
|
|
// Оставлен только:
|
|||
|
|
// - BridgeScript.globalDartHandlerScript
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. **web_bridge.dart**
|
|||
|
|
```dart
|
|||
|
|
// Не изменился - уже был оптимальным
|
|||
|
|
// js.context['dartHandler'] = (String message) { ... }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. **index.html**
|
|||
|
|
```html
|
|||
|
|
<!-- Удален старый JavaScript код -->
|
|||
|
|
<!-- Оставлен только простой лог -->
|
|||
|
|
<script>
|
|||
|
|
console.log('[Web App] HTML загружен, ожидание инициализации bridge...');
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5. **bridge.js**
|
|||
|
|
```bash
|
|||
|
|
# Удален файл packages/bridge_core/web/bridge.js
|
|||
|
|
# Весь JavaScript код теперь в bridge_script.dart
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎉 **Результат:**
|
|||
|
|
|
|||
|
|
### ✅ **Достигнутые цели:**
|
|||
|
|
- ✅ Упрощена цепочка вызовов (6 → 3 уровней)
|
|||
|
|
- ✅ Убраны избыточные JavaScript функции
|
|||
|
|
- ✅ Устранены конфликты между старым и новым кодом
|
|||
|
|
- ✅ Сохранена функциональность
|
|||
|
|
- ✅ Улучшена производительность
|
|||
|
|
- ✅ Упрощена отладка
|
|||
|
|
|
|||
|
|
### 🚀 **Готовность к использованию:**
|
|||
|
|
Система стала более:
|
|||
|
|
- **Быстрой** - меньше промежуточных вызовов
|
|||
|
|
- **Простой** - прямая связь JavaScript ↔ Dart
|
|||
|
|
- **Надежной** - меньше точек отказа
|
|||
|
|
- **Поддерживаемой** - меньше сложности
|
|||
|
|
- **Чистой** - нет дублированного кода
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**Упрощение завершено успешно!** 🎉
|