added module for HTMX WS extension #9
Conversation
| struct WSURLPrefix { | ||
| var value: String | ||
|
|
||
| public static func ws(_ url: String) -> Self { | ||
| .init(value: "ws:\(url)") | ||
| } | ||
|
|
||
| public static func wss(_ url: String) -> Self { | ||
| .init(value: "wss:\(url)") | ||
| } | ||
| } | ||
|
|
||
| static func connect(_ prefixedURL: WSURLPrefix) -> HTMLAttribute { | ||
| connect(prefixedURL.value) | ||
| } |
There was a problem hiding this comment.
this feels a bit too much. isn't just string enough?
There was a problem hiding this comment.
Yes, probably true—couldn't decide on whether to add or not to add it.
There was a problem hiding this comment.
I think it should go - less API surface
There was a problem hiding this comment.
I think the examples should be a bit cleaner - currently it is visually quite messy and not clear what is happening.
If we do a ping-pong, we could add a name text box or something and have the WS route return a greeting or something similar. maybe a random number generator - something that is not so ugly on the UI ; )
| func addWSRoutes(to router: Router<some WebSocketRequestContext>) { | ||
| router.ws("echo") { _, _ in | ||
| .upgrade([:]) | ||
| } onUpgrade: { inbound, outbound, _ in | ||
| // parse WebSocket frames | ||
| for try await frame in inbound { | ||
| if frame.opcode == .text, String(buffer: frame.data) == "disconnect", frame.fin == true { | ||
| break | ||
| } | ||
| let opcode: WebSocketOpcode = switch frame.opcode { | ||
| case .text: .text | ||
| case .binary: .binary | ||
| case .continuation: .continuation | ||
| } | ||
| let frame = WebSocketFrame( | ||
| fin: frame.fin, | ||
| opcode: opcode, | ||
| data: frame.data | ||
| ) | ||
| try await outbound.write(.text("<div id=\"echo\">Received: \(String(buffer: frame.data))</div>")) | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
this feels awfully complicated - I am sure there is a cleaner way somehow
| @@ -29,4 +29,11 @@ func addRoutes(to app: Application) { | |||
| }) | |||
| ) | |||
| } | |||
|
|
|||
| app.webSocket("echo") { req, ws in | |||
| print(req) | |||
| div(.hx.ext(.sse), .sse.connect("/time")) { | ||
| p(.sse.swap("time")) { "Server Time:" } | ||
| } | ||
| // example of using htmx ws | ||
| div(.hx.ext(.ws), .ws.connect("/echo"), .hx.vals("{ \"value\": \"TestValue\"}"), .hx.swapOOB(.innerHTML), .hx.target("#echo"), .class("flex justify-between")) { |
There was a problem hiding this comment.
for json strings #"..."# would be nicer
or ideally have the data come from a text input or something
|
|
||
| ## Future directions | ||
|
|
||
| - Add module for [WebSockets extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/ws/README.md) |
There was a problem hiding this comment.
We should add a little chapter to show there is a WS module now as well
| struct WSURLPrefix { | ||
| var value: String | ||
|
|
||
| public static func ws(_ url: String) -> Self { | ||
| .init(value: "ws:\(url)") | ||
| } | ||
|
|
||
| public static func wss(_ url: String) -> Self { | ||
| .init(value: "wss:\(url)") | ||
| } | ||
| } | ||
|
|
||
| static func connect(_ prefixedURL: WSURLPrefix) -> HTMLAttribute { | ||
| connect(prefixedURL.value) | ||
| } |
There was a problem hiding this comment.
I think it should go - less API surface
No description provided.