Python と React Native を使用してリアルタイムモバイルアプリを構築する-Python チュートリアル-php.cn

モバイルデバイスの普及に伴い、モバイルアプリケーション開発に注目する企業がますます増えています。 React Native と Python を使用すると、高性能のリアルタイムモバイルアプリケーションを簡単に構築できます。この記事では、これら 2 つのテクノロジを使用してリアルタイムモバイルアプリケーションを構築する方法を説明します。

React Native は、モバイルアプリケーションの構築に使用できる JavaScript ベースのオープンソースフレームワークです。 React Native は優れたパフォーマンスと使いやすさを備えているため、モバイルアプリケーションを構築するためのフレームワークとして推奨されています。クロスプラットフォームアプリケーションは React Native を使用して簡単に開発でき、iOS と Android で実行できます。

Python は、Web 開発、データ分析、科学技術コンピューティングなどの分野で広く使用されている人気の高水準プログラミング言語です。 Python は学習が容易で、コードの可読性が高く、オブジェクト指向であるため、データサイエンスの分野で好まれる言語の 1 つです。同時に、Python には強力なネットワークプログラミング機能と同時プログラミング機能もあり、リアルタイムアプリケーションの構築に非常に適しています。

この記事では、React Native と Python を使用してリアルタイムモバイルチャットアプリケーションを構築します。アプリケーションは、WebSocket テクノロジーを使用してリアルタイム通信接続を確立し、サーバー側プログラムとして Python を使用してチャットデータを JSON 形式でクライアントに送信します。 React Native はチャットメッセージを受信して表示し、ユーザーがチャットメッセージを送信できるようにします。

それでは、リアルタイムモバイルチャットアプリケーションを段階的に構築してみましょう。

ステップ 1: サーバーのセットアップ

最初にサーバープログラムをセットアップする必要があります。この例では、Python を使用してサーバー側プログラムを作成し、通信には WebSocket プロトコルを使用します。 Python の WebSocket ライブラリwebsocketを使用すると、開発プロセスを簡素化できます。

WebSocket ライブラリは次の手順でインストールできます:

pip install websocket

ログイン後にコピー

次に、WebSocket サーバープログラムを作成します。サーバープログラムのコードは次のとおりです。

import websocket import json def on_message(ws, message): # 接收消息 message_obj = json.loads(message) # 处理消息 # ... # 发送消息 ws.send(json.dumps({"type": "chat", "message": "Hello"})) def on_error(ws, error): print("Error:", error) def on_close(ws): print("WebSocket closed") def on_open(ws): print("WebSocket opened") if __name__ == "__main__": ws = websocket.WebSocketApp("ws://localhost:8080", on_message=on_message, on_error=on_error, on_close=on_close) ws.on_open = on_open ws.run_forever()

ログイン後にコピー

このサンプルコードでは、WebSocket 接続が確立されると、on_open メソッドが呼び出されます。 on_open メソッドでは、データベース接続の初期化、構成ファイルのロードなど、いくつかの作業を初期化できます。 WebSocket はメッセージを受信すると、on_message メソッドを呼び出します。 on_message メソッドでは、json.loads() メソッドを通じて JSON 形式のテキストを Python オブジェクトに変換します。その後、メッセージを処理し、 ws.send() メソッドを使用してクライアントに送り返すことができます。

ステップ 2: React Native クライアントアプリケーションをセットアップする

次に、React Native クライアントアプリケーションをセットアップする必要があります。この例では、React Native を使用してアプリケーションを作成します。 React Native の組み込み WebSocket モジュールを使用してサーバーに接続できます。

次のコマンドを使用して React Native アプリケーションを作成できます:

npx react-native init MyChatApp

ログイン後にコピー

次に、React Native クライアントアプリケーションを作成します。 React Native クライアントアプリケーションのコードは次のとおりです。

import React, { useState, useEffect } from 'react'; import { View, Text, TextInput, StyleSheet } from 'react-native'; import WebSocket from 'websocket'; const SERVER_URL = 'ws://localhost:8080'; const ChatApp = () => { const [message, setMessage] = useState(''); const [chatMessage, setChatMessage] = useState(''); useEffect(() => { const ws = new WebSocket.client(SERVER_URL); ws.onopen = () => { console.log('Connected to server'); }; ws.onmessage = (message) => { const message_obj = JSON.parse(message.data); if (message_obj.type === 'chat') { setChatMessage(message_obj.message); } }; ws.onclose = () => { console.log('Disconnected from server'); }; return () => { ws.close(); }; }, []); const sendMessage = () => { const ws = new WebSocket.client(SERVER_URL); ws.onopen = () => { console.log('Connected to server'); ws.send(JSON.stringify({ type: 'chat', message })); }; ws.onclose = () => { console.log('Disconnected from server'); }; setMessage(''); }; return (  Welcome to My Chat App  {chatMessage}  ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, input: { height: 40, width: 300, borderColor: 'gray', borderWidth: 1, borderRadius: 5, padding: 10, marginBottom: 10, }, chatMessage: { textAlign: 'center', }, }); export default ChatApp;

ログイン後にコピー

このコード例では、コンポーネントに 2 つの状態を定義しました。メッセージ状態はユーザーが入力したメッセージを保存するために使用され、chatMessage 状態はサーバーからのチャットメッセージを保存するために使用されます。 useEffect フックでは、WebSocket クライアントオブジェクトを作成し、それを使用してサーバーに接続します。 WebSocket がメッセージを受信すると、onmessage フックがトリガーされ、JSON.parse() メソッドを使用してメッセージデータを JavaScript オブジェクトに変換します。メッセージオブジェクトのtype属性が「chat」の場合、メッセージデータをchatMessage状態に設定します。 sendMessage メソッドは、新しい WebSocket クライアントオブジェクトを使用してサーバーにメッセージを送信します。メッセージが送信されると、WebSocket クライアントは onopen フックをトリガーし、JSON.stringify() メソッドを使用してメッセージデータを JSON 形式に変換します。

ステップ 3: アプリケーションをテストする

サーバー側とクライアント側のアプリケーションを作成しました。今度はアプリケーションをテストします。サーバープログラムとクライアントアプリケーションを 2 つの異なるウィンドウで起動する必要があります。

サーバー側プログラムのウィンドウで次のコマンドを実行します:

python server.py

ログイン後にコピー

これにより、WebSocket サーバープログラムが起動し、ポート 8080 での接続リクエストの待機が開始されます。

別のウィンドウで次のコマンドを実行して、React Native アプリケーションを起動します。

npx react-native run-android

ログイン後にコピー

これで、クライアントアプリケーションが正常に起動されました。エミュレータまたは実際のデバイスを使用してアプリケーションをテストし、チャットメッセージを送信できます。チャットメッセージを送信すると、アプリケーションはサーバーからの新しいメッセージをチャットインターフェイスに表示します。

結論

React Native と Python は、リアルタイムモバイルアプリケーションを構築するための強力な組み合わせです。これら 2 つのテクノロジを使用すると、高性能のリアルタイムモバイルアプリケーションを簡単に構築できます。この記事では、これら 2 つのテクノロジを使用してリアルタイムモバイルチャットアプリケーションを構築する方法を説明します。 WebSocket プロトコルを介してリアルタイム通信接続を確立し、クライアントにチャットメッセージを送信するためのサーバー側プログラムとして Python を使用しました。 React Native クライアントアプリケーションは、チャットメッセージを受信して表示し、ユーザーがチャットメッセージを送信できるようにします。

以上がPython と React Native を使用してリアルタイムモバイルアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。