bigskysoftware / bigskysoftware/htmx-extensions
Cannot update element of SVG image through websocket
- Dominant language
- JavaScript
- Stars
- 284
- Forks
- 88
- PR merge metrics
- No merged PRs in 30d
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" caveat [mentioned here](https://htmx.org/attributes/hx-swap-oob/#slippery-svgs)).
If I try with a websocket, it does not work.
I attached a Python program that shows my attempt.
If you open and click on the circle, both the circle and the text change color alternating between red and blue.
If you open , 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
~~~~python
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 = """
RED
"""
return web.Response(text=response, content_type="text/html")
async def handle_continuous(request):
response = """
RED
"""
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"""
{color.upper()}
if __name__ == '__main__':
main()
~~~~
Contributor guide
Research direction
Run the supplied Python reproducer and compare the manual and continuous pages, focusing on the htmx-ext-ws path that processes the websocket fragment. The fix is complete when the SVG circle updates alongside the message without producing htmx:oobErrorNoTarget.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, python
- Domain
- frontend, networking, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100