0

我正在使用 Gorilla Websocket 来更新一些 HTML（img src、文本等）；我这样做是通过以下方式：

mt, message, err := c.ReadMessage()
if err != nil {
    log.Println("read:", err)
    break
}
[...]
app, err := models.DB.SearchAppStore(ctx, stars, updatedWithin, 0)
myJson, err := json.Marshal(app)
err = c.WriteMessage(mt, myJson)
if err != nil {
    log.Println("write:", err)
    break
}

然后我使用 javascript 以这种方式更新 HTML 数据：

ws.onmessage = function(evt) {
    var d = JSON.parse(evt.data);
    var app;
    for (app = 0; app < 3; app++) {
      document.getElementById("app-icon-" + app).src = d[app].ThumbnailURL;
      document.getElementById("app-title-" + app).innerHTML = d[app].Title;
      document.getElementById("app-compatibility-" + app).innerHTML = d[app].Compatibility;
    }
  };

然后我以这种方式手动输入了 HTML：

<div class="app-section">
  <div class="icon">
    <img src="" id="app-icon-0">
  </div>
  <div class="details">
    <h2 id="app-title-0"></h2>
    <h5 id="app-compatibility-0"></h5>
  </div>
</div>

您可以在 HTML 'id' 中看到 0，我应该注意它要长得多，但我试图只取相关部分..

我当然不想手动输入 HTML，因为它会使处理不同的长度变得困难（/不可能）（比如有时我想显示一百个应用程序，有时可能只有 3 个可用，等等。）

我在想这可能可以使用 golang 的 HTML {{range}} 函数来完成，但我不知道如何将它与来自 websockets 的 json 数据集成。

另一个应该可以管理的解决方案是在 JS for 循环中写出所有 HTML ws.onmessage，但我认为如果我学会如何使用 golang 模板包来做到这一点会更好。特别是因为它真的很长而且有许多类/ id的..

我看到它的方式，我需要获取 JSON ( Object.keys(d).length;) 的长度，然后我需要在 {{range}} 内传递这个长度，然后可以使用 {{index}} 通过 JSON 对象进行交互..

..但我一直无法弄清楚如何做到这一点，也许甚至不可能..我将不胜感激任何有关如何做到这一点的帮助..

4

1 回答 1

0

一种简单的方法是在服务器上执行一个模板并将生成的 HTML 发送到客户端，然后将 HTML 插入页面。

使用已编译的模板声明包级别变量。此模板假定 Execute 的参数是结构或映射的切片，其中包含字段 ThumbnailURL、Title 和 Compatibility。

var t = template.Must(template.New("").Parse(`{{range .}}
  <div class="icon">
   <img src="{{.ThumbnailURL}}">
  </div>
  <div class="details">
   <h2>{{.Title}}</h2>
   <h5>{{.Compatibility}}</h5>
  </div>{{end}}`))

在读取循环中执行模板。将 HTML 发送给客户端：

mt, message, err := c.ReadMessage()
if err != nil {
   log.Println("read:", err)
   break
]
[...]
app, err := models.DB.SearchAppStore(ctx, stars, updatedWithin, 0)
var buf bytes.Buffer
if err := t.Execute(&buf, app); err != nil {
    // handle error
}
err = c.WriteMessage(mt, buf.Bytes())
if err != nil {
  log.Println("write:", err)
  break
}

为页面上的结果添加一个 div：

<div class="app-section"></div>

收到消息时设置 div 的内部 HTML：

ws.onmessage = function(evt) {
    document.getElementById("app-section").innerHTML = evt.Data;
}

此解决方案不使用 JSON。

于 2017-02-18T03:32:04.763 回答