es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar el contenido de un paquete UDP a través de Dash

30 May, 2023 Programación

Me gustaría actualizar dinámicamente un div de html cuando se recibe un paquete udp en el puerto xxxx. ¿Alguien sabe cómo fusionar estas dos partes?

Al fusionar el código, no puedo ejecutar ambos, por ejemplo, guardar en una variable el valor recibido del paquete udp.

Código HTML:

DASH“`
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

SERVER = socket.gethostbyname(socket.gethostname())
ADDR = (SERVER, PORT)
UDPClientSocket = socket.socket(family=socket.AF_INET, type=socket.SOCK_DGRAM)

app = dash.Dash(name)

app.layout = html.Div([
html.H6(“Value:”),
html.Br(),
html.Div(id=’my-output’),

])

if name == ‘main’:
app.run_server(debug=True)


Socket UDP:

UDP```
HEADER = 64
PORT = 4501
SERVER = socket.gethostbyname(socket.gethostname())
ADDR = (SERVER, PORT)
FORMAT = 'utf-8'
DISCONNECT_MESSAGE = "!DISCONNECT"

server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(ADDR)

def handle_client(conn, addr):
    print(f"[NEW CONNECTION] {addr} connected.")
    connected = True
    while connected:
            msg = conn.recv(1024)
            print(f"[{addr}] {msg}")
    conn.close()

def start():
    server.listen()
    while True:
        conn, addr = server.accept()
        thread = threading.Thread(target=handle_client, args=(conn, addr))
        thread.start()

start()
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para actualizar dinámicamente un div html cuando se recibe un paquete UDP en un puerto específico, se puede utilizar el marco Dash en Python junto con el módulosocket. Aquí están los pasos que puedes seguir:

    1. Importa los módulos necesarios:
      import socket
      import threading
      import dash
      import dash_core_components as dcc
      import dash_html_components as html
      from dash.dependencies import Input, Salida
    2. Configure el socket UDP para recibir mensajes en el puerto especificado (en este caso, el puerto 4501): 
      PORT = 4501
SERVER = socket.gethostbyname(socket.gethostname())
ADDR = (SERVER, PORT)
FORMAT = 'utf-8'
DISCONNECT_MESSAGE = "!DESCONECTAR"

server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(ADDR)
    3. Define una función que manejará los datos entrantes y actualizará el div en consecuencia. Esta función debe ser llamada cada vez que se reciba un mensaje:
      def handle_client (conn, addr):
             print (f "[NUEVA CONEXIÓN] {addr} conectado.")
             conectado = Verdadero
             mientras conectado:
                 msg = conn.recv (1024)
                 print (f "[{addr}] {msg}")
                 # actualiza el div con el mensaje recibido
                 app.callback (Output ('my-output', 'children'), [Input ('dummy', 'children')] ) (msg)
             conn.close ()
      Note que esta función utiliza el decorador app.callback () para actualizar el div my-output cada vez que se recibe un mensaje. La entrada dummy se utiliza como un disparador para llamar a la función.
    4. Defina la aplicación Dash y configure el diseño. Agrega una entrada dummy y establece su valor en una cadena vacía:
      “`
      app = dash.Dash (__ name__)

       app.layout = html.Div ([
           html.H6 (“Valor:”),
           html.Br (),
           html.Div (id = ‘my-output’),
           dcc.Input (id = ‘dummy’, valor = ”)
       ])
    El div `my-output` se actualizará dinámicamente cada vez que se reciba un mensaje.
    5. Inicie la aplicación en modo de depuración:
    if name == ‘main‘:
           app.run_server (debug = True)
    “`
    Esto iniciará la aplicación y escuchará la recepción de datos en el puerto especificado.

    Cuando se fusionan tanto el socket UDP como la aplicación Dash, puede enfrentar problemas al enviar datos desde la función del socket a la función de Dash. Para resolver ese problema, puede utilizar la función app.callback () con una entrada ficticia que actuará como disparador para que se llame a la función de devolución de llamada.

    Con los pasos anteriores, puede fusionar el código y actualizar dinámicamente el div my-output cada vez que se recibe un paquete UDP en el puerto especificado.

Comments are closed.