• TOP
• dart

go + dartでchannelAPIを動作させてみた #dartlang #dartlangjp

2013-03-12T17:45:00+09:00 2013-03-12T09:31:36Z dart

http://muzigram.muzigen.net/2013/03/gaegochannelapi-golang.html の続き

■ 今回のプロジェクト

https://github.com/mogeta/golang_channelAPI_example_dart

■ GAEのchannelAPIをdartで動かしてみよう。

面白そうだから

see also

• http://pub.dartlang.org/
• http://pub.dartlang.org/packages/appengine_channel
• https://code.google.com/p/gae-channel-api-dart/

と思って調べてみたら、google codeの方にどんぴしゃりなライブラリが
あったのでやってみた。つか用意されてるのかよ。

■ pub install

pubspec.yaml

name: channelDart
dependencies:
  appengine_channel: any
  js: any

依存関係のあるライブラリを
pub install
と叩くだけで取ってきてくれる。

■ js.scoped

dartはjs libraryを使って javascriptと連携を取ることができる。
js libraryはproxyと呼ばれるオブジェクト経由でdartとやり取りするんだけど
まぁ、とりあえず動かすところまで行ってしまおう。

  js.scoped(() {
     token  = js.context.token;
     meID   = js.context.me;
     gameID = js.context.game_key;
   });

js.scoped()内で値を取得しましょう。
scope外でやると

Exception: Cannot get JavaScript context out of scope.

と怒られます。

■ HTML

特筆する部分は以下
channel-dart.jsを読み込んでおきましょう。

    <script>
     var token    = "{{.token}}"
     var me       = "{{.me}}"
     var game_key = "{{.game_key}}"
    </script> 
    <script type="text/javascript" src="/_ah/channel/jsapi"></script>
    <script type="text/javascript" src="/js/channel-dart.js"></script> 
    <script type="application/dart" src="/dart/hello.dart"></script>

■ Screen Shot

出来上がったものがこちら、見た目は変わらんねー。dartiumで見ないと意味ないですよん。

■ source code

hello.dart

import 'package:js/js.dart' as js;
import 'package:appengine_channel/appengine_channel.dart' as ch;
import 'dart:html';

void main() {
  
  String token;
  String meID;
  String gameID;
  
  js.scoped(() {
     token  = js.context.token;
     meID   = js.context.me;
     gameID = js.context.game_key;
   });
  
  openChannel(token);
  setButtonListner(meID,gameID);
  
}

void openChannel(String token) {
  Element element = document.query("#area");
  ch.Channel channel = new ch.Channel(token);
  ch.Socket   socket = channel.open()
    ..onOpen    = (() => print("open"))
    ..onClose   = (() => print("close"))
    ..onMessage = ((m){
      element.innerHtml = "${element.innerHtml}${m}
";
        print("${m}");
      })
    ..onError   = ((code, desc) => print("error: $code $desc"));
}

void setButtonListner(String meID,String gameID){
  var btn;
  btn = document.query("#button_id");

  btn.onClick.listen((e){
    var httpRequest;
    httpRequest = new HttpRequest();
    httpRequest.open('POST', '/receive?g=${meID}${gameID}', true);
    httpRequest.send();
  });
}