Як отримати доступ до локального бекенду з зовнішнього Android-пристрою в React Native

Стрімінг API-відповідей від AI-моделей, таких як OpenAI або LLaMA, до користувацького інтерфейсу може значно покращити досвід користувача.

Ця стаття пояснює, як цього досягти за допомогою Web Streams API, який обробляє дані частинами по мірі їх надходження, замість того, щоб чекати на всю відповідь.

Ось покрокова інструкція з реалізації цієї функціональності.

Крок 1: Зрозуміти Web Streams API

Web Streams API дозволяє обробляти потоки даних поступово. Це ідеально підходить для додатків, які потребують оновлень в реальному часі, таких як чат-боти або сервіси живої транскрипції.

Крок 2: Налаштування бекенду для стрімінгу

Переконайтеся, що ваш бекенд підтримує стрімінгові відповіді. AI-моделі, такі як GPT від OpenAI, підтримують цю функціональність, дозволяючи вказати параметр stream у запитах API.

Приклад: Бекенд на Node.js для OpenAI API

Ось як налаштувати сервер на Node.js для стрімінгу даних з OpenAI до клієнта:

const express = require('express');  
const fetch = require('node-fetch');  

const app = express();  

app.get('/api/stream', async (req, res) => {  
 const response = await fetch('https://api.openai.com/v1/chat/completions', {  
 method: 'POST',  
 headers: {  
 'Authorization': `Bearer YOUR_API_KEY`,  
 'Content-Type': 'application/json',  
 },  
 body: JSON.stringify({  
 model: 'gpt-4',  
 messages: [{ role: 'user', content: 'Hello!' }],  
 stream: true, // Enable streaming  
 }),  
 });  

 // Set headers for streaming  
 res.setHeader('Content-Type', 'text/event-stream');  
 res.setHeader('Cache-Control', 'no-cache');  
 res.setHeader('Connection', 'keep-alive');  

 // Stream response data  
 response.body.on('data', (chunk) => {  
 res.write(chunk.toString()); // Stream chunks to the client  
 });  

 response.body.on('end', () => {  
 res.end(); // End the stream  
 });  

 response.body.on('error', (err) => {  
 console.error('Error:', err);  
 res.status(500).end();  
 });  
});  

app.listen(3000, () => console.log('Server is running on http://localhost:3000'));

Крок 3: Інтеграція на фронтенді з Web Streams API

Фронтенд має обробляти потік даних та поступово оновлювати інтерфейс.

Приклад: Фронтенд на React

Ось як обробити стрімінгову відповідь у React-додатку:

import React, { useState } from 'react';  

function StreamAPIResponse() {  
 const [output, setOutput] = useState('');  

 const handleStream = async () => {  
 const response = await fetch('/api/stream'); // Connect to the backend API  

 if (!response.body) {  
 console.error('No response body');  
 return;  
 }  

 const reader = response.body.getReader();  
 const decoder = new TextDecoder();  
 let done = false;  

 while (!done) {  
 const { value, done: readerDone } = await reader.read();  
 done = readerDone;  
 const chunk = decoder.decode(value);  
 setOutput((prev) => prev + chunk); // Append chunk to output  
 }  
 };  

 return (  
  <div>  
    <button onClick={handleStream}>Start Streaming</button>  
    <div>{output}</div>  
  </div>  
 );  
}  

export default StreamAPIResponse;

Крок 4: Ключові особливості реалізації

1. Бекенд:

   • Виконує запит POST до OpenAI API з увімкненим параметром stream: true.
   • Стрімить частини даних, використовуючи res.write().

2. Фронтенд:

   • Обробляє ReadableStream з відповіді API, використовуючи getReader().
   • Оновлює UI поступово, додаючи частини до стану.

Висновок

Цей підхід особливо корисний для додатків, таких як інтерфейси чату, оновлення в реальному часі подій та стрімінг великих даних поступово. Виконуючи кроки, описані тут, ви зможете створити безперебійний стрімінг для ваших користувачів.
Наприклад:

fetch('http://localhost:3000/data')  
 .then(response => response.json())  
 .then(data => console.log(data))  
 .catch(error => console.error(error));

Крок 6: Запустіть ваш додаток React Native на Android-пристрої

1. Відкрийте термінал і перейдіть до директорії вашого проекту React Native.
2. Виконайте наступну команду, щоб побудувати та запустити додаток на підключеному Android-пристрої:

npx react-native run-android

1. Переконайтеся, що ваш додаток успішно встановлений та працює на вашому пристрої.

Крок 7: Тестування з'єднання

1. Відкрийте додаток на Android-пристрої.
2. Виконайте дії, які викликають мережеві запити (наприклад, отримання даних з бекенду).
3. Перевірте, що додаток успішно спілкується з вашим локальним бекендом.

Виправлення помилок

1. Пристрій не розпізнано ADB

• Переконайтеся, що USB-дебаггінг або бездротовий дебаггінг увімкнено.
• Спробуйте перепідключити USB-кабель або перепарувати через бездротовий дебаггінг.
• Перезапустіть сервер ADB:

adb kill-server adb start-server

2. Бекенд недоступний

• Перевірте, що ваш бекенд працює та слухає на правильному порту.
• Перевірте налаштування вашого файрволу, щоб переконатися, що порт не заблоковано.
• Використовуйте curl або Postman, щоб протестувати бекенд з вашого комп'ютера:

curl http://localhost:3000/data

3. ADB Reverse не працює

• Переконайтеся, що команда ADB reverse була виконана правильно.
• Подвійно перевірте номер порту в команді.

4. Мережеві проблеми

• Переконайтеся, що і ваш комп'ютер, і Android-пристрій підключені до однієї Wi-Fi мережі.
• Якщо ви використовуєте корпоративну або публічну мережу, можуть бути обмеження. Спробуйте підключитися до особистої мережі, якщо це можливо.

Альтернатива: Використання ngrok для доступу ззовні

Якщо ви хочете отримати доступ до вашого локального бекенду ззовні вашої локальної мережі (наприклад, для тестування в іншій мережі), ви можете використовувати ngrok.

1. Встановіть ngrok:

npm install -g ngrok

1. Запустіть ngrok для порту вашого бекенду:

ngrok http 3000

1. Використовуйте URL ngrok (наприклад, https://<id>.ngrok.io) у вашому додатку React Native.

Висновок

Дотримуючись цих кроків, ви зможете легко отримати доступ до вашого локального бекенду з зовнішнього Android-пристрою під час розробки додатка React Native. Незалежно від того, використовуєте ви USB-кабель чи бездротовий дебаггінг, це налаштування дозволяє вам тестувати ваш додаток у реальному середовищі, забезпечуючи більш зручний процес розробки.

Якщо ви зіткнулися з проблемами, зверніться до розділу виправлення помилок або залиште коментар нижче. Успіхів у програмуванні! 🚀

Додаткові ресурси

• Документація React Native
• Документація ADB
• Документація Ngrok

Перекладено з: How to Access Localhost Backend from an External Android Device in React Native