Live removal of issue comments using htmx websocket

go.mod

@@ -82,6 +82,7 @@ require (
 	github.com/msteinert/pam v1.2.0
 	github.com/nektos/act v0.2.52
 	github.com/niklasfasching/go-org v1.7.0
+	github.com/olahol/melody v1.1.4
 	github.com/olivere/elastic/v7 v7.0.32
 	github.com/opencontainers/go-digest v1.0.0
 	github.com/opencontainers/image-spec v1.1.0-rc6
@@ -210,6 +211,7 @@ require (
 	github.com/gorilla/handlers v1.5.2 // indirect
 	github.com/gorilla/mux v1.8.1 // indirect
 	github.com/gorilla/securecookie v1.1.2 // indirect
+	github.com/gorilla/websocket v1.5.0 // indirect
 	github.com/hashicorp/go-cleanhttp v0.5.2 // indirect
 	github.com/hashicorp/go-retryablehttp v0.7.5 // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect

go.sum

@@ -514,6 +514,8 @@ github.com/gorilla/sessions v1.1.1/go.mod h1:8KCfur6+4Mqcc6S0FEfKuN15Vl5MgXW92AE
 github.com/gorilla/sessions v1.2.0/go.mod h1:dk2InVEVJ0sfLlnXv9EAgkf6ecYs/i80K/zI+bUmuGM=
 github.com/gorilla/sessions v1.2.2 h1:lqzMYz6bOfvn2WriPUjNByzeXIlVzURcPmgMczkmTjY=
 github.com/gorilla/sessions v1.2.2/go.mod h1:ePLdVu+jbEgHH+KWw8I1z2wqd0BAdAQh/8LRvBeoNcQ=
+github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/hashicorp/go-cleanhttp v0.5.2 h1:035FKYIWjmULyFRBKPs8TBQoi0x6d9G4xc9neXJWAZQ=
 github.com/hashicorp/go-cleanhttp v0.5.2/go.mod h1:kO/YDlP8L1346E6Sodw+PrpBSV4/SoxCXGY6BqNFT48=
 github.com/hashicorp/go-hclog v0.9.2/go.mod h1:5CU+agLiy3J7N7QjHK5d05KxGsuXiQLrjA0H7acj2lQ=
@@ -696,6 +698,8 @@ github.com/nxadm/tail v1.4.8 h1:nPr65rt6Y5JFSKQO7qToXr7pePgD6Gwiw05lkbyAQTE=
 github.com/nxadm/tail v1.4.8/go.mod h1:+ncqLTQzXmGhMZNUePPaPqPvBxHAIsmXswZKocGu+AU=
 github.com/oklog/ulid v1.3.1 h1:EGfNDEx6MqHz8B3uNV6QAib1UR2Lm97sHi3ocA6ESJ4=
 github.com/oklog/ulid v1.3.1/go.mod h1:CirwcVhetQ6Lv90oh/F+FBtV6XMibvdAFo93nm5qn4U=
+github.com/olahol/melody v1.1.4 h1:RQHfKZkQmDxI0+SLZRNBCn4LiXdqxLKRGSkT8Dyoe/E=
+github.com/olahol/melody v1.1.4/go.mod h1:GgkTl6Y7yWj/HtfD48Q5vLKPVoZOH+Qqgfa7CvJgJM4=
 github.com/olekukonko/tablewriter v0.0.5 h1:P2Ga83D34wi1o9J6Wh1mRuqd4mF/x/lgBS7N7AbDhec=
 github.com/olekukonko/tablewriter v0.0.5/go.mod h1:hPp6KlRPjbx+hW8ykQs1w3UBbZlj6HuIJcUGPhkA7kY=
 github.com/olivere/elastic/v7 v7.0.32 h1:R7CXvbu8Eq+WlsLgxmKVKPox0oOwAE/2T9Si5BnvK6E=

modules/context/response.go

@@ -4,6 +4,9 @@
 package context
 
 import (
+	"bufio"
+	"errors"
+	"net"
 	"net/http"
 
 	web_types "code.gitea.io/gitea/modules/web/types"
@@ -30,6 +33,14 @@ type Response struct {
 	status         int
 	befores        []func(ResponseWriter)
 	beforeExecuted bool
+	hijacker       http.Hijacker
+}
+
+func (r *Response) Hijack() (net.Conn, *bufio.ReadWriter, error) {
+	if r.hijacker == nil {
+		return nil, nil, errors.New("http.Hijacker not implemented by underlying http.ResponseWriter")
+	}
+	return r.hijacker.Hijack()
 }
 
 // Write writes bytes to HTTP endpoint
@@ -95,9 +106,11 @@ func WrapResponseWriter(resp http.ResponseWriter) *Response {
 	if v, ok := resp.(*Response); ok {
 		return v
 	}
+	hijacker, _ := resp.(http.Hijacker)
 	return &Response{
 		ResponseWriter: resp,
 		status:         0,
 		befores:        make([]func(ResponseWriter), 0),
+		hijacker:       hijacker,
 	}
 }

package.json

@@ -25,6 +25,7 @@
     "esbuild-loader": "4.0.2",
     "escape-goat": "4.0.0",
     "fast-glob": "3.3.2",
+    "htmx.org": "1.9.10",
     "jquery": "3.7.1",
     "katex": "0.16.9",
     "license-checker-webpack-plugin": "0.2.1",

routers/web/web.go

@@ -41,6 +41,7 @@ import (
 	"code.gitea.io/gitea/routers/web/user"
 	user_setting "code.gitea.io/gitea/routers/web/user/setting"
 	"code.gitea.io/gitea/routers/web/user/setting/security"
+	"code.gitea.io/gitea/routers/web/websocket"
 	auth_service "code.gitea.io/gitea/services/auth"
 	context_service "code.gitea.io/gitea/services/context"
 	"code.gitea.io/gitea/services/forms"
@@ -541,6 +542,8 @@ func registerRoutes(m *web.Route) {
 
 	m.Any("/user/events", routing.MarkLongPolling, events.Events)
 
+	websocket.Init(m)
+
 	m.Group("/login/oauth", func() {
 		m.Get("/authorize", web.Bind(forms.AuthorizationForm{}), auth.AuthorizeOAuth)
 		m.Post("/grant", web.Bind(forms.GrantApplicationForm{}), auth.GrantApplicationOAuth)

routers/web/websocket/websocket.go

@@ -0,0 +1,43 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package websocket
+
+import (
+	"time"
+
+	"code.gitea.io/gitea/modules/context"
+	"code.gitea.io/gitea/modules/web"
+
+	"github.com/olahol/melody"
+)
+
+var m *melody.Melody
+
+func Init(r *web.Route) {
+	m = melody.New()
+	r.Any("/ui-updates", WebSocket)
+	m.HandleMessage(HandleMessage)
+
+	go func() {
+		for {
+			// TODO: send proper updated html
+			err := m.Broadcast([]byte("<div hx-swap-oob=\"beforebegin:.timeline-item.comment.form\"><div class=\"hello\">hello world!</div></div>"))
+			if err != nil {
+				break
+			}
+			time.Sleep(5 * time.Second)
+		}
+	}()
+}
+
+func WebSocket(ctx *context.Context) {
+	err := m.HandleRequest(ctx.Resp, ctx.Req)
+	if err != nil {
+		ctx.ServerError("HandleRequest", err)
+	}
+}
+
+func HandleMessage(s *melody.Session, msg []byte) {
+	// TODO: Handle incoming messages
+}

templates/base/head.tmpl

@@ -29,7 +29,7 @@
 	{{template "base/head_style" .}}
 	{{template "custom/header" .}}
 </head>
-<body>
+<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-push-url="false" hx-ext="ws" ws-connect="/ui-updates">
 	{{ctx.DataRaceCheck $.Context}}
 	{{template "custom/body_outer_pre" .}}
 

web_src/js/features/common-global.js

@@ -12,7 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
 import {request, POST} from '../modules/fetch.js';
-
+import '../htmx.js';
 const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
 
 export function initGlobalFormDirtyLeaveConfirm() {

web_src/js/htmx.js

@@ -0,0 +1,31 @@
+import * as htmx from "htmx.org";
+import { showErrorToast } from "./modules/toast.js";
+import { ws } from "./ws.js";
+
+window.htmx = htmx;
+
+// TODO: https://github.com/bigskysoftware/htmx/issues/1690
+ws();
+// import("htmx.org/dist/ext/ws.js");
+
+console.log("htmx.js loaded", htmx.version, htmx);
+
+// https://htmx.org/reference/#config
+htmx.config.requestClass = "is-loading";
+htmx.config.scrollIntoViewOnBoost = false;
+
+// https://htmx.org/events/#htmx:sendError
+document.body.addEventListener("htmx:sendError", (event) => {
+  // TODO: add translations
+  showErrorToast(
+    `Network error when calling ${event.detail.requestConfig.path}`
+  );
+});
+
+// https://htmx.org/events/#htmx:responseError
+document.body.addEventListener("htmx:responseError", (event) => {
+  // TODO: add translations
+  showErrorToast(
+    `Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`
+  );
+});