html5-RockPaperScissorsRockPaperScissors on WebSocket | |
| web/main.js |
Iframe Main handle the behavior of the iframe
|
|
ctor/dtor
|
var IframeMain = function(){
this.connectedRsc = null;
this.log = IframeMain.log;
this.parentWindowMessageCtor()
}
IframeMain.prototype.destroy = function(){
}
|
Log function for the class
|
IframeMain.log = function(){}
IframeMain.prototype.channelCtor = function(token, resource, clientId){
var self = this;
var channel = new goog.appengine.Channel(token);
var socket = channel.open();
this.log("create channel", token)
socket.onopen = function(){
self.log("channel connected resource", resource)
self.connectedRsc = resource;
var data = {
type : "connected",
data : {
clientId : clientId
}
}
self.parentWindowMessageSend(data);
}
socket.onclose = this.channelOnClose.bind(this);
socket.onerror = this.channelOnError.bind(this);
socket.onmessage= this.channelOnMessage.bind(this);
}
IframeMain.prototype.channelOnClose = function(){
this.log("channel closed")
}
IframeMain.prototype.channelOnError = function(error){
this.log("channel error", error)
}
IframeMain.prototype.channelOnMessage = function(message, opt_param){
this.log("got message", message, opt_param)
this.parentWindowMessageSend({
type : "data",
data : message.data
});
}
|
Send a query to the server to create a channel and get its identifying token
|
IframeMain.prototype.channelConnect = function(resource){
var self = this;
var clientId = "ezChannel"+Math.floor(Math.random()*99999);
var callUrl = "/createChannel"
+ "?callback=?"
+ "&resource=" + encodeURIComponent(resource)
+ "&clientId=" + encodeURIComponent(clientId);
this.log("callUrl", callUrl)
jQuery.getJSON(callUrl, function(token){
self.channelCtor(token, resource, clientId);
});
}
|
Send message to AppEngine REST API
|
IframeMain.prototype.channelSend = function(resource, message){
var self = this;
var callUrl = "/sendToResource"
+ "?resource=" + encodeURIComponent(resource)
+ "&message=" + encodeURIComponent(message);
this.log("sendToResource callurl", callUrl)
jQuery.post(callUrl, function(result){
self.log("message sent")
})
}
IframeMain.prototype.parentWindowMessageCtor = function(){
var self = this;
window.addEventListener("message", function(event){
if(event.origin == "http:
self.log("recevied message from caller", event)
self.parentWindowMessageRecv(event);
}, false);
}
IframeMain.prototype.parentWindowMessageDtor = function(){
}
|
notify the parent window
|
IframeMain.prototype.parentWindowMessageSend = function(data){
this.log("iframe notify", data)
window.parent.postMessage(JSON.stringify(data), "*");
}
|
Handle message from the parent window
|
IframeMain.prototype.parentWindowMessageRecv = function(domEvent){
var eventFull = JSON.parse(domEvent.data);
var eventType = eventFull.type;
var eventData = eventFull.data;
this.log("eventType", eventType, "eventData", eventData)
if( eventType == "connect" ){
this.channelConnect(eventData.resource)
}else if( eventType == "data" ){
this.channelSend(this.connectedRsc, eventData.message);
}
}
jQuery(function(){
var iframeMain = new IframeMain();
});
|