Glitches in webserver while accessing through Internet

Coding Python programming
1

Greeting fellow roboticist,
I am trying to enable remote access for XRP outside the home network (outside the WiFi range) via internet. I managed to do this using Ngrok and modifying the existing webserver code a bit to connect to a Wi-Fi instead of creating hotspot of itself.

Problem I faced:
The webserver UI is not stable, and joystick commands are not executed most of the time. However, if I do the same in the home network (where XRP is connected) it works fine, that too while using the same script as above.

Question:
Does anyone know what is causing the issue?
Is there any work around or have anyone did something similar. I have seen options like using MQTT or Data cake. If anyone has done anything like this, please let me know

Micro Python code used

from XRPLib.defaults import *
import network
import time
from machine import Timer

def connect_to_network(ssid, password):
    wlan = network.WLAN(network.STA_IF)
    wlan.active(True)
    wlan.connect(ssid, password)
    
    start_time = time.time()
    while not wlan.isconnected():
        print("Connecting to network...")
        if time.time() > start_time + 10:  # 10 second timeout
            print("Failed to connect to network")
            return None
        time.sleep(1)
    
    print("Connected to network")
    print("Network config:", wlan.ifconfig())
    return wlan.ifconfig()[0]  # Return the IP address

class ASBWebServer:
    def __init__(self):
        self.ip = None

#Connect to WiFi    
    def connect_to_network(self, ssid='Na********', password='***********'):
        self.ip = connect_to_network(ssid, password)
        if self.ip:
            print(f"Connected to network with IP: {self.ip}")
        else:
            print("Network connection failed")

# Instantiate the asbwebserver object
asbwebserver = ASBWebServer()

# Binding functions to the arrow buttons
webserver.registerForwardButton(lambda: drivetrain.set_effort(0.5, 0.5))
webserver.registerLeftButton(lambda: drivetrain.set_effort(-0.5, 0.5))
webserver.registerRightButton(lambda: drivetrain.set_effort(0.5, -0.5))
webserver.registerBackwardButton(lambda: drivetrain.set_effort(-0.5, -0.5))
webserver.registerStopButton(lambda: drivetrain.set_effort(0, 0))

# Binding functions to custom buttons
webserver.add_button("Close Server", lambda: webserver.stop_server())
webserver.add_button("Blink", lambda: board.led_blink(2))
webserver.add_button("LED Off", lambda: board.led_off())
webserver.add_button("Servo Up", lambda: servo_one.set_angle(90))
webserver.add_button("Servo Down", lambda: servo_one.set_angle(0))

def log_time_and_range():
    # This function is called every second to update the data on the webserver
    webserver.log_data("Time", time.time())
    webserver.log_data("Range", rangefinder.distance())
    webserver.log_data("Left Motor", left_motor.get_position())
    webserver.log_data("Right Motor", right_motor.get_position())
    webserver.log_data("Button State", board.is_button_pressed())

timer = Timer(-1)
timer.init(freq=4, mode=Timer.PERIODIC, callback=lambda t: log_time_and_range())

def connect_and_start_webserver():
    # Connect to the network and start the webserver in bridge mode
    asbwebserver.connect_to_network()
    if asbwebserver.ip:
        webserver.ip = asbwebserver.ip  # Ensure the IP is set in the webserver object
        webserver.start_server()
    else:
        print("Failed to start webserver due to network connection issues")

connect_and_start_webserver()

Ngrok Setup

Ngrok Configuration File:
Create an Ngrok configuration file, typically named ngrok.yml or ngrok-config.yml.
Place the file in a known directory, e.g., ~/.ngrok2/ngrok.yml.
Example ngrok.yml configuration file:
yaml

authtoken: your_auth_token_here
tunnels:
  xrp_webserver:
    addr: 
 
#  Pico W's IP address and the port of the webserver
    proto: http

ngrok webserver
ngrok webserver720×1600 126 KB