How to update only text with websocket in golang with data from Mysql?

user_13551308 0
Viewed 369

I want to update only the text but without updating the whole page, I don't know how to use websockets and I don't understand the examples on the web. I have managed to update the entire grid but the idea is that the page with the cameras is not updated, only the text

var socket=new WebSocket("ws://localhost:8083/ws")
setInterval(() => {
      socket.send("updateJaula")
    }, 2000);
<div class="datos generales">
  <label id="lblNombreJaula" class="lbl-osd">NOMBRE:`+Object.values(jaula)[i].Nombre+`</label>
  <br>
  <label id="lblObjetivoJaula" class="lbl-osd">OBJETIVO:`+Object.values(jaula[i].Objetivo+`</label>
  <br>
  <label id="lblVisitaJaula" class="lbl-osd">VISITAS:`+Object.values(jaula)[i].Visita+`</label>
</div>

I really don't understand what to do, but I load the page with this from golang:

func HTTPAPIFullScreenMultiView(c *gin.Context) {
    var createParams MultiViewOptions
    SearchScreen(c.Param("uuid"))
    err := c.ShouldBindJSON(&createParams)
    if err != nil {
        log.WithFields(logrus.Fields{
            "module": "http_page",
            "func":   "HTTPAPIFullScreenMultiView",
            "call":   "BindJSON",
        }).Errorln(err.Error())
    }
    log.WithFields(logrus.Fields{
        "module": "http_page",
        "func":   "HTTPAPIFullScreenMultiView",
        "call":   "Options",
    }).Debugln(createParams)
    c.HTML(http.StatusOK, "fullscreen.html", gin.H{
        "port":    Storage.ServerHTTPPort(),
        "screens": SearchScreen(c.Param("uuid")),
        "streams": Storage.Streams,
        "jaulas":  ListarJaulas(),
        "version": time.Now().String(),
        "options": createParams,
        "page":    "fullscreen",
        "query":   c.Request.URL.Query(),
        "uuid":    c.Param("uuid"),
    })
}
gorilla go mysql websocket
2 Answers

There are several things you will need to do to achieve update only the text but without updating the whole page. but on high level, these are what you need to do:

first of all, you already have the webserver (under http or https protocol) up to serve your content.

Next, you need to add another server called, websocket server. Only then you will be able to connect from websocket client (javascript) to the websocket server (Go), using js statement:

new WebSocket("ws://localhost:8083/ws")

Then, you need to add several listener on the websocket client, to handle incoming message/data from the websocket server.

Next step, on the backend side, whenever there are some changes on data that are currently opened by the user, the backend must push it to the client, which is your front end, so you can update the grid accordingly.

One library that you can use for websocket in Go, is Gorilla Websocket. There are a few examples there within the repo.

Also if you need an additional example, I have created a simple chatting app that utilizes websocket with Go and plain javascript. It might be different compared to what you need but you might be able to learn something from there

https://github.com/novalagung/dasarpemrogramangolang-example/tree/master/chapter-D.3-golang-web-socket-chatting-app

user_14679880

It's me again. I need the labels to be updated every 2 seconds. Doing a MySQL query (I already have them created from Golang), do you think it could be like this?

var socket=new WebSocket("ws://localhost:8083/ws")

setInterval(() => {
  socket.send("actualizarJaula")
  // document.location.href="/pages/screen/"+id_screen
}, 2000);

socket.onmessage=function(e){      
  var data = e.data
  if (data =="actualizarJaula") {
    fetchGet("/pages/screen/"+id_screen,function(data){
      document.getElementById("lblNombreJaula").value=data.Nombre;
      document.getElementById("lblObjetivoJaula").value=data.Objetivo;
      document.getElementById("lblVisitaJaula").value=data.Visita;
    })
  }
  
}
function fetchGet(url,callback){
fetch(url).then(res=>res.json()).then(res=>{
  callback(res)
})
}
user_135513080
Related