Bina apl mudah alih masa nyata dengan Python dan React Native

Dengan populariti peranti mudah alih, semakin banyak syarikat memberi perhatian kepada pembangunan aplikasi mudah alih. Mudah untuk membina aplikasi mudah alih masa nyata berprestasi tinggi menggunakan React Native dan Python. Dalam artikel ini, kami akan meneroka cara menggunakan kedua-dua teknologi ini untuk membina aplikasi mudah alih masa nyata.

React Native ialah rangka kerja sumber terbuka berasaskan JavaScript yang boleh digunakan untuk membina aplikasi mudah alih. React Native mempunyai prestasi cemerlang dan kemudahan penggunaan, yang menjadikannya rangka kerja pilihan untuk membina aplikasi mudah alih. Aplikasi merentas platform boleh dibangunkan dengan mudah menggunakan React Native dan boleh dijalankan pada iOS dan Android.

Python ialah bahasa pengaturcaraan peringkat tinggi yang popular yang digunakan secara meluas dalam pembangunan web, analisis data, pengkomputeran saintifik dan bidang lain. Python mudah dipelajari, mempunyai kebolehbacaan kod yang tinggi, dan berorientasikan objek, menjadikannya salah satu bahasa pilihan dalam bidang sains data. Pada masa yang sama, Python juga mempunyai pengaturcaraan rangkaian yang berkuasa dan keupayaan pengaturcaraan serentak, yang sangat sesuai untuk membina aplikasi masa nyata.

Dalam artikel ini, kami akan membina aplikasi sembang mudah alih masa nyata menggunakan React Native dan Python. Aplikasi ini akan menggunakan teknologi WebSocket untuk mewujudkan sambungan komunikasi masa nyata, menggunakan Python sebagai program sebelah pelayan untuk menghantar data sembang kepada klien dalam format JSON. React Native akan menerima dan memaparkan mesej sembang dan membolehkan pengguna menghantar mesej sembang.

Sekarang, mari bina aplikasi sembang mudah alih masa nyata kami langkah demi langkah.

Langkah 1: Sediakan pelayan

Kita perlu menyediakan atur cara pelayan terlebih dahulu. Dalam contoh ini, kami menggunakan Python untuk menulis program sebelah pelayan dan akan menggunakan protokol WebSocket untuk komunikasi. Kita boleh menggunakan pustaka WebSocket Python websocket untuk memudahkan proses pembangunan.

Kami boleh memasang perpustakaan websocket dengan mengikuti langkah berikut:

pip install websocket

Seterusnya, kami akan menulis program pelayan WebSocket. Berikut ialah kod program pelayan:

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()

Dalam kod sampel ini, setelah sambungan soket web diwujudkan, kaedah on_open dipanggil. Dalam kaedah on_open, kita boleh memulakan beberapa kerja, seperti memulakan sambungan pangkalan data, memuatkan fail konfigurasi, dsb. Apabila WebSocket menerima mesej, ia memanggil kaedah on_message. Dalam kaedah on_message, kami menukar teks berformat JSON kepada objek Python melalui kaedah json.loads(). Kami kemudiannya boleh memproses mesej dan menghantarnya kembali kepada klien menggunakan kaedah ws.send().

Langkah 2: Sediakan aplikasi klien React Native

Seterusnya, kita perlu menyediakan aplikasi klien React Native. Dalam contoh ini, kami akan menulis aplikasi kami menggunakan React Native. Kita boleh menggunakan modul WebSocket terbina dalam React Native untuk menyambung ke pelayan.

Kami boleh mencipta aplikasi React Native dengan arahan berikut:

npx react-native init MyChatApp

Seterusnya, kami akan menulis aplikasi klien React Native. Berikut ialah kod untuk aplikasi klien React Native kami:

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;

Dalam kod contoh ini, kami telah menentukan dua keadaan dalam komponen. Keadaan mesej digunakan untuk menyimpan mesej yang dimasukkan oleh pengguna, dan keadaan mesej chat digunakan untuk menyimpan mesej sembang daripada pelayan. Dalam cangkuk useEffect, kami mencipta objek klien WebSocket dan menggunakannya untuk menyambung ke pelayan. Apabila WebSocket menerima mesej, ia akan mencetuskan cangkuk onmessage dan kami menggunakan kaedah JSON.parse() untuk menukar data mesej kepada objek JavaScript. Jika atribut jenis dalam objek mesej ialah "sembang", kami akan menetapkan data mesej dalam keadaan mesej sembang. Kaedah sendMessage akan menggunakan objek klien WebSocket baharu untuk menghantar mesej kepada pelayan. Apabila mesej dihantar, klien WebSocket akan mencetuskan cangkuk onopen dan kami menggunakan kaedah JSON.stringify() untuk menukar data mesej kepada format JSON.

Langkah 3: Uji aplikasi kami

Kami telah menulis aplikasi sisi pelayan dan sisi pelanggan, kini tiba masanya untuk menguji aplikasi kami. Kita perlu memulakan program pelayan dan aplikasi klien dalam dua tetingkap berbeza.

Laksanakan arahan berikut dalam tetingkap program sebelah pelayan:

python server.py

Ini akan memulakan program pelayan WebSocket dan mula mendengar permintaan sambungan pada port 8080.

Laksanakan arahan berikut dalam tetingkap lain untuk melancarkan aplikasi React Native:

npx react-native run-android

Kini, kami telah berjaya melancarkan aplikasi pelanggan kami. Kami boleh menggunakan emulator atau peranti sebenar untuk menguji aplikasi kami dan menghantar beberapa mesej sembang. Apabila kami menghantar mesej sembang, aplikasi kami akan memaparkan mesej baharu daripada pelayan dalam antara muka sembang.

Kesimpulan

React Native dan Python ialah gabungan hebat untuk membina aplikasi mudah alih masa nyata. Aplikasi mudah alih masa nyata berprestasi tinggi boleh dibina dengan mudah menggunakan kedua-dua teknologi ini. Dalam artikel ini, kami menerangkan cara menggunakan kedua-dua teknologi ini untuk membina aplikasi sembang mudah alih masa nyata. Kami mewujudkan sambungan komunikasi masa nyata melalui protokol WebSocket dan menggunakan Python sebagai program sebelah pelayan untuk menghantar mesej sembang kepada pelanggan. Aplikasi klien React Native menerima dan memaparkan mesej sembang dan membolehkan pengguna menghantar mesej sembang.

Atas ialah kandungan terperinci Bina apl mudah alih masa nyata dengan Python dan React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!