Big Sky

2018/03/30

Golang と Vue.js で簡単なアプリケーションを作ってみた。

Go と Vue.js を使ってどれくらいシームレスにウェブアプリを作れるかを確認したかったのでタスク管理アプリを作ってみた。サーバは Go なので vue-cli や webpack 等は使わない。全て CDN から。Vue.js でアプリのベースを、UI コンポーネントとして Element、Ajax ライブラリとして axios を使った。

以前、Riot.js を使って Todo アプリを作った時はサーバ作るのにも少し時間が掛かったので、今回は横着して echo-scaffold を使った。

GitHub - mattn/echo-scaffold

README.md Echo Scaffold Echo Scaffold is CLI to generate scaffolds for the echo framework.
https://github.com/mattn/echo-scaffold

echo-scaffold を使えば、タスク管理アプリとして必要な「本文」と「実施済み」という属性をモデルにした REST サーバを簡単に作る事が出来る。


$ echo-scaffold init go-vue-example

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/database.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/errors.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/response.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/config/database.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/config/environment.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/router.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/suite_test.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/go-vue-example.go



$ cd go-vue-example

$ echo-scaffold scaffold task body:string done:bool

        create  models/task.go

        create  models/task_dbsession.go

        create  controllers/tasks.go

        create  controllers/tasks_helpers.go

        create  controllers/suite_test.go

        skip  controllers/suite_test.go

        insert  controllers/router.go

モデルとコントローラ、コンフィグや mongodb へのアクセスも生成される。生成された main 関数に少し手を入れて静的ファイルをサーブ出来る様にする。js 側のモデルとのバインディングを書く。


<div id="app">

  <el-main v-loading="loading">

    <h2>My Tasks</h2>

    <el-input placeholder="Please input your task" v-model="newTask" v-on:change="addTask()"></el-input>

    <ul class="list-group">

      <li class="list-group-item" v-for="task in tasks">

        <el-checkbox :checked="task.done" v-on:change="doneTask(task)">{{ task.body }}</el-checkbox>

      </li>

    </ul>

  </el-main>

</div>  

<script src="/static/app.js"></script>

app.js はこんな感じ。


ELEMENT.locale(ELEMENT.lang.ja)

var app = new Vue({

  el: '#app',

  data: {

    tasks: [],

    newTask: "",

    loading: false,

  },

  created: function() {

    this.loading = true;

    axios.get('/tasks')

      .then((response) => {

        console.log(response);

        this.tasks = response.data.items || [];

        this.loading = false;

      })

      .catch((error) => {

        console.log(error);

        this.loading = false;

      });

  },

  methods: {

    addTask: function(task) {

      this.loading = true;

      let params = new URLSearchParams();

      params.append('body', this.newTask);

      params.append('done', false);

      axios.post('/tasks', params)

        .then((response) => {

          this.loading = false;

          this.tasks.unshift(response.data);

          this.newTask = "";

          this.loading = false;

        })

        .catch((error) => {

          console.log(error);

          this.loading = false;

        });

    },

    doneTask: function(task) {

      this.loading = true;

      let params = new URLSearchParams();

      params.append('done', !task.done);

      axios.put('/tasks/' + task.id, params)

        .then((response) => {

          console.log(response);

          this.loading = false;

        })

        .catch((error) => {

          console.log(error);

          this.loading = false;

        });

    } 

  }

})

これだけで簡単にタスク管理アプリが書ける。Vue.js 便利やね。echo-scaffold で生成したコードを一切触ってないし、動作確認は MongoDB Atlas を使ったので、実際の作業は echo-scaffold の実行とフロントエンドのコードを書いたくらい。Element 超良いし axios も良いし、この3点あればだいたいのアプリは作れる。サーバは JSON が吐ける REST サーバであれば何でもいい。

作った物はここに置いた。

GitHub - mattn/go-vue-example
https://github.com/mattn/go-vue-example

個人的な思いとしては Element にもう少し便利な UI が増えてくれればなぁと思う。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
山田祥寛
技術評論社大型本 / ￥1,949 (2016年09月30日)

発送可能時間：

Posted at by mattn

2018/03/15

Go言語で ping を打って「にゃーん」を表示させる

pingを打つと「にゃーん」を返すサービス、ネットワークエンジニアが開発 - ITmedia NEWS

