Créez des applications mobiles en temps réel avec Python et React Native

Avec la popularité des appareils mobiles, de plus en plus d'entreprises s'intéressent au développement d'applications mobiles. Il est facile de créer des applications mobiles hautes performances en temps réel à l'aide de React Native et Python. Dans cet article, nous explorerons comment utiliser ces deux technologies pour créer des applications mobiles en temps réel.

React Native est un framework open source basé sur JavaScript qui peut être utilisé pour créer des applications mobiles. React Native offre d'excellentes performances et une facilité d'utilisation, ce qui en fait le framework préféré pour la création d'applications mobiles. Les applications multiplateformes peuvent être facilement développées à l'aide de React Native et peuvent s'exécuter sur iOS et Android.

Python est un langage de programmation de haut niveau populaire largement utilisé dans le développement Web, l'analyse de données, le calcul scientifique et d'autres domaines. Python est facile à apprendre, offre une lisibilité élevée du code et est orienté objet, ce qui en fait l'un des langages préférés dans le domaine de la science des données. Dans le même temps, Python dispose également de puissantes capacités de programmation réseau et de programmation simultanée, ce qui est très approprié pour créer des applications en temps réel.

Dans cet article, nous allons créer une application de chat mobile en temps réel en utilisant React Native et Python. L'application utilisera la technologie WebSocket pour établir une connexion de communication en temps réel et Python comme programme côté serveur pour envoyer les données de discussion au client au format JSON. React Native recevra et affichera les messages de discussion et permettra aux utilisateurs d'envoyer des messages de discussion.

Maintenant, construisons notre application de chat mobile en direct étape par étape.

Étape 1 : Configurer le serveur

Nous devons d’abord configurer le programme serveur. Dans cet exemple, nous utilisons Python pour écrire le programme côté serveur et utiliserons le protocole WebSocket pour la communication. Nous pouvons utiliser la bibliothèque WebSocket de Python websocket pour simplifier le processus de développement.

Nous pouvons installer la bibliothèque websocket en suivant ces étapes :

pip install websocket

Ensuite, nous écrirons le programme serveur WebSocket. Voici le code du programme serveur :

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

Dans cet exemple de code, une fois la connexion websocket établie, la méthode on_open est appelée. Dans la méthode on_open, nous pouvons initialiser certains travaux, comme l'initialisation de la connexion à la base de données, le chargement du fichier de configuration, etc. Lorsque WebSocket reçoit un message, il appelle la méthode on_message. Dans la méthode on_message, nous convertissons le texte au format JSON en un objet Python via la méthode json.loads(). Nous pouvons ensuite traiter le message et le renvoyer au client en utilisant la méthode ws.send().

Étape 2 : Configurer l'application client React Native

Ensuite, nous devons configurer l'application client React Native. Dans cet exemple, nous allons écrire notre application en utilisant React Native. Nous pouvons utiliser le module WebSocket intégré de React Native pour nous connecter au serveur.

Nous pouvons créer une application React Native avec la commande suivante :

npx react-native init MyChatApp

Ensuite, nous écrirons l'application client React Native. Voici le code de notre application client 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;

Dans cet exemple de code, nous avons défini deux états dans le composant. L'état du message est utilisé pour stocker les messages saisis par l'utilisateur et l'état chatMessage est utilisé pour stocker les messages de discussion du serveur. Dans le hook useEffect, nous créons un objet client WebSocket et l'utilisons pour nous connecter au serveur. Lorsque WebSocket reçoit un message, il déclenche le hook onmessage et nous utilisons la méthode JSON.parse() pour convertir les données du message en un objet JavaScript. Si l'attribut type dans l'objet message est "chat", nous définirons les données du message dans l'état chatMessage. La méthode sendMessage utilisera un nouvel objet client WebSocket pour envoyer un message au serveur. Lorsqu'un message est envoyé, le client WebSocket déclenchera le hook onopen et nous utiliserons la méthode JSON.stringify() pour convertir les données du message au format JSON.

Étape 3 : Testez notre application

Nous avons écrit les applications côté serveur et côté client, il est maintenant temps de tester notre application. Nous devons démarrer le programme serveur et l'application client dans deux fenêtres différentes.

Exécutez la commande suivante dans la fenêtre du programme côté serveur :

python server.py

Cela démarrera un programme serveur WebSocket et commencera à écouter les demandes de connexion sur le port 8080.

Exécutez la commande suivante dans une autre fenêtre pour lancer l'application React Native :

npx react-native run-android

Maintenant, nous avons lancé avec succès notre application client. Nous pouvons utiliser un émulateur ou un appareil réel pour tester notre application et envoyer des messages de discussion. Lorsque nous envoyons un message de chat, notre application affichera le nouveau message du serveur dans l'interface de chat.

Conclusion

React Native et Python sont une combinaison puissante pour créer des applications mobiles en temps réel. Des applications mobiles hautes performances en temps réel peuvent être facilement créées à l’aide de ces deux technologies. Dans cet article, nous expliquons comment utiliser ces deux technologies pour créer une application de chat mobile en temps réel. Nous avons établi une connexion de communication en temps réel via le protocole WebSocket et utilisé Python comme programme côté serveur pour envoyer des messages de discussion au client. L'application client React Native reçoit et affiche des messages de discussion et permet aux utilisateurs d'envoyer des messages de discussion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!