bigskysoftware / bigskysoftware/htmx-extensions

Cannot update element of SVG image through websocket

Open
#187 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.