first approch failed with mqqt broker on drone: problem the websocket port don't work (can't be reach)

src/FLAD/lib/index.js

@@ -1,5 +1,7 @@
+'use strict';
+
 Object.defineProperty(exports, '__esModule', {value: true});
-require('./mqttLib');
+require('./paho-mqtt');
 const storage = require('./storage');
 function initialize() {
   global.localStorage = storage;

src/FLAD/navigation/Navigation.tsx

@@ -73,8 +73,6 @@ const tokenSend: string = useSelector(state => state.userReducer.userFladToken);
             else{
               return;
             }
-            
-          
         }
         else {
           //@ts-ignore

src/FLAD/package.json

@@ -27,6 +27,7 @@
     "expo-haptics": "~12.0.1",
     "expo-image-picker": "~14.0.2",
     "expo-linear-gradient": "~12.0.1",
+    "expo-linking": "~3.3.1",
     "expo-location": "~15.0.1",
     "expo-random": "~13.0.0",
     "expo-secure-store": "~12.0.0",
@@ -49,8 +50,7 @@
     "react-native-web": "~0.18.9",
     "react-navigation-shared-element": "^3.1.3",
     "react-redux": "^8.0.5",
-    "redux": "^4.2.1",
-    "expo-linking": "~3.3.1"
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/FLAD/screens/Chat.tsx

@@ -1,11 +1,52 @@
 import { useNavigation } from "@react-navigation/native";
 import React, { useEffect } from "react";
 import { GiftedChat } from "react-native-gifted-chat";
+import { Button, TextInput, View ,StyleSheet } from "react-native";
+import { MqttClient } from "../utils/MqttClient";
 
 export default function Chat() {
+  const [message, setMessage] = React.useState([]);
+  const [publishPayload, setPublishPayload] = React.useState('');
+  const [publishTopic, setPublishTopic] = React.useState('');
+  const [subscribeTopic, setSubscribeTopic] = React.useState('');
+  const [isSubscribed, setSubscribed] = React.useState(false);
+  const [mqttConnected, setMqttConnected] = React.useState(false);
+  const onSuccess = () => {
+    console.log('Mqtt Connected');
+    setMqttConnected(true);
+  };
   
-    const navigation = useNavigation();
+  const onConnectionLost = () => {
+    setMqttConnected(false);
+    console.log('Mqtt Fail to connect');
+  };
+  React.useEffect(() => {
+    MqttClient.onConnect(onSuccess, onConnectionLost);
+  }, []);
 
+ 
+
+
+  const onSubscribe = message => {
+    setMessage(message);
+  };
+
+  function onSubscribeHandler() {
+    MqttClient.onSubscribe(subscribeTopic, onSubscribe);
+    setSubscribed(true);
+  }
+
+  function onPublishHandler() {
+    MqttClient.onPublish(publishTopic, publishPayload);
+    setPublishPayload('');
+  }
+
+  function unSubscribeHandler() {
+    MqttClient.unsubscribe(subscribeTopic);
+    setSubscribeTopic('');
+    setSubscribed(false);
+  }
+  const navigation = useNavigation();
     useEffect(() => {
         navigation.getParent()?.setOptions({
           tabBarStyle: {
@@ -17,6 +58,43 @@ export default function Chat() {
         });
       }, [navigation]);
     return (
-        <GiftedChat />
+     <GiftedChat></GiftedChat>
     )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  statusContainer: {
+    backgroundColor: '#000000',
+    paddingVertical: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mainContainer: {},
+  subscribeContainer: {
+    marginVertical: 50,
+    marginHorizontal: 30,
+    justifyContent: 'center',
+  },
+  inputStyle: {
+    borderBottomColor: 'grey',
+    borderBottomWidth: 1,
+    paddingVertical: 5,
+  },
+  inputStylePublish: {
+    borderBottomColor: 'grey',
+    borderBottomWidth: 1,
+    paddingVertical: 5,
+    marginVertical: 20,
+  },
+  publishContainer: {
+    marginVertical: 10,
+    marginHorizontal: 30,
+  },
+  messageContainer: {
+    paddingHorizontal: 50,
+    paddingVertical: 20,
+  },
+});

src/FLAD/services/message/MqttClient.ts

@@ -0,0 +1,92 @@
+// import { Alert } from 'react-native';
+// import initialize from '../../lib';
+// import * as Paho from '../../lib/paho-mqtt';
+
+// initialize();
+
+// class MqttClient {
+//   client: any;
+//   callbacks: { [key: string]: (payloadString: string) => void };
+//   onSuccessHandler?: () => void;
+//   onConnectionLostHandler?: () => void;
+//   isConnected: boolean;
+
+//   constructor() {
+//     const clientId = 'ReactNativeMqtt';
+
+//     this.client = new Paho.Client('127.0.0.1', 9001, clientId);
+//     this.client.onMessageArrived = this.onMessageArrived.bind(this);
+//     this.callbacks = {};
+//     this.onSuccessHandler = undefined;
+//     this.onConnectionLostHandler = undefined;
+//     this.isConnected = false;
+//   }
+
+//   onConnect = (
+//     onSuccessHandler: () => void,
+//     onConnectionLostHandler: () => void,
+//   ) => {
+//     this.onSuccessHandler = onSuccessHandler;
+//     this.onConnectionLostHandler = onConnectionLostHandler;
+//     this.client.onConnectionLost = () => {
+//       this.isConnected = false;
+//       onConnectionLostHandler();
+//     };
+
+//     this.client.connect({
+//       timeout: 10,
+//       onSuccess: () => {
+//         this.isConnected = true;
+//         onSuccessHandler();
+//       },
+//       useSSL: false,
+//       onFailure: this.onError.bind(this),
+//       reconnect: true,
+//       keepAliveInterval: 20,
+//       cleanSession: true,
+//     });
+//   };
+
+//   onError = ({ errorMessage }: { errorMessage: string }) => {
+//     console.log(errorMessage);
+//     this.isConnected = false;
+//     Alert.alert('Failed', 'Failed to connect to MQTT', [
+//       {
+//         text: 'Cancel',
+//         onPress: () => console.log('Cancel Pressed'),
+//         style: 'cancel',
+//       },
+//       {
+//         text: 'Try Again',
+//         onPress: () =>
+//           this.onConnect(
+//             this.onSuccessHandler!,
+//             this.onConnectionLostHandler!,
+//           ),
+//       },
+//     ]);
+//   };
+
+//   onMessageArrived = (message: Paho.Message) => {
+//     const { payloadString, topic } = message;
+//     console.log('onMessageArrived:', payloadString);
+//     this.callbacks[topic](payloadString);
+//   };
+
+//   onPublish = (topic: string, message: string) => {
+//     this.client.publish(topic, message);
+//   };
+
+//   onSubscribe = (topic: string, callback: (payloadString: string) => void) => {
+//     this.callbacks[topic] = callback;
+//     this.client.subscribe(topic);
+//   };
+
+//   unsubscribe = (topic: string) => {
+//     delete this.callbacks[topic];
+//     this.client.unsubscribe(topic);
+//   };
+// }
+
+// let client = new MqttClient();
+// export { client as MqttClient };

src/FLAD/services/message/chatService.ts

@@ -0,0 +1,16 @@
+
+// export default class ChatService {
+// 	private readonly mqtt_broker = '127.0.0.1';
+//     private readonly mqtt_port = 9001;
+// 	private spotifyRequestHandler = new RequestHandler();
+// 	public token: string;
+
+
+// 	constructor(token: string) {
+// 		this.token = token;
+// 	}
+// 	public async getMusicById(idMusic: string): Promise<Music| null> {
+//     }
+
+
+// }

src/FLAD/services/spotify/spotifyRequestHandler/utils.tsx

@@ -35,20 +35,19 @@ export class RequestHandler {
                 data: options.body
             });
 
-        return resp;
+            return resp;
         }
-        catch(error : any){
+        catch (error: any) {
             const errorMessage = error.response.data?.error?.message;
-            if (errorMessage === "Invalid access token" || errorMessage === "The access token expired" ) {
-                console.log('### Warning ! ### try refresh token Request Handler ' +error);
-
+            if (errorMessage === "Invalid access token" || errorMessage === "The access token expired") {
+                console.log('### Warning ! ### try refresh token Request Handler ' + error);
                 const newToken = await this.refreshToken();
-                console.log('### GOOD Warning ! ### new token Request Handler ' +newToken);
+                console.log('### GOOD Warning ! ### new token Request Handler ' + newToken);
                 // Mettez à jour le token dans le store ou le reducer ici
                 return this.spotifyFetch(url, options, newToken);
             }
             else {
-                console.log('### Error ! ### while fetching Data in the SPotify Request Handler ' +error);
+                console.log('### Error ! ### while fetching Data in the SPotify Request Handler ' + error);
                 throw error;
             }
         }
@@ -61,9 +60,9 @@ export class RequestHandler {
         const response = await axios.get(`https://flad-api-production.up.railway.app/api/spotify/refresh?refresh_token=${refreshToken}`);
         // Renvoie le nouveau token
         const {
-            access_token :  access_token,
+            access_token: access_token,
             refresh_token: refresh_token,
-          } = response.data as SpotifyAuthResponse
+        } = response.data as SpotifyAuthResponse
         console.log('new access token : ' + access_token);
         console.log('new refresh token : ' + refresh_token);
         await SecureStore.setItemAsync(MY_SECURE_AUTH_STATE_KEY, access_token);
@@ -75,4 +74,4 @@ export class RequestHandler {
 interface SpotifyAuthResponse {
     access_token: string;
     refresh_token: string;
-  }
+}

src/FLAD/utils/MqttClient.js

@@ -1,11 +1,14 @@
 import initialize from '../lib';
+import { Alert } from 'react-native';
+require('../lib/paho-mqtt');
 
 initialize();
+
 class MqttClient {
     
   constructor() {
     const clientId = 'ReactNativeMqtt';
-    this.client = new Paho.MQTT.Client('127.0.0.1', 9001, clientId);
+    this.client = new Paho.MQTT.Client("172.20.10.3", 9001 , clientId);
     this.client.onMessageArrived = this.onMessageArrived;
     this.callbacks = {};
     this.onSuccessHandler = undefined;