Websocket example

[ghost]

Any chance of including a websocket example using HTMX? I haven't been able to get the official docs example to work, but I'm probably overlooking something. Anyway, would be nice to establish a pattern for it here.

[mikestefanello]

I'm glad to include an example if someone wants to work on it. It's not something I have time to do right now, but if that changes, I'll consider putting something together.

[ghost]

I was going to contribute an example but was unable to invoke the websocket handler function from the echo route group. I must be doing something wrong there. Not sure, but I think it's re-rendering the outer page, since it's set to render that page on GET of the outer route before it reaches the websocket route?

router.go

	wsocket := wsocket{Controller: ctr}
	g.GET("/wsocket", wsocket.Get, middleware.RequireAuthentication()).Name = "wsocket"
	g.GET("/terminal", wsocket.Terminal).Name = "terminal"

websocket.go

package routes

import (
	"fmt"

	"github.com/mikestefanello/pagoda/pkg/controller"

	"github.com/labstack/echo/v4"
	"golang.org/x/net/websocket"
)

type (
	wsocket struct {
		controller.Controller
	}
)

func (c *wsocket) Get(ctx echo.Context) error {
	page := controller.NewPage(ctx)
	page.Layout = "main"
	page.Name = "wsocket"
	page.Title = "Websocket Shell"

	return c.RenderPage(ctx, page)
}

func (c *wsocket) Terminal(ctx echo.Context) error {
	websocket.Handler(func(ws *websocket.Conn) {
		defer ws.Close()
		for {
			// Write
			err := websocket.Message.Send(ws, "Hello, Client!")
			if err != nil {
				ctx.Logger().Error(err)
			}

			// Read
			msg := ""
			err = websocket.Message.Receive(ws, &msg)
			if err != nil {
				ctx.Logger().Error(err)
			}
			fmt.Printf("%s\n", msg)
		}
	}).ServeHTTP(ctx.Response(), ctx.Request())
	return nil
}

websocket.gohtml

{{define "content"}}
  <div hx-ext="ws" ws-connect="/wsocket/terminal">
    <div hx-boost="true" id="chat_room" hx-swap-oob="morphdom">
      hello
    </div>
    {{template "form" .}}

  </div>
{{end}}

{{define "form"}}
  <form id="form" ws-send >
    <input name="chat_message">
  </form>
{{end}}

[mikestefanello]

I tried both examples here and could not get either of them to work. If you've been able to get it working, please let me know how.

[mikestefanello]

I'm going to close this and not include a websocket example. If someone wants to share a working one, I'll definitely be interesting in including it.