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" caveat mentioned here).
If I try with a websocket, it does not work.
I attached a Python program that shows my attempt.
If you open http://localhost:8080/manual and click on the circle, both the circle and the text change color alternating between red and blue.
If you open http://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
from asyncio import sleep
from datetime import timedelta
from aiohttp import web
color = "blue"
def main():
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)
async def handle_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 id="circle1" r="35" cx="50" cy="50" fill="red" hx-get="/update" />
</svg>
<div id="message" style="font-weight: bold; color: red;">
RED
</div>
</body>
</html>
"""
return web.Response(text=response, content_type="text/html")
async def handle_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 id="circle1" r="35" cx="50" cy="50" fill="red" />
</svg>
<div id="message" style="font-weight: bold; color: red;">
RED
</div>
<div ws-connect="/ws"></div>
</body>
</html>
"""
return web.Response(text=response, content_type="text/html")
async def handle_update(request):
global color
response = fragment(color)
color = "red" if color == "blue" else "blue"
return web.Response(text=response, content_type="text/html")
async def handle_websocket(request):
ws = web.WebSocketResponse()
await ws.prepare(request)
ws_color = "blue"
while True:
await sleep(timedelta(seconds=1).total_seconds())
response = fragment(ws_color)
ws_color = "red" if ws_color == "blue" else "blue"
await ws.send_str(response)
return ws
def fragment(color):
return f"""
<template><svg>
<circle hx-swap-oob="true" id="circle1" r="35" cx="50" cy="50" fill="{color}" hx-get="/update" />
</svg></template>
<div hx-swap-oob="true" id="message" style="font-weight: bold; color: {color};">
{color.upper()}
</div>"""
if __name__ == '__main__':
main()
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" caveat mentioned here).
If I try with a websocket, it does not work.
I attached a Python program that shows my attempt.
If you open http://localhost:8080/manual and click on the circle, both the circle and the text change color alternating between red and blue.
If you open http://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