Getting started with JavaScript

Starter files

Download the meebo platform starter pack - JavaScript.

Connecting to meebo

Applications will be loaded inside an IFrame in a meebo IM window. When loaded, four parameters will be passed as a query string to the app URL you have specified for your application's location (when you registered your app). Your code will be responsible for parsing the parameters for use with the meebo API.

The parameters are:

app_instance_id: application id, pass to meebo.registerApp
platform_instance_id: platform instance id, pass to meebo.init
time: a Unix timestamp
hash: a hash of the parameters combined w/ the shared secret

Note: meeboapputils.py is a CGI script will verify that a given set of arguments is valid and has been signed using the meebo/application shared secret. To use, find the get_secret function in the file and fill in your shard secret.

def get_secret(app_name):
    return "YOUR SHARED SECRET HERE"

Initialization

General flow for getting your application fully connected to the meebo session:

Create an HTML page (index.html) with the following contents:

<html>
<head>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="meebo.js"></script>
</head>
<body onload="my_meebo_init()" style="overflow: hidden;">
<textarea style="width: 100%; height: 100%" id="output">
</textarea>
</body>
</html>

Create a file called main.js with the following contents:

// parse out GET parameters
var GET = {};
var loc = String(document.location);
var pieces = loc.substr(loc.indexOf('?') + 1).split('&');

for (var i = 0; i < pieces.length; i++) {
    var keyVal = pieces[i].split('=');
    GET[keyVal[0]] = decodeURIComponent(keyVal[1]);
}

var app_instance_id = GET['app_instance_id'];
var platform_instance_id = GET['platform_instance_id'];
var me = null;

Copy the file called meebo.js from your starter pack to the same directory. Open it up and find this line:

html += '<param name="movie" value="/flash/meebo_platform_client.swf" />';
Change the /flash/ portion of the string to be the location where your app is hosted (the app url that you filled in when you registered.
html += '<param name="movie" value="http://YOUR_APP_URL/meebo_platform_client.swf" />';
Next, find the line:

html += '<embed src="/flash/meebo_platform_client.swf" quality="high"\
and fill in the same location of your app:

html += '<embed src="http://YOUR_APP_URL/meebo_platform_client.swf" quality="high"\
Call meebo's init function with the platform_instance_id, and a function to call when initialization is complete.
```
function my_meebo_init() {
   meebo.init(GET['platform_instance_id'], onInit);
}
```
Define the callback function you provided to meebo.init(). It should:
- register any callback functions to handle asynchronous events coming back from meebo using the registerCallback method
- Call the registerApp method with the app_instance_id.
- Call the onStart method to let meebo know that everything is setup on your end.
```
function onInit() {
   meebo.registerCallback('registered', registered);
   meebo.registerCallback('receivemsg', receiveMsg);
   meebo.registerCallback('join', join);
   meebo.registerCallback('leave', leave);

   meebo.registerApp(GET['app_instance_id']);

   meebo.onStart();
} 
```
Upon being registered, you'll be connected to the meebo session and will then be able to receive and send meebo API events!

Callbacks

As noted above, you'll have to register a select number of callbacks. They are as follows (feel free to copy the code snippets, they will print out debug statements to the application window):

registered(): The application has been successfully registered.
function registered() { }

receivemsg(msg): Incoming message from the Application or a user.

function receiveMsg(msg) {
    outputStr('RECEIVEMSG\n' + msg);
}

join(user): User has joined the room. Parameter is a user object.

function join(user) {
    outputStr('JOIN\n' + userToString(user))
    meebo.sendMsg(user, meebo.MSG_TYPE_APP);
    meebo.sendMsg('platform test says ' + user.alias + ' has joined the room', meebo.MSG_TYPE_IM);
}

leave(user): User has left the room. Parameter is a user object.

function leave(user) {
    outputStr('LEAVE\n' + userToString(user))
}

changealias(user): User has changed his alias. Parameter is a user object.

function changeAlias(user) {
    outputStr('CHANGEALIAS\n' + userToString(user))
}

error(error_code, error_msg): An error has occurred.
```
function error(code, msg) { }
```
debug(msg): Platform emits a debug message.
```
function debug(msg) { }
```

outputStr is a debugging function that prints a message to the text area inside this sample application:

function outputStr(str) {
    var output = document.getElementById('output');
    var isAtBottom = output.scrollTop > output.scrollHeight - output.clientHeight;
    output.value += '*******************\n' + str + '\n';
    if (isAtBottom) {
        output.scrollTop = output.scrollHeight;
    }
}

Messaging

We provide a primitive framework for sending and receiving different types of messages between instances/participants of your application. You can create a multi-player game simply using the message passing system within the meebo platform.

sendMsg(msg, msg_type, alias = null);

There are 2 types of messages:

MSG_TYPE_APP: Messages will be delivered to the application for handling. Use this type to pass data messages back and forth. msg must be an Object:
{ player : 'username', move : 'k2' }
```
meebo.sendMsg({
    type: "action",
    isAlive: "true",
    name: "futurama"
}, meebo.MSG_TYPE_APP);
```
MSG_TYPE_IM: Messages will be delivered to the IM window chat history for display. msg must be a string.
meebo.sendMsg('platform test says ' + user.alias + ' has joined the room', meebo.MSG_TYPE_IM, null);