feat: stream room updates SSE endpoint

via subscription to redis with enriched channel
This commit is contained in:
efim
2023-11-12 18:01:42 +00:00
parent 34d610a8c8
commit b90fcc3f20
6 changed files with 163 additions and 88 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Room {{ .RoomName }} : Some Automoderation</title>
<title>Room {{ .Room.Name }} : Some Automoderation</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -30,32 +30,30 @@
</p>
<![endif]-->
<div class="h-full w-full grid">
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
<!-- <div id="state-receival" class="bg-blue-300 hidden md:block" -->
<!-- hx-ext="sse" sse-connect="/rooms/random" -->
<!-- > -->
<!-- <div> yoyo </div> -->
<!-- <div sse-swap="message"> qweopop </div> -->
<!-- </div> -->
<!-- should be done with custom event for screen change -->
<!-- <div id="state-receival" class="bg-blue-100 md:hidden" -->
<!-- hx-ext="sse" sse-connect="/rooms/random?mobile=true" -->
<!-- > -->
<!-- <div> qoqo </div> -->
<!-- <div sse-swap="message"> qweopop </div> -->
<!-- </div> -->
<div id="controls" class="bg-green-300">
koko
{{ range .Gestures }}
<button
hx-get="{{ .Url }}"
class="bg-white rounded border-blue-700 border-2"
>
{{ .Name }}
</button>
{{ end }}
</div>
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
<div
id="roomTextContainer"
class="bg-blue-200"
hx-ext="sse"
sse-connect="/rooms/subscribe?roomName=test"
>
{{ block "simpleRoomShow" .Room }}
<!-- TODO use template, not block, have only 'loader' in base place -->
<!-- use different template based on 'mobile' query param -->
<div sse-swap="message">{{ . }}</div>
{{ end }}
</div>
<div id="controls" class="bg-green-300">
<p>Room name is "{{ .Room.Name }}"</p>
{{ range .Gestures }}
<button
hx-get="{{ .Url }}"
class="bg-white rounded border-blue-700 border-2"
>
{{ .Name }}
</button>
{{ end }}
</div>
</div>
</body>
</html>