GoLang 및 WebAssembly를 사용하여 채팅 서비스 구축(2부)

4645 단어 chatwebassemblygo
이제 golang으로 첫 번째 WebAssembly 코드를 작성하겠습니다.

이것은 소스 코드 구조입니다.


소스 코드 => Github Link

Go에서 크로스 컴파일된 Hello World WebAssembly 프로그램:

Go로 간단한 Hello World 프로그램을 작성하고 WebAssembly로 크로스 컴파일하고 브라우저에서 실행해 보겠습니다.

1) 먼저 장치에 golang 컴파일러를 설치해야 합니다 => golang


2) 새 프로젝트로 디렉토리 생성:



mkdir golangChatWebAssembly 
cd golangChatWebAssembly

3) golangChatWebAssembly 모듈을 생성해 보겠습니다.



go mod init golangChatWebAssembly

4) main.go 파일을 생성하자



mkdir app && cd app
touch main.go

5) 지원서를 내용으로 채우자



앱/main.go

package main

import (  
    "fmt"
)

func main() {  
    fmt.Println("Go Web Assembly")
}


6) 이제 앱을 만들 차례입니다.



이 명령은 go 애플리케이션을 기본 파일로 컴파일합니다. wasm(wasm 바이트코드 포함)은 웹 어셈블리의 실행 가능한 모듈입니다.

Linux 또는 MacOS가 있는 경우 하단 명령을 사용하십시오.

GOOS=js GOARCH=wasm go build -o ./html/main.wasm .


Windows OS가 있는 경우 build.bat 파일을 만든 다음 실행하는 것이 좋습니다.

touch build.bat


build.bat 파일에 다음 구문을 작성합니다.

SET GOOS=js
SET GOARCH=wasm

go build -o ./html/main.wasm .

SET GOOS=windows
SET GOARCH=amd64


그런 다음 명령줄에서 실행합니다: .\build.bat

7) 자바스크립트 글루



이미 논의한 바와 같이( ) WebAssembly는 JavaScript와 함께 존재해야 합니다. 따라서 방금 만든 WebAssembly 모듈을 가져오고 브라우저에서 실행하려면 일부 JavaScript 글루 코드가 필요합니다. 이 코드는 Go 설치에서 이미 사용할 수 있습니다. 계속해서 html 디렉토리에 복사해 봅시다.

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./html/


위의 명령은 WebAssembly를 실행하기 위한 글루 코드가 포함된 wasm_exec.js를 html 디렉토리에 복사합니다.

Windows OS에서는 이 파일link 에서 wasm_exec.js를 다운로드한 다음 파일을 html 폴더에 복사합니다.

8) 웹 어셈블리에 대한 애플리케이션 호출로 HTML 페이지를 만들어야 합니다.



app/html 디렉토리에 index.html 생성:

<html>
    <head>
        <meta charset="utf-8"/>
        <script src="wasm_exec.js"></script>
        <script>
            if (!WebAssembly.instantiateStreaming) {
                WebAssembly.instantiateStreaming = async (resp, importObject) => {
                    const source = await (await resp).arrayBuffer();
                    return await WebAssembly.instantiate(source, importObject);
                };
            }

            const go = new Go();
            WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then(result => {
                go.run(result.instance);
            });
        </script>
    </head>
</html>


9) 웹 서버도 필요합니다.



Go에서 간단한 웹 서버를 만들어 봅시다

cd ..
mkdir server && cd server
touch server.go


이 소스 코드로 server.go를 채우십시오.

package main

import (
    "log"
    "net/http"
)

const (
    AddSrv       = ":8080"
    TemplatesDir = "../app/html/"
)

func main() {
    fileSrv := http.FileServer(http.Dir(TemplatesDir))

    err := http.ListenAndServe(AddSrv, fileSrv)

    if err != nil {
        log.Fatalln(err)
    }
}


10) 그런 다음 서버를 시작합니다.



섬기는 사람/

go run server.go


브라우저에서 주소를 열고

http://127.0.0.1:8080

"DevTools > console"에서 출력을 볼 수 있습니다.

웹 어셈블리로 이동




3부에서는 채팅 서비스 아키텍처에 대해 공부할 예정입니다😉
1시간 안에 React로 축구 앱을 만들어 봅시다
Maizzle 및 Tailwind CSS를 사용한 이메일 마케팅

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage