i am writing a go server that receives GET and POST request, on GET requests, i am able to serve a html page and on POST request i receive a JSON, now i want to update the html page when i receive the POST request.
So far i been able to update the html page when i refresh the entire page.
With this i am able to show/update the receive data when i refresh the whole page
this is the go file section that deals with the request and serves the html page
func (h *handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
b, err := io.ReadAll(r.Body)
if err != nil {
panic(err)
}
event := r.URL.Query().Get("event")
if r.Method == "POST" {
switch event {
case "up":
err = h.up(b)
case "join":
err = h.join(b)
default:
fmt.Printf("handler para el evento %s no esta implementado n", event)
return
}
} else if r.Method == "GET" {
switch r.URL.String() {
case "/":
//cargar aqui la pagina web
tmpl := template.Must(template.ParseFiles("layout.html"))
tmpl.Execute(w, data)
default:
return
}
}
if err != nil {
fmt.Printf("metodo request '%s' retorna error: %sn", event, err)
}
}
This is the HTML file that gets serve
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Jorge Felipe González Orellana"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #7A82AB;
color: floralwhite;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.nav-grnl {
display: flex;
align-items: center;
justify-content: center;
background-color: #333333;
height: 7vh;
}
.nav-grnl a {
margin: 10px 10px 10px 10px;
padding: 8px 16px;
display: flex;
text-decoration: none;
color: floralwhite;
border-radius: 12px;
}
.nav-grnl a:hover {
color: black;
background-color: floralwhite;
}
.logo {
display: flex;
position: fixed;
left: 0;
height: inherit;
width: 7vh;
}
.contenedor-gnrl {
display: grid;
position: fixed;
grid-template-areas:
'left right';
width: 100vw;
height: 88vh;
}
.main-section {
background-color: floralwhite;
color: black;
grid-area: left;
width: 80vw;
}
.main-info {
/* background-color: #7A82AB; */
background-color: #999792;
color: black;
grid-area: right;
width: 20vw;
}
.footer-gnrl {
background-color: #333333;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100vw;
height: 5vh;
}
p {
margin: 0;
border: 0;
padding: 0;
}
@media (max-width: 600px) {
.grid-container {
grid-template-areas:
'header header'
'left left'
'right right'
'footer footer';
}
}
</style>
<title>2veinte test</title>
<script>
setInterval(ObtDispos, 1000);
function ObtDispos(){
var dispos = "{{ .Dispositivos }}"
console.log(dispos)
}
</script>
</head>
<body>
<div class="nav-grnl">
<svg class="logo"></svg>
<a href="/">Link</a>
<a href="/">Link</a>
<a href="/">Link</a>
</div>
<div class="contenedor-gnrl">
<!-- izq -->
<div class="main-section">
<!-- base para mostrar data -->
<div class="DispositivosLoraWAN" id="DispositivosLoraWAN">
{{range .Dispositivos}}
<div>
<h6>{{.Nombre_Disp}}</h6>
<h6>{{.DevEUI}}</h6>
<h6>{{.Data}}</h6>
</div>
{{end}}
</div>
</div>
<div class="main-info">
<p>info principal</p>
</div>
</div>
<div class="footer-gnrl">
<p>Footer</p>
</div>
</body>
</html>
The CSS and JS part are inside the <head></head> tag.
I’m relatively new to Go, so I don’t have much knowledge of all the packages out there.
2