Monday, February 7, 2011

How to use Goole App Engine Channel API

Overview:
Channel API is the API to  synchronize clients in real time.
The procedure is following.
1.Client side:request a Channel API token and client ID from GAE.
2.GAE side:create the token and return it to the client.
3.Client side:open the client's channel with the token.
4.GAE side:send message to the client with the client ID, not the token.
5.Client side:get message.
1.Client side:request a Channel API token and client ID from GAE.
html:
<span id="token" style="display:none;">none-token</span>
javascipt:
function take_token() {
    console.debug('taking a token');
    $.get("/ChannelAPI", {}, function(results){
   $("#token").text(results.token)//save token to "#token".
   make_channel(results.token)
    },"json");
}
2.GAE side:create the token and return it to the client.
def get(self):
client_id = "user1"
token = channel.create_channel(client_id)
self.response.headers.add_header('Content-Type', 'application/json; charset=utf-8')
self.response.out.write(simplejson.dumps({'token': token}))
3.Client side:open the client's channel with the token.
function make_channel(token){
    channel = new goog.appengine.Channel(token);
    socket = channel.open();
    socket.onopen = onOpened;
    socket.onmessage = onMessage;
    socket.onerror = onError;
    socket.onclose = onClose;
}
4.GAE side:send message to the client with the client ID, not the token.
def post(self):
channel.send_message("user1", simplejson.dumps({"tokens":tokens}))
5.Client side:get message.
function onMessage(message){
a = new Array()
    console.debug('received a message: ', message);
    console.debug("receive a message.data:",message.data);
    var obj = JSON.parse(message.data);
    console.debug(obj.tokens)
    console.debug(obj.tokens[0])
}

Thursday, February 3, 2011

How to post data with jQuery on PhoneGap

I can not post data to GAE with XMLHttpRequest on iPhone.However,I can with jQuery and JSONP on Safari and iPhone,but I can not on Chrome.
That code is following.
HTML side:
<head>
<title>puriketu memo</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
<![endif]-->
<script type="text/javascript" src="http://localhost:8082/js/jquery.js"></script>
<script type="text/javascript" src="http://localhost:8082/js/iphone.js"></script>
  </head>
javascript side:
$.post(
request,
{"content":"content a"},
function(data, status) {
alert("post success");
}
);
          );
reference:
As soon as you sent the code, I have tested it and it did not work in my Chrome, Firefox or Android device. So, I came home last night and tested your code on Safari and my iPhone app, it works without any issues, actually my original code also worked without any issues in Safari and iPhone.  

How to get data from Google App Engine with XMLHttpRequest on PhoneGap

There is a cross domain issue when we implement this program.
Follow the code disolves it.

javascript side:
var url = request; // ex)"http://localhost:8080"
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
var response = JSON.parse(xhr.responseText);
$.each(response,function(i,r){
alert(r.content);
});
alert("get success!");
} else {
alert(xhr.responseText);
alert("lose");
}
}
};
xhr.send(null);
Google App Engine side:
class MainHandler(webapp.RequestHandler):
def get(self):
self.response.headers['Access-Control-Allow-Origin'] = '*'
self.response.headers['Access-Control-Allow-Headers'] = '*'
self.response.headers['Access-Control-Allow-Methods'] = 'GET'
self.response.headers['Content-Type'] = 'text/plain;charset=UTF-8'
tweets = db.GqlQuery('SELECT * FROM Tweet')
results = []
for tweet in tweets:
result = {}
result['content'] = tweet.content
results.append(result)
self.response.out.write(simplejson.dumps(results))

reference:
XMLHttpRequest Cross-domain issue
As soon as you sent the code, I have tested it and it did not work in my Chrome, Firefox or Android device. So, I came home last night and tested your code on Safari and my iPhone app, it works without any issues, actually my original code also worked without any issues in Safari and iPhone.