Skip to content

Commit

Permalink
refactor: handle additional static asset files
Browse files Browse the repository at this point in the history
  • Loading branch information
@wheresalice
wheresalice committed May 22, 2021
1 parent 5e5e497 commit 7866f86
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 108 deletions.
10 changes: 10 additions & 0 deletions Caddyfile
View file
Expand Up @@ -8,6 +8,10 @@
path root /
}

@assets {
path assets /assets/*
}

route @room {
rewrite * /room.html
file_server {
Expand All @@ -22,4 +26,10 @@ route @root {
}
}

route @assets {
file_server {
root /srv
}
}

reverse_proxy meetingmood:8844
2 changes: 1 addition & 1 deletion README.md
View file
Expand Up @@ -37,7 +37,7 @@ You can optionally:

For purely-frontend development we provide a handy docker-compose environment which will let you make changes to the html without needing Go.

Running `docker-compose up` will launch a Caddy proxy listening on http://localhost:8800/ as well as building and launching the checked-out Go code. You can then make changes to the html pages and refresh the browser without needing to rebuild any of the backend components.
Running `docker-compose up` will launch a Caddy proxy listening on http://localhost:8800/ as well as building and launching the checked-out Go code. You can then make changes to index.html, room.html, and anything in the assets directory and refresh the browser without needing to rebuild any of the backend components.

## Donations

Expand Down
16 changes: 16 additions & 0 deletions assets/room.css
View file
@@ -0,0 +1,16 @@
* {
font-family: 'Fira Code', monospace;
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: #6d6875;
text-align: center;
}
button
{
margin:5px;
}
89 changes: 89 additions & 0 deletions assets/room.js
View file
@@ -0,0 +1,89 @@
const app = new Vue({
el: '#app',
data: {
user: '',
room: undefined,
moods: [
"Agree",
"Agree and volunteer",
"Response",
"Direct response",
"Technical point",
"Language",
"Speak up",
"Slow down",
"I'm confused",
"Veto"
],
userMoods: []
},
methods: {
deleteUserMood: function (username = this.user) {
const body = JSON.stringify({
username: username,
roomUser: `${this.room}${username}`
})
fetch(`/${this.room}/delete`, {
method: 'post',
body: body
})
},
sendMood: function (mood) {
// 2419200 is 28 days - the username cookie will expire if you don't use it for four weeks
document.cookie = `username=${this.user};max-age=2419200;SameSite=Strict`
const message = JSON.stringify({
username: this.user,
mood: mood,
room: this.room,
roomUser: `${this.room}${this.user}`
})
fetch(`/${this.room}/mood`, {
method: 'post',
body: message
})
},
}
})

window.onload = function () {
try {
app.user = document.cookie.split("; ").find(row => row.startsWith("username=")).split('=')[1]
} catch (e) {
console.log(e)
console.log("New user")
}
app.room = location.pathname.split("/")[1]


const socketAddr = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + window.location.pathname + "/ws"
const moodSocket = new ReconnectingWebSocket(socketAddr);
const update = function () {
moodSocket.onopen = function () {
console.log(`(re)-connected to ${socketAddr}`)
app.userMoods = []
fetch(`/${app.room}/all`)
.then(res => res.json())
.then((all) => {
if (all != null) {
all.forEach(mood => {
app.userMoods.push(mood)
})
}
})
}
moodSocket.onmessage = function (event) {
const moodOperation = JSON.parse(event.data)
const mood = {username: moodOperation.username, mood: moodOperation.mood}
switch (moodOperation.operation) {
case "Delete":
// delete
app.userMoods = app.userMoods.filter(item => item.username != mood.username)
break;
case "Save":
app.userMoods = app.userMoods.filter(item => item.username != mood.username)
app.userMoods.push(mood)
}
}
};
window.setTimeout(update);
}
2 changes: 2 additions & 0 deletions index.html
View file
Expand Up @@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<title>Meeting Moods</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Fira Code', monospace;
Expand Down
15 changes: 13 additions & 2 deletions main.go
View file
@@ -1,11 +1,12 @@
package main

import (
_ "embed"
"embed"
"encoding/json"
"flag"
"github.com/gorilla/mux"
"github.com/gorilla/websocket"
"io/fs"
"io/ioutil"
"log"
"net"
Expand All @@ -22,7 +23,6 @@ type moodOperatorStruct struct {
}

var (
//clients = make(map[*websocket.Conn]bool)
clients = make(map[Client]bool)
broadcast = make(chan *moodOperatorStruct)
upgrader = websocket.Upgrader{
Expand Down Expand Up @@ -50,6 +50,9 @@ var index string
//go:embed room.html
var room string

//go:embed assets/*
var assets embed.FS

func main() {
flag.Parse()
app := App{
Expand All @@ -68,13 +71,21 @@ func main() {
router.HandleFunc("/{room:[0-9]+}/ws", wsHandler)
router.HandleFunc("/{room:[0-9]+}/all", allHandler).Methods("GET")
router.HandleFunc("/{room:[0-9]+}/delete", deleteMoodHandler).Methods("POST")

router.PathPrefix("/assets/").Handler(assetsHandler())
go echo()

log.Printf("Now open http://localhost:%s", app.Port)
addr := net.JoinHostPort("", app.Port)
log.Fatal(http.ListenAndServe(addr, router))
}

func assetsHandler() http.Handler {
fsys := fs.FS(assets)
contentStatic, _ := fs.Sub(fsys, "assets")
return http.StripPrefix("/assets/", http.FileServer(http.FS(contentStatic)))
}

func rootHandler(w http.ResponseWriter, r *http.Request) {
tmpl := template.Must(template.New("template").Delims("[[", "]]").Parse(index))
footer, _ := ioutil.ReadFile("footer.html")
Expand Down
107 changes: 2 additions & 105 deletions room.html
View file
Expand Up @@ -11,20 +11,7 @@
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Fira Code', monospace;
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: #6d6875;
text-align: center;
}
</style>
<link href="/assets/room.css" rel="stylesheet">
</head>
<body>
<div id="app">
Expand All @@ -39,96 +26,6 @@
<div class="footer">
<p>[[.]]</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
user: '',
room: undefined,
moods: [
"Agree",
"Agree and volunteer",
"Response",
"Direct response",
"Technical point",
"Language",
"Speak up",
"Slow down",
"I'm confused",
"Veto"
],
userMoods: []
},
methods: {
deleteUserMood: function (username = this.user) {
const body = JSON.stringify({
username: username,
roomUser: `${this.room}${username}`
})
fetch(`/${this.room}/delete`, {
method: 'post',
body: body
})
},
sendMood: function (mood) {
// 2419200 is 28 days - the username cookie will expire if you don't use it for four weeks
document.cookie = `username=${this.user};max-age=2419200;SameSite=Strict`
const message = JSON.stringify({
username: this.user,
mood: mood,
room: this.room,
roomUser: `${this.room}${this.user}`
})
fetch(`/${this.room}/mood`, {
method: 'post',
body: message
})
},
}
})

window.onload = function () {
try {
app.user = document.cookie.split("; ").find(row => row.startsWith("username=")).split('=')[1]
} catch (e) {
console.log(e)
console.log("New user")
}
app.room = location.pathname.split("/")[1]


const socketAddr = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + window.location.pathname + "/ws"
const moodSocket = new ReconnectingWebSocket(socketAddr);
const update = function () {
moodSocket.onopen = function () {
console.log(`(re)-connected to ${socketAddr}`)
app.userMoods = []
fetch(`/${app.room}/all`)
.then(res => res.json())
.then((all) => {
if (all != null) {
all.forEach(mood => {
app.userMoods.push(mood)
})
}
})
}
moodSocket.onmessage = function (event) {
const moodOperation = JSON.parse(event.data)
const mood = {username: moodOperation.username, mood: moodOperation.mood}
switch (moodOperation.operation) {
case "Delete":
// delete
app.userMoods = app.userMoods.filter(item => item.username != mood.username)
break;
case "Save":
app.userMoods = app.userMoods.filter(item => item.username != mood.username)
app.userMoods.push(mood)
}
}
};
window.setTimeout(update);
}
</script>
<script src="/assets/room.js"></script>
</body>
</html>

0 comments on commit 7866f86

Please sign in to comment.