用于下载进度的 Golang 和本地 Web 界面？

Question

我是新手Go并试图制作一个跨浏览器的应用程序，它可以下载多个带有进度条的 url。该Grab包很好地完成了这项工作，如下面的示例所示。现在，我想要一个独立的/可移植的/单一可执行的 Web-UI，它可以在 Web 浏览器中显示来自以下代码的下载进度？

Answer 1

一种解决方案是使用 websocket，因为要建立连接，它使用一种特殊的标头，将浏览器和服务器之间所需的握手次数减少到只有一次，这意味着客户端服务器通信不会阻塞。此连接将在其整个生命周期内保持活动状态，您可以使用 JavaScript 从此连接写入或读取数据，就像在传统 TCP 套接字的情况下一样。作为实现问题，您可以将grab包组成的结果信息编码为json字符串，然后您可以使用 websocket.JSON.Send.func (cd Codec) Send(ws *Conn, v interface{}) (err error)在客户端，您可以获得组合的 json 对象，稍后您可以根据您的使用目的和首选技术（画布、DOM 等）解析和使用该对象。以下是 websocket服务器端的片段：package mainimport (&nbsp; &nbsp; "fmt"&nbsp; &nbsp; "golang.org/x/net/websocket"&nbsp; &nbsp; "net/http")type FileInformation struct {&nbsp; &nbsp; BytesTransferred int&nbsp; &nbsp; Size&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;string&nbsp; &nbsp; Filename&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;string&nbsp; &nbsp; Progress&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;int}func Echo(ws *websocket.Conn) {&nbsp; &nbsp; info := FileInformation{&nbsp; &nbsp; &nbsp; &nbsp; BytesTransferred: 70,&nbsp; &nbsp; &nbsp; &nbsp; Size:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"1.7MB",&nbsp; &nbsp; &nbsp; &nbsp; Filename:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"test.txt",&nbsp; &nbsp; &nbsp; &nbsp; Progress:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;60,&nbsp; &nbsp; }&nbsp; &nbsp; for {&nbsp; &nbsp; &nbsp; &nbsp; if err := websocket.JSON.Send(ws, info); err != nil {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fmt.Println("Error sending message")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // if BytesTransferred == 100 break&nbsp; &nbsp; }}func main() {&nbsp; &nbsp; http.Handle("/", websocket.Handler(Echo))&nbsp; &nbsp; if err := http.ListenAndServe(":1234", nil); err != nil {&nbsp; &nbsp; &nbsp; &nbsp; fmt.Println("Cannot iniatiate a websocket connection")&nbsp; &nbsp; }}当然，这些值是硬编码的，如果您想改变传输速度，可以使用计时器滴答。该客户端写在走：package mainimport (&nbsp; &nbsp; "fmt"&nbsp; &nbsp; "golang.org/x/net/websocket"&nbsp; &nbsp; "io"&nbsp; &nbsp; "os")func main() {&nbsp; &nbsp; type FileInformation struct {&nbsp; &nbsp; &nbsp; &nbsp; BytesTransferred int&nbsp; &nbsp; &nbsp; &nbsp; Size&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;string&nbsp; &nbsp; &nbsp; &nbsp; Filename&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;string&nbsp; &nbsp; &nbsp; &nbsp; Progress&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;int&nbsp; &nbsp; }&nbsp; &nbsp; if len(os.Args) > 1 && (os.Args[1] == "--help" || os.Args[1] == "-h") {&nbsp; &nbsp; &nbsp; &nbsp; fmt.Println("Usage : " + os.Args[0] + " ws://localhost:port")&nbsp; &nbsp; &nbsp; &nbsp; os.Exit(1)&nbsp; &nbsp; }&nbsp; &nbsp; conn, err := websocket.Dial(os.Args[1], "", "http://127.0.0.1")&nbsp; &nbsp; checkError(err)&nbsp; &nbsp; var info FileInformation&nbsp; &nbsp; for {&nbsp; &nbsp; &nbsp; &nbsp; err := websocket.JSON.Receive(conn, &info)&nbsp; &nbsp; &nbsp; &nbsp; if err != nil {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if err == io.EOF {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fmt.Println("Couldn't receive msg " + err.Error())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; fmt.Printf("%s", info)&nbsp; &nbsp; &nbsp; &nbsp; if err := websocket.JSON.Send(conn, info); err != nil {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checkError(err)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}func checkError(err error) {&nbsp; &nbsp; if err != nil {&nbsp; &nbsp; &nbsp; &nbsp; fmt.Println("Fatal error: " + err.Error())&nbsp; &nbsp; &nbsp; &nbsp; os.Exit(1)&nbsp; &nbsp; }}在 javascript 中，您可以连接到 websocket 并以以下方式接收数据：<script type="text/javascript">&nbsp; &nbsp; var sock = null;&nbsp; &nbsp; var wsuri = "ws://127.0.0.1:1234";&nbsp; &nbsp; window.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; console.log("onload");&nbsp; &nbsp; &nbsp; &nbsp; sock = new WebSocket(wsuri);&nbsp; &nbsp; &nbsp; &nbsp; sock.onopen = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("connected to " + wsuri);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; sock.onclose = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("connection closed (" + e.code + ")");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; sock.onmessage = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("message received: " + e.data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // deserialize json data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var json = JSON.parse(e.data);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; function send() {&nbsp; &nbsp; &nbsp; &nbsp; var msg = document.getElementById('message').value;&nbsp; &nbsp; &nbsp; &nbsp; sock.send(msg);&nbsp; &nbsp; };</script>