Channel APIによるクライアント=サーバー双方向通信 (2/5)
作成:2012-07-08 09:46
更新:2012-07-08 10:14
更新:2012-07-08 10:14
■チャンネルの作成
では、チャンネルを利用してみましょう。まずは、「チャンネルを作成し、下準備ができるまで」の部分を作ってみます。
クライアント側とサーバー側の両方で処理が必要になりますのでそれぞれ整理していきましょう。(下のリスト欄に必要なコードを掲載してあります)
1. ChannelService の用意
サーバー側で最初に行うのは、「ChannelService」インスタンスの用意です。これは「ChannelServiceFactory」というクラスを利用します。このクラスは、文字通りChannelServiceを作成するためのファクトリークラスです。「getChannelService」メソッドを呼び出すことで、ChannelServiceが取得されます。
2. チャンネルキーを取得する
3. チャンネルを作成する
4. トークンをクライアントに返す
1. ライブラリのロード
一つ注意点として挙げておきたいのは、「これは<body>内で行う」という点でしょう。<head>にこの<script>タグを記述するとエラーが発生する現象が確認できました。
2. Ajaxでサーブレットにアクセスする
3. コールバック関数でトークンを受け取る
――さあ、これでチャンネルを作成し、トークンをクライアントに戻して、チャンネルによる通信を開始するための準備が整いました。
クライアント側とサーバー側の両方で処理が必要になりますのでそれぞれ整理していきましょう。(下のリスト欄に必要なコードを掲載してあります)
●サーバー側の処理
1. ChannelService の用意
ChannelService channelService =
ChannelServiceFactory.getChannelService();
サーバー側で最初に行うのは、「ChannelService」インスタンスの用意です。これは「ChannelServiceFactory」というクラスを利用します。このクラスは、文字通りChannelServiceを作成するためのファクトリークラスです。「getChannelService」メソッドを呼び出すことで、ChannelServiceが取得されます。
2. チャンネルキーを取得する
String channelKey = request.getParameter("channelKey");クライアントから渡されるチャンネルキーを取得します。ここでは、「channelKey」といパラメータで送ることにしています。getParameter("channelKey")でこれを取り出し変数に保存します。必要に応じてどこかに格納しておくとよいでしょう。
3. チャンネルを作成する
String token = channelService.createChannel(channelKey);チャンネルの作成は、ChannelServiceインスタンスの「createChannel」で行います。引数には、そのチャンネルに割り当てるチャンネルキーを指定します。これでチャンネルが作成され、そのチャンネルのトークン(String)が返されます。
4. トークンをクライアントに返す
response.getWriter().println(token);取得したチャンネルのトークンは、何らかの形でクライアント側に渡す必要があります。ここでは、そのままprintlnで書きだしてあります。つまり、クライアントからサーブレットにGETアクセスすると、チャンネルを作った後、そのトークンがクライアント側に出力される、というわけです。
●クライアント側の処理
1. ライブラリのロード
<script src='/_ah/channel/jsapi'></script>最初に行なっておくべきは、チャンネルのライブラリのロードです。ライブラリは、デプロイされたアプリケーションの/_ah/channel/jsapiというパスに自動的に組み込まれていますので、これを<script>タグでロードしておきます。
一つ注意点として挙げておきたいのは、「これは<body>内で行う」という点でしょう。<head>にこの<script>タグを記述するとエラーが発生する現象が確認できました。
2. Ajaxでサーブレットにアクセスする
var xhr = new XMLHttpRequest();サーバーに用意しておいたチャンネル作成用のサーブレットにAjaxでアクセスをします。先ほど説明したように、サーブレットのdoGetではchannelKeyというパラメータでチャンネルキーを受け取るようになっていましたので、XMLHttpRequestオブジェクトを作成した後、アクセス先に '?channelKey=' + [チャンネルキー] というようにパラメータを付け足してopeしてやります。また、readyStateで、Ajax通信終了後の処理もバインドしておきます。
xhr.open('GET', path + '?channelKey=' + [チャンネルキー] , true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
createChannelCallback(xhr);
}
};
xhr.send();
3. コールバック関数でトークンを受け取る
function createChannelCallback(request){サーブレットのdoGetでは、チャンネル作成後、printlnでトークンを出力してありましたね。ということは、AjaxでサーブレットにGETアクセスしたら、トークンが返送されることになります。そこで、コールバック関数でresponseTextを取り出し、出力されたトークンをどこかに保管してやります。
var 変数 = request.responseText;
……取り出したトークンを保存しておく……
};
――さあ、これでチャンネルを作成し、トークンをクライアントに戻して、チャンネルによる通信を開始するための準備が整いました。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※サーバー側:サーブレットのdoGet public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); ChannelService channelService = ChannelServiceFactory .getChannelService(); String channelKey = request.getParameter("channelKey"); String token = channelService.createChannel(channelKey); response.getWriter().println(token); // トークンを出力する } ※クライアント側:pathのサーブレットにアクセスしトークンを受け取る function createChannel(path){ var xhr = new XMLHttpRequest(); xhr.open('GET', path + '?channelKey=' + [チャンネルキー] , true); xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200){ createChannelCallback(xhr); } }; xhr.send(); }; function createChannelCallback(request){ var 変数 = request.responseText; ……取り出したトークンを保存しておく…… };
※関連コンテンツ
「Google App Engine for Java(GAE/J)プログラミング入門」に戻る