this is where it should filter out your chat widget, nav, etc.

ok, yeah makes sense

and then we swap it in

these two methods are the entirety of restoring history, so it shouldn't be too hard to debug and see what's going on

the history API is a little bonkers, so I would not be surprised if there is a subtle bug here

hahah, ok I'll try to mess around with those functions, thanks for the help

yep, it's not a ton of code, so you should see what's going on after a few minutes and you can then make fun of me here

I'll let you know if I get it working 😄

javascript mutations of the DOM are tough

we can restore the DOM, but all the event handlers and non-DOM state... :/

Yeah I know We needed so much more robust framework for the project than we thought so we're slowly migrating to React at the moment, but I really need to get this history thing working even though it's going to be legacy soon. Can't have pissed off customers. 😆

Ok well this is fairly interesting... I started debuggin with the non-minified version by adding a few console.logs just to see what's going on with the response, and now the site seems to work perfectly (???)

🤮

is minification causing issues?

I will lose my everlasting mind if that's the case

@User ☝️ maybe this is the issue w/ history?

Well I can't think of anything other I did but loaded the non minified version, and trust me I've banged my head with this issue for days, maybe even weeks lol

the history still doesn't load perfectly but now at least the chat and navi don't break, which was definitely the bigger issue

and I think I can tinker a bit to get the history to work now too

for some comic relief, what I did last time when I thought "F*ck it, they won't notice" with the history bug:

js
htmx.on("htmx:historyCacheMiss", function(){
  location.reload();
})

Just trying to make sure I'm not crazy here. If I should move this to StackOverflow, or raise an Issue, let me know. Looks like the docs suggest two different approaches to WebSocket connections: hx-ws="connect wss:/chatroom" vs hx-ws="connect:/chatroom" https://htmx.org/docs/#websockets-and-sse shows this:

<div hx-ws="connect wss:/chatroom">
    <div id="chat_room">
      ...
    </div>
    <form hx-ws="send:submit">
        <input name="chat_message">
    </form>
</div>

Which is the approach I'd like. I want to specify

ws:

if I'm on local and

wss:

otherwise (I can swap the prefix via django templates very easily) When I do so, though, I get this error:

htmx.js:1054 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at processWebSocketSource (htmx.js:1054)
    at processWebSocketInfo (htmx.js:1045)
    at initNode (htmx.js:1316)
    at htmx.js:1325
    at forEach (htmx.js:209)
    at processNode (htmx.js:1325)
    at HTMLDocument.<anonymous> (htmx.js:2317)

Using the approach at https://htmx.org/attributes/hx-ws/ I do this

<div hx-ws="connect:/chatroom">
    <div id="chat_room">
      ...
    </div>
    <form hx-ws="send">
        <input name="chat_message">
    </form>
</div>

But HTMX automatically substitutes

wss:

as the prefix:

function processWebSocketSource(elt, wssSource) {
    if (wssSource.indexOf("ws:") !== 0 && wssSource.indexOf("wss:") !== 0) {
        wssSource = "wss:" + wssSource;
    }

    ...

Should that first approach be working, or am I confused somewhere? Still pretty new to WebSockets, so it may just be me.

seriously considering making that an option

if I can't get history working poroperly

here's the line in question:

looks like an error in the syntax handling to me

Seems like it's not actually splitting on whitespace.

hx-ws="connect ws:/chatroom"

does not work

hx-ws="connect:ws:/chatroom"

does

yes, iirc @User was making some changes in here

from what I can see

hx-ws="connect:ws:/chatroom"

is the correct syntax