search

jfyne / live

Live views and components for golang
https://discord.gg/TuMNaXJMUG
MIT License
655 stars 27 forks source link

examples/clock: works with Firefox but not Chrome #25

Closed candlerb closed 2 years ago

candlerb commented 3 years ago

Environment

go version go1.16.5 darwin/amd64 macOS 10.14.6 chrome 91.0.4472.164 firefox 90.0.1

To replicate

git clone git@github.com:jfyne/live-examples.git
cd live-examples/clock
go build .
cd ..
clock/clock

Point browser at http://localhost:8080/clock

What I expected

Incrementing clock

What I saw

With Firefox, everything is OK.

With Chrome, current time is displayed, but does not increment.

tcpdump shows that websocket messages are being sent every second:

$ sudo tcpdump -i lo0 -nn -s0 -A tcp port 8080
...
08:47:28.831040 IP6 ::1.8080 > ::1.50406: Flags [P.], seq 1:269, ack 810, win 6359, options [nop,nop,TS val 1005537220 ecr 1005537219], length 268: HTTP: HTTP/1.1 101 Switching Protocols
`....,.@.....................................p.#...v.....4.....
;.G.;.G.HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Sec-Websocket-Accept: J1GHBBuREgeNFGWhZQUIYbi8YQ4=
Sec-Websocket-Extensions: permessage-deflate; client_no_context_takeover; server_no_context_takeover
Upgrade: websocket
Date: Thu, 22 Jul 2021 07:47:28 GMT

08:47:28.831077 IP6 ::1.50406 > ::1.8080: Flags [.], ack 269, win 6367, options [nop,nop,TS val 1005537220 ecr 1005537220], length 0
`..f. .@.......................................v.p /.....(.....
;.G.;.G.
08:47:28.831177 IP6 ::1.8080 > ::1.50406: Flags [P.], seq 269:288, ack 810, win 6359, options [nop,nop,TS val 1005537220 ecr 1005537220], length 19: HTTP
`....3.@.....................................p /...v.....;.....
;.G.;.G...{"t":"connect"}..
08:47:28.831197 IP6 ::1.50406 > ::1.8080: Flags [.], ack 288, win 6367, options [nop,nop,TS val 1005537220 ecr 1005537220], length 0
`..f. .@.......................................v.p B.....(.....
;.G.;.G.
08:47:29.834266 IP6 ::1.8080 > ::1.50406: Flags [P.], seq 288:471, ack 810, win 6359, options [nop,nop,TS val 1005538221 ecr 1005537220], length 183: HTTP
`......@.....................................p B...v...........
;.K.;.G..~..{"t":"patch","d":[{"Path":[0,0],"Action":2,"HTML":"\u003ctitle\u003e 08:47:29 \u003c/title\u003e"},{"Path":[1,0],"Action":2,"HTML":"\u003ctime\u003e08:47:29\u003c/time\u003e"}]}..
08:47:29.834302 IP6 ::1.50406 > ::1.8080: Flags [.], ack 471, win 6364, options [nop,nop,TS val 1005538221 ecr 1005538221], length 0
`..f. .@.......................................v.p ......(.....
;.K.;.K.
08:47:30.839156 IP6 ::1.8080 > ::1.50406: Flags [P.], seq 471:654, ack 810, win 6359, options [nop,nop,TS val 1005539224 ecr 1005538221], length 183: HTTP
`......@.....................................p ....v...........
;.O.;.K..~..{"t":"patch","d":[{"Path":[0,0],"Action":2,"HTML":"\u003ctitle\u003e 08:47:30 \u003c/title\u003e"},{"Path":[1,0],"Action":2,"HTML":"\u003ctime\u003e08:47:30\u003c/time\u003e"}]}..
08:47:30.839203 IP6 ::1.50406 > ::1.8080: Flags [.], ack 654, win 6361, options [nop,nop,TS val 1005539224 ecr 1005539224], length 0
`..f. .@.......................................v.p!......(.....
;.O.;.O.
08:47:31.842699 IP6 ::1.8080 > ::1.50406: Flags [P.], seq 654:837, ack 810, win 6359, options [nop,nop,TS val 1005540226 ecr 1005539224], length 183: HTTP
`......@.....................................p!....v...........
;.S.;.O..~..{"t":"patch","d":[{"Path":[0,0],"Action":2,"HTML":"\u003ctitle\u003e 08:47:31 \u003c/title\u003e"},{"Path":[1,0],"Action":2,"HTML":"\u003ctime\u003e08:47:31\u003c/time\u003e"}]}..
08:47:31.842764 IP6 ::1.50406 > ::1.8080: Flags [.], ack 837, win 6358, options [nop,nop,TS val 1005540226 ecr 1005540226], length 0
`..f. .@.......................................v.p"g.....(.....
;.S.;.S.

I don't see any errors in browser console, although network shows stuck at "101 Switching Proto..."

image

Additional info

With both Chrome and Firefox, closing the browser tab logs the following at the server side:

2021/07/22 08:47:01 ws closed with status (-1): writing to socket error: failed writeTimeout: json: error calling MarshalJSON for type json.RawMessage: invalid character 'i' in literal false (expecting 'l')

I suspect an error message starting with the word "fail" has been put in RawMessage field without being quoted, e.g. see https://play.golang.org/p/w9Vuc8Ko_fN

EDIT: now raised separately as #26

jfyne commented 3 years ago

I can't replicate this although sometimes I see something similar happening in Firefox. I will keep trying

AnaelBerrouet commented 2 years ago

Just to bump this. I'm not sure if I should create an additional issue. But I am seeing a failures for buttons as well.

I initally as aiming to use live in one of my projects directly but started facing issues with the client side code which then led to try implementing the simplest example. Following nearly identical process as candlerb, I ran buttons on chrome and inc and dec are throwing error client side: patch.ts:35 unhandled patch, path target undefined

Safari works without issue.

jfyne commented 2 years ago

Thanks for the report, I will see if I can replicate this today.

jfyne commented 2 years ago

@AnaelBerrouet I can't replicate this on Chrome or Firefox.

The error you are seeing indicates that the client side is connected to the server, and is receiving patches to the dom. What is is saying is it can't find the node to patch. Do you have any browser extensions installed?

AnaelBerrouet commented 2 years ago

Hey @jfyne thanks for reaching out, I really appreciate it! yea I realized that it was coming through but found it funny that it couldn't patch the node. I definitely do have browser extensions installed. Could you explain what you think is going on with them? Meanwhile I'll try and disable them and run the project again. I'd be interested to understand the issue and to see if there'd be a workaround in the case of people with chrome extensions (there are many of them lol)

jfyne commented 2 years ago

The way the current patching logic works relies on the node structure being what the server expects it to be. I wonder about extensions because they can inject extra nodes.

What might be useful is if you could take a screenshot of your DOM structure so I can compare it to what is expected.

I've been thinking about how I can make it less brittle, I have some ideas but it would be still be good to figure out what is going on in your case to help guide any changes that need to be made.

AnaelBerrouet commented 2 years ago

I'll do that today! It's early here so gonna get a coffee first. Also as an aside, thanks for this repo! I started using Phoenix live view and instantly started thinking about how great it would be to do that in golang, and here it is!

jfyne commented 2 years ago

Closing this now so as not to spam @candlerb