- Notifications
You must be signed in to change notification settings - Fork85
Open
Description
Hello,
I am trying to update one element of an SVG image through a websocket, but I cannot seem to make it work.
If I try to update it through a click, everything works fine (with the "Slippery SVGs" caveatmentioned here).
If I try with a websocket, it does not work.
I attached a Python program that shows my attempt.
If you openhttp://localhost:8080/manual and click on the circle, both the circle and the text change color alternating between red and blue.
If you openhttp://localhost:8080/continuous, only the text alternates color once per second, but not the circle, and the console log shows an error "htmx:oobErrorNoTarget".
Can you see anything I do wrong?
htmx version 2.0.8, htmx-ex-ws version 2.0.4
fromasyncioimportsleepfromdatetimeimporttimedeltafromaiohttpimportwebcolor="blue"defmain():app=web.Application()app.add_routes([web.get('/manual',handle_manual),web.get('/continuous',handle_continuous),web.get('/update',handle_update),web.get('/ws',handle_websocket), ])web.run_app(app)asyncdefhandle_manual(request):response="""<!DOCTYPE html><html><head> <script src="https://unpkg.com/htmx.org@2.0.8/dist/htmx.js" crossorigin="anonymous" ></script> </head> <body> <svg> <circle r="35" cx="50" cy="50" fill="red" hx-get="/update" /> </svg> <div> RED </div> </body></html>"""returnweb.Response(text=response,content_type="text/html")asyncdefhandle_continuous(request):response="""<!DOCTYPE html><html><head> <script src="https://unpkg.com/htmx.org@2.0.8/dist/htmx.js" crossorigin="anonymous" ></script> <script src="https://unpkg.com/htmx-ext-ws@2.0.4" integrity="sha384-1RwI/nvUSrMRuNj7hX1+27J8XDdCoSLf0EjEyF69nacuWyiJYoQ/j39RT1mSnd2G" crossorigin="anonymous"> </script> </head> <body hx-ext="ws"> <svg> <circle r="35" cx="50" cy="50" fill="red" /> </svg> <div> RED </div> <div ws-connect="/ws"></div> </body></html>"""returnweb.Response(text=response,content_type="text/html")asyncdefhandle_update(request):globalcolorresponse=fragment(color)color="red"ifcolor=="blue"else"blue"returnweb.Response(text=response,content_type="text/html")asyncdefhandle_websocket(request):ws=web.WebSocketResponse()awaitws.prepare(request)ws_color="blue"whileTrue:awaitsleep(timedelta(seconds=1).total_seconds())response=fragment(ws_color)ws_color="red"ifws_color=="blue"else"blue"awaitws.send_str(response)returnwsdeffragment(color):returnf"""<template><svg><circle hx-swap-oob="true" r="35" cx="50" cy="50" fill="{color}" hx-get="/update" /></svg></template><div hx-swap-oob="true">{color.upper()}</div>"""if__name__=='__main__':main()
Metadata
Metadata
Assignees
Labels
No labels