3D Chess Google+ Hangout Plugin

gplus-hangout-60x230-normalThose days I’m working in Mobialia Chess&Chess at ICC with a lot of bug fixes and some new features… and as a side project I developed a “Mobialia Chess 3D” Google+ Hangout Plugin to play 3D Chess inside a Hangout.

You can start a chess hangout pressing the “Hangout” button in http://chess.mobialia.com or directly with the image button in this post. All the participants in the hangout can move the pieces, so it can be used to play video-call chess games or to teach chess lessons. Well, for less complicated gaming I prefer these. For more information about the latest trend on games, visit this website Casinospil.net

Technically it wasn’t very hard, the Google+ Hangouts API offers a shared state and notifications when the state changes, you can get all the API information at https://developers.google.com/+/hangouts/

I was thinking to use this API since I saw some hangout API demos by +Paul Kinlan at the BCN DevFest 2011, and recently  I had the final idea watching a Quobis WebRTC webinar.

I had only problems accessing frames from different domains, (prohibited to avoid Cross-Site-Scripting, XSS, attacks) because the hangout is hosted in a Google domain and the chess app in a different one.

To bypass those problems I used the HTML5 window.postMessage() API to send and receive messages between frames. You can send messages to frames in other domains passing two parameters to postMessage(): the message and the domain of the receiving frame:

<script type="text/javascript">
var message = "";
document.getElementById('iframeid').contentWindow.postMessage(message, "http://www.domain.com");
<iframe id="iframeid" height="100%" width="100%" src="http://www.domain.com/iframe.html"></iframe>

and in the receiving frame you must set a message listener:

window.addEventListener("message", function messageReceived(evt) {
    console.log("Receiving message from " + evt.origin + " : " + evt.data);

Note that you receive the origin domain, crucial because the domain of the hangout is different each time.