Python と React Native を使用してリアルタイム モバイル アプリを構築する

モバイル デバイスの普及に伴い、モバイル アプリケーション開発に注目する企業がますます増えています。 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 (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to My Chat App</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter message"
        value={message}
        onChangeText={setMessage}
        onSubmitEditing={sendMessage}
      />
      <Text style={styles.chatMessage}>{chatMessage}</Text>
    </View>
  );
};

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 サイトの他の関連記事を参照してください。