diff --git a/test/servers/ws/README.md b/test/servers/ws/README.md index f1b78ae8..fbb62333 100644 --- a/test/servers/ws/README.md +++ b/test/servers/ws/README.md @@ -1,10 +1,10 @@ # WebSocket - Test Server -This package implements a bare-bones WebSocket server for testing htmx. It can be used in conjunction with the manual tests in the `/test/manual` directory. +This package implements a test-suite WebSocket server for testing htmx. ## What It Does -This listens for incoming WebSocket connections coming in to ws://localhost:1323/echo. When it receives messages from any WebSocket client, it responds with that same content in a way that htmx can process. This means, that the response message will look like this: `
{your message here}
` +This server listens for incoming WebSocket connections coming in to ws://localhost:1323/echo. When it receives messages from any WebSocket client, it responds with that same content in a way that htmx can process. This means, that the response message will look like this: `
{your message here}
` ## How to Use This Server diff --git a/test/servers/ws/server.go b/test/servers/ws/server.go index 8182f917..5d06c5a1 100644 --- a/test/servers/ws/server.go +++ b/test/servers/ws/server.go @@ -1,35 +1,45 @@ package main import ( + "math/rand" + "strconv" + "time" + "github.com/labstack/echo/v4" "github.com/labstack/echo/v4/middleware" "golang.org/x/net/websocket" ) +func wsHeartbeat(c echo.Context) error { + + handler := websocket.Handler(func(ws *websocket.Conn) { + + defer ws.Close() + + for i := 0; ; i = i + 1 { + + time.Sleep(1 * time.Second) + + random := rand.Int() + message := `
Message ` + strconv.Itoa(i) + `: ` + strconv.Itoa(random) + `
` + + if err := websocket.Message.Send(ws, message); err != nil { + c.Logger().Error("send", err) + return + } + } + }) + + handler.ServeHTTP(c.Response(), c.Request()) + return nil +} + func wsEcho(c echo.Context) error { handler := websocket.Handler(func(ws *websocket.Conn) { defer ws.Close() - /* - var done chan<- bool - - defer func() { - close(done) - ws.Close() - }() - - go func() { - for i := 0; ; i = i + 1 { - time.Sleep(10 * time.Second) - if done == nil { - return - } - websocket.Message.Send(ws, "ping #"+strconv.Itoa(i)) - } - }() - */ for { msg := "" @@ -57,9 +67,10 @@ func main() { e.Use(middleware.Logger()) e.Use(middleware.Recover()) - e.Static("/", "../static") + e.Static("/", "./static") e.Static("/htmx", "../../../src") e.GET("/echo", wsEcho) - e.Logger.Fatal(e.Start(":1323")) + e.GET("/heartbeat", wsHeartbeat) + e.Logger.Fatal(e.Start(":80")) } diff --git a/test/servers/ws/static/index.html b/test/servers/ws/static/index.html new file mode 100644 index 00000000..90d04519 --- /dev/null +++ b/test/servers/ws/static/index.html @@ -0,0 +1,64 @@ + + + + </> htmx WebSocket Server + + + + + + + + + + +
+

WebSockets Extension Tests

+ +

As of version 1.7, WebSocket support has been moved out of the core htmx library and into an extension. This server runs a test suite for the htmx WebSocket extension.

+

This extension connects to a WebSocket echo server and can send and receive messages to and from the server.

+ +

Required Attributes

+ + + + + + + + + + + + + +
hx-extMake sure the SSE extension is initialized on every page or page fragment where you use SSE streams.
ws-connectConnects to a WebSocket server. Attribute value must begin with ws:// wss://
ws-sendAdd to a form to submit form data to the websocket server instead of to an HTTP server.
+ +

Example Code

+ +
+<body hx-ext="ws">
+    <div ws-connect="wss://my.websocket.server.com"></div>
+
+	<form ws-send>
+		<input name="WebSocketMessage">
+	<form/>
+</body>
+
+

WebSocket Resources

+ +
+ + \ No newline at end of file diff --git a/test/servers/ws/static/stylesheet.css b/test/servers/ws/static/stylesheet.css new file mode 100644 index 00000000..adccb158 --- /dev/null +++ b/test/servers/ws/static/stylesheet.css @@ -0,0 +1,112 @@ +*{ + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + box-sizing: border-box; +} + +body { + background-color: white; + padding:0px; + margin:0px; + width:100%; +} + +#header { + width:100%; + height: 100px; + background-image:url('white_transparent.svg'); + background-position:left 50px center; + background-repeat:no-repeat; + background-size: 300px; + background-color:black; +} + +#navigation { + position:absolute; + width:150px; + margin-top:50px; + margin-left:20px; + white-space: nowrap; +} + +#navigation > a { + display:block; + cursor: pointer; + text-decoration:none; + padding:10px 20px; +} + +#navigation > a:hover { + background-color:#eee; +} + +#navigation > a.selected { + font-weight:bold; +} + +#page { + margin: 50px; + padding-left:150px; +} + +.container { + padding: 10px; + border: solid 1px gray; + margin-bottom: 20px; + background-color:#f7f7f7; +} + +.container.htmx-settling { + border:solid 3px red!important; + padding:8px!important; +} + +pre.code { + font-family:'Courier New', Courier, monospace; + background-color: #444440; + color: #0f0; + padding:30px 5px 30px 15px; + overflow-y:scroll; + display:block; +} + +.bold { + font-weight:bold; +} + +.nowrap { + white-space: nowrap; +} + +table { + border-collapse: collapse; +} + +td { + padding:10px 20px; + border:solid 1px #ddd; + vertical-align: top; +} + +.demo { + padding:10px; + margin:20px 0px; + color:white; + background-color: #999; + height:100px; +} + +a, a:visited { + color:#3465a4; +} + + +.btn { + padding:5px 10px; + border:none; + border-radius:5px; +} + +.btn.primary { + background-color:#3465a4; + color:white; +} \ No newline at end of file diff --git a/test/servers/ws/static/websockets.html b/test/servers/ws/static/websockets.html deleted file mode 100644 index 45bbcdee..00000000 --- a/test/servers/ws/static/websockets.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - WebSockets Test - - - - -
-
Send Message to Echo Server...
-
- - -
-
- -

-
- - diff --git a/test/servers/ws/static/ws-echo.html b/test/servers/ws/static/ws-echo.html new file mode 100644 index 00000000..87dea8ca --- /dev/null +++ b/test/servers/ws/static/ws-echo.html @@ -0,0 +1,33 @@ +

Echo Test

+

Description

+

This test lets you send and receive data to and from the WebSocket server. Every message that you send to the server will be "echoed" +back to you in a separate message

+ +

Example HTML

+ +
+<div hx-ext="ws" ws-connect="ws://localhost/echo">
+
+    <form ws-send>
+        <input type="text" name="message" style="width:500px;" value="This Is The Message" />
+        <input type="submit"/>
+    </form>
+
+    <div id="idMessage"></div>
+</div>
+
+ +
+ +
+

Send a Message

+
+ + +
+
+ +
+

Receive a Message

+
+
\ No newline at end of file diff --git a/test/servers/ws/static/ws-heartbeat.html b/test/servers/ws/static/ws-heartbeat.html new file mode 100644 index 00000000..0844a7e6 --- /dev/null +++ b/test/servers/ws/static/ws-heartbeat.html @@ -0,0 +1,17 @@ +

Heartbeat Test

+

Description

+

This test receives messages from the WebSocket server every second. + +

Example HTML

+ +
+<div hx-ext="ws" ws-connect="ws://localhost/heartbeat">
+    <div id="idMessage"></div>
+</div>
+
+ +
+

WebSocket Messages

+

Each message just contains a random number generated by the server

+
Waiting...
+
\ No newline at end of file