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

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で見ないと意味ないですよん。 スクリーンショット 13 03 12 17 28

■ 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(); }); }

0 件のコメント :