ClockExample Go WebAssembly
1.0.0
이것은 GO 버전 1.12로 작동하도록 업데이트되었습니다. 1.11의 Js.NewCallback () 함수가 1.12의 Js.Funcof ()로 대체 되었기 때문에 이전 버전의 GO와 더 이상 작동하지 않습니다.
이는 GO/WebAssembly에서 타이머를 구현하는 방법을 보여주는 매우 간단한 예입니다. 당시 (2018 년 11 월)에 Go의 WebAssembly 지원은 여전히 새롭고 온라인으로 좋은 튜토리얼 사례가 거의 없었기 때문에 글을 쓰기로 결정했습니다.
JavaScript에서는 다음과 같이 간단한 디지털 시계를 구현할 수 있습니다.
function UpdateClock()
{
var now = new Date();
var elt = document.getElementById("clock");
elt.innerHTML = now.toLocaleTimeString();
setTimeout(UpdateClock,1000)
}
window.onload = UpdateClock;
마지막 줄은 페이지가로드되면 UpdateClock() 함수를 호출합니다. UpdateClock() 의 마지막 줄은 setTimeout() 호출하여 1 초 (1000 밀리 초) 후에 UpdateClock() 다시 호출하므로 시계는 계속 업데이트됩니다.
UpdateClock() 내에서 새로운 Date 개체를 만들어 toLocaleTimeString() 로 로컬 타임 존으로 시간을 조정 한 다음 브라우저의 DOM에 삽입하여 시간을 검색합니다. HTML에는
<div id="clock"></div>
이 예에서는 내용이 없습니다. getElementById() 해당 태그를 핸들하여 수정할 수 있습니다. 텍스트가 업데이트 될 때마다 브라우저가 디스플레이를 업데이트합니다.
그래서 우리는 어떻게 그 모든 것을 Go에서 수행합니까? 단계별로 가져 가자.
새 Date 개체 생성은 다음과 같이 수행됩니다.
now := js.Global().Get("Date").New()
js.Global() JavaScript Global Object를 가져 와서 Get("Date") Date 개체를 반환합니다. New() 새로운 인스턴스를 만듭니다. 현지 시간을 얻으려면
s := now.Call("toLocaleTimeString").String()
now 의 toLocaleTimeString() 메소드를 호출 한 다음 go 문자열 유형으로 변환합니다. 이것이 웹 페이지의 텍스트 내용에 사용하려는 것입니다. 그것을 설정하려면
js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)
다시 JavaScript Global Object를 가져 와서 문서 개체를 가져오고 " clock "을 ID로 사용하여 document.getElementById() 를 호출합니다. 반환 된 객체를 사용하여 js.Set() textContent ( innerHTML 과 동일) 속성을 현재 시간으로 설정합니다.
마지막 부분은 타이머 이벤트를 설정하는 것입니다. 시간을 업데이트 할 때마다 settimer ()를 사용하는 대신 200ms마다 타이머 이벤트를 전달하기위한 간격 타이머를 설정하고 업데이트 코드를 호출하겠습니다.
timer_cb := js.FuncOf(update_time)
위의 GO 코드가 포함 된 function update_time() 에 콜백을 만듭니다. 그 다음에
js.Global().Call("setInterval",timer_cb,"200")
JavaScript setInterval() 함수를 호출하여 200 밀리 초마다 콜백을 실행합니다.
다음은 전체 GO 코드입니다.
func update_time(this js.Value, args []js.Value) interface{} {
s := js.Global().Get("Date").New().Call("toLocaleTimeString").String()
js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)
return nil
}
그리고 main ()에서
timer_cb := js.FuncOf(update_time)
js.Global().Call("setInterval",timer_cb,"200")
보시다시피, "JavaScript in Go"를 작성하는 것은 Go의 JavaScript에 액세스하기 위해 Go의 js 패키지를 사용해야하기 때문에 더 장점적이고 복잡합니다. 그러나 js 의 기능과 방법은 우리가 JavaScript에서 수행 할 수있는 모든 것을 수행 할 수있는 방법을 제공하며 JavaScript 코드와 GO에 작성해야 할 사항 사이에는 거의 1 : 1의 서신이 있습니다. 따라서 조금 더 복잡하지만 전혀 어렵지 않습니다.
main.go 에서 실제 코드 (이 readme 파일에 비해 약간의 차이가 있음)를 볼 수 있습니다.
배포에는 다음 파일이 필요합니다.
index.html - the web page
main.wasm - the compiled Go code
wasm_exec.js - standard JavaScript glue code
backgnd_tile.gif
favicon.ico
styles.css
위의 두 그룹의 모든 파일을 웹 서버의 디렉토리에 복사하면됩니다. 시계 실행을 보려면 index.html을 웹 브라우저에로드하십시오.
GO에 작성된 간단한 웹 서버가 포함되어 있습니다. 컴퓨터의 페이지를 보려면 이와 같이 웹 서버를 시작하십시오.
$ go run webserver.go
2019/02/26 09:34:55 listening on ":8080"...
그런 다음 브라우저를 http : // localhost : 8080으로 지시하십시오
Jay Ts
(http://jayts.com)
Copyright 2018-2019 Jay Ts
Released under the GNU Public License, version 3.0 (GPLv3)
(http://www.gnu.org/licenses/gpl.html)