関連記事メイドさんと一緒に学ぶ「週末プログラミングスクール」開校　そこに隠された2つの社会的意義一見、華やかな場の創造に見えるこの取り組みだが……。太田智美がなんかやる：WWDC冒頭で、クックC...
http://www.itmedia.co.jp/news/articles/1709/07/news106.html

ping を打ったら「にゃーん」と文字が表示されるサービス。ICMP でメッセージを送信したら応答を返す、普通のプロトコルなのだけど、文字のドットが存在する部分だけタイムアウトエラーが発生するという物。どうしてもこれを Windows でしかも golang で実行したかったので作ってみた。golang にも ICMP プロトコルを扱うパッケージが用意されている。

icmp - GoDoc

Package icmp provides basic functions for the manipulation of messages used in the Internet Control Message Protocols, ICMPv4 and ICMPv6.
http://godoc.org/golang.org/x/net/icmp

送信は icmp.Message という struct に icmp.Echo を設定し、メッセージとして(なんでもいいのだけど) HELLO(R-U-THERE) を送信します。


wm := icmp.Message{

    Type: ipv4.ICMPTypeEcho,

    Code: 0,

    Body: &icmp.Echo{

        ID: os.Getpid() & 0xffff, Seq: i,

        Data: []byte("HELLO-R-U-THERE"),

    },

}

wb, err := wm.Marshal(nil)

if err != nil {

    log.Fatalf("Marshal: %v", err)

}

if _, err := c.WriteTo(wb, &net.IPAddr{IP: ip.IP}); err != nil {

    log.Fatalf("WriteTo: %v", err)

}

受信は 0.1 秒のタイムアウトを付け、時間切れもしくはレスポンス異常であれば U を、正常であれば ! を表示します。


c.SetReadDeadline(time.Now().Add(timeout))

rb := make([]byte, 1500)

n, _, err := c.ReadFrom(rb)

if err != nil {

    fmt.Print("U")

} else {

    rm, err := icmp.ParseMessage(ipv4.ICMPTypeEcho.Protocol(), rb[:n])

    if err == nil && rm.Type == ipv4.ICMPTypeEchoReply {

        fmt.Print("!")

    } else {

        fmt.Print("U")

    }

}

文字幅が 70 桁を超えれば改行します。

うまく表示する事が出来ました。コードは以下に置いておきます。適当に改造するなりして遊んで下さい。尚、IP プロトコルを使うので実行には管理者権限が必要です。

GitHub - mattn/nyan-ping

にゃーん
https://github.com/mattn/nyan-ping

みんなのGo言語[現場で使える実践テクニック]
松木雅幸, mattn, 藤原俊一郎, 中島大一, 牧大輔, 鈴木健太
技術評論社 Kindle版 / ￥2,178 (2016年09月09日)

発送可能時間：

Posted at by mattn

2018/01/24

goroutine でドハマリした。

今日たまたま見つけた gotest というプログラムの修正を行った際にドハマリした。

GitHub - rakyll/gotest: go test with colors
https://github.com/rakyll/gotest

gotest は go test の出力の PASS や FAIL といった定型の文字列を見つけて緑や赤に色付けする小さなプログラム。仕組みも簡単で以下の様なコードになっている。


func main() {

    setPalette()

    enableOnCI()

    gotest(os.Args[1:])

}



func gotest(args []string) {

    r, w := io.Pipe()

    defer w.Close()



    args = append([]string{"test"}, args...)

    cmd := exec.Command("go", args...)

    cmd.Stderr = w

    cmd.Stdout = w

    cmd.Env = os.Environ()



    go consume(r)



    if err := cmd.Run(); err != nil {

        if ws, ok := cmd.ProcessState.Sys().(syscall.WaitStatus); ok {

            os.Exit(ws.ExitStatus())

        }

        os.Exit(1)

    }

}



func consume(r io.Reader) {

    reader := bufio.NewReader(r)

    for {

        l, _, err := reader.ReadLine()

        if err == io.EOF {

            return

        }

        if err != nil {

            log.Fatal(err)

        }

        parse(string(l))

    }

}

