【发布时间】：2018-03-16 17:47:42
【问题描述】：
我想将页面拆分成片段并使用 Web 套接字更改它们而不重新加载页面。
{{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;
}
但“主”模板不会更改为“第 2 页”模板。提供有关如何使用 Go + js (webscokets) 正确组织模板更改的建议。谢谢！
【问题讨论】：
-
当您在客户端通过 websocket 接收数据时，您使用普通的 DOM 操作方法在现有页面中插入或更改内容（例如更改某些页面元素上的
.innerHTML）。您不能从客户端 webSocket 数据中使用服务器端渲染，除非服务器正在向您发送您只需要插入到框架或 div 中的完整格式的 HTML。如果您在客户端本地有模板和渲染库，您可以使用客户端模板渲染，然后将渲染的模板插入页面。 -
@jfriend00 我被答案 stackoverflow.com/questions/42309020/… 引导但失败了。
标签： javascript go websocket go-html-template