如何使用 websockets 更改模板？

Question

我想将页面拆分成片段并使用网络套接字更改它们而无需重新加载页面。

 {{define "index"}}
 {{template "head"}}
  <div class = "scene">
     {{template "main"}}
   </div>

{{template "foot"}}
{{end}}

我从客户端读取了 json 并找出要打开的页面。

func webSocketHandler(conn *websocket.Conn) {

 data := conn.ReadJSON(&msg)

 if data != nil {
    log.Fatal(data)
    return
 }

  LoadVista(msg.Temp,conn)
}
var (
indexTemplate = template.Must(template.ParseFiles(indexVista,mainVista,headVista,footVista 
))
loginTemplate = template.Must(template.ParseFiles(loginVista))
)

func LoadVista(nameTemplate string, conn *websocket.Conn) {
 switch nameTemplate {
 case "page2":
    templateWsRender(nameTemplate,conn)
 }

}
func templateWsRender(name string,conn *websocket.Conn){
//defer conn.Close()
 var buf  bytes.Buffer
 data := page2Template.ExecuteTemplate(&buf,name,nil)
 if data!=nil{
    log.Fatal(data)
 }
 err := conn.WriteMessage(1,buf.Bytes())
 if err!=nil{
    log.Fatal(err)
 }

}

客户代码

var socket = new WebSocket('ws://localhost:7030/ws' )

socket.onmessage = function (event) {
  var message = event.data
  loadVista(message)
}

elem.addEventListener( "click" , sendQuery);
function sendQuery() {
  var page = {
    query_type :"openLink",
    temp: "page"
 }
var event = JSON.stringify(page);

socket.send(event);
}

function loadVista(message) {
//alert(message)
document.getElementById('scene').innerHTML = message.data;
}

但是"main"模板并没有变成"page 2"模板。就如何使用 Go + js (webscokets) 正确组织模板的更改提供建议。谢谢！

Answer 1

需要指定id。; <div id= "scene"> {{template "main"}} </div>

改为<div class = "scene"> {{template "main"}} </div>

因为我是通过 Id 而不是 class 来查找的。 document.getElementById('scene').innerHTML = message

如何使用 websockets 更改模板？

How to change templates using websockets?

javascript

go

websocket

go-html-template