html5-RockPaperScissors

RockPaperScissors on WebSocket

main

web/main.js

Iframe Main handle the behavior of the iframe

ctor/dtor

var IframeMain	= function(){
	this.connectedRsc	= null;
	// init this object
	this.log		= IframeMain.log;
	// create the parentWindow and wait for message
	this.parentWindowMessageCtor()
}
IframeMain.prototype.destroy	= function(){
}

Log function for the class

IframeMain.log	= function(){}
//IframeMain.log	= function(){ console.log.apply(console, arguments) }


//////////////////////////////////////////////////////////////////////////////////
//										//
//////////////////////////////////////////////////////////////////////////////////

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;
		
		// send the clientId to the parent window
		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){
		// ignore the message received due to ChannelAPI itself
		if(event.origin == "http://talkgadget.google.com")	return;
		// log the event
		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){
	// parse the event from the iframe
	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(){
	//IframeMain.log	= function(){ console.log.apply(console, arguments) }	
	var iframeMain	= new IframeMain();
});