cmd.Run() はブロックするので gorutine で bufio.Reader を読みながら色付けしてる。ただこれ、cmd.Run() のブロックが解け、os.Exit() が呼び出されるまでに goroutine 側が処理しないと出力をロストしてしまう事になる。そこで僕は以下の様に修正した。


func main() {

    setPalette()

    enableOnCI()

    os.Exit(gotest(os.Args[1:]))

}



func gotest(args []string) int {

    r, w := io.Pipe()

    defer w.Close()



    args = append([]string{"test"}, args...)

    cmd := exec.Command("go", args...)

    cmd.Stderr = w

    cmd.Stdout = w

    cmd.Env = os.Environ()



    var wg sync.WaitGroup

    wg.Add(1)

    defer wg.Wait()



    go consume(&wg, r)



    if err := cmd.Run(); err != nil {

        if ws, ok := cmd.ProcessState.Sys().(syscall.WaitStatus); ok {

            return ws.ExitStatus()

        }

        return 1

    }

    return 0

}



func consume(wg *sync.WaitGroup, r io.Reader) {

    defer wg.Done()

    reader := bufio.NewReader(r)

    for {

        l, _, err := reader.ReadLine()

        if err == io.EOF {

            return

        }

        if err != nil {

            log.Print(err)

            return

        }

        parse(string(l))

    }

}

sync.WaitGroup を使い、goroutine の終了を待ち、gotest の関数の戻り値として外部コマンドの終了コードを渡し、main 関数で os.Exit() を呼び出す。Go 言語を良く使う方なら良く見る、そして割かし綺麗と言われるソースの書き方だと思います。ただこのコード、以下の様に panic で落ちます。


fatal error: all goroutines are asleep - deadlock!



goroutine 1 [semacquire]:

sync.runtime_Semacquire(0xc0420083fc)

        c:/go/src/runtime/sema.go:56 +0x40

sync.(*WaitGroup).Wait(0xc0420083f0)

        c:/go/src/sync/waitgroup.go:129 +0x79

main.gotest(0xc04203e260, 0x0, 0x0, 0x1)

        c:/dev/go/src/github.com/rakyll/gotest/main.go:54 +0x3bf

main.main()

        c:/dev/go/src/github.com/rakyll/gotest/main.go:33 +0x74

最初これを目にした時には直ぐに原因が分からず「これは Go のバグだ。issue を書くぞ！」という行動を起こす手前で原因に気がついた。

このコード、処理される順に着目して欲しい。io.Pipe() で作られた書き込み用のパイプ w は、関数 gotest を抜ける際に Close される。goroutine consume を待機する為の wg は関数 gotest を抜ける際に Wait が呼び出される。関数 consume 内の reader.ReadLine は、パイプ w が Close されないとブロックを解かない。なので w.Close() が先に呼び出される必要がある。そう、これデッドロックでした。defer 文は、関数内で defer を指定した順とは逆に実行されるので、本来ならば

cmd.Run() のブロックが解ける
w.Close() が呼び出される
wg.Wait() を呼び出す

という順にしないといけない訳です。以下の様に修正して正しく動作する様になりました。


func main() {

    setPalette()

    enableOnCI()

    os.Exit(gotest(os.Args[1:]))

}



func gotest(args []string) int {

    var wg sync.WaitGroup

    wg.Add(1)

    defer wg.Wait()



    r, w := io.Pipe()

    defer w.Close()



    args = append([]string{"test"}, args...)

    cmd := exec.Command("go", args...)

    cmd.Stderr = w

    cmd.Stdout = w

    cmd.Env = os.Environ()



    go consume(&wg, r)



    if err := cmd.Run(); err != nil {

        if ws, ok := cmd.ProcessState.Sys().(syscall.WaitStatus); ok {

            return ws.ExitStatus()

        }

        return 1

    }

    return 0

}



func consume(wg *sync.WaitGroup, r io.Reader) {

    defer wg.Done()

    reader := bufio.NewReader(r)

    for {

        l, _, err := reader.ReadLine()

        if err == io.EOF {

            return

        }

        if err != nil {

            log.Print(err)

            return

        }

        parse(string(l))

    }

}

いやはやお恥ずかしいというかなんというか。本来なら無限ループしてもおかしくない所をちゃんと「deadlock」ってメッセージ付きで panic になってくれたんですから、Go 言語素晴らしいって話でした辛い。

Posted at by mattn