Life and Leisure. Tech and Toys.

While developing an application for Facebook I came across the LiveMessage feature which is currently still in beta. The only problem is that I couldn’t find much information on how people actually used the API version of it. LiveMessage seems like it could be a really useful function to leverage for real time applications, not just chatting.

I know javascript okay but working under the FBJS framework forces you to reference the Facebook Documentation Wiki more than I’d prefer. They also prevent you from employing any JS frameworks, like prototype.js, forcing you to use their proprietary functions.

In this chat example I used javascript, PHP, FB API and FBJS.

First, just like the example in the wiki we create a listener. Here I also use the add_message_line function used in the example.

<script type="text/javascript">
<!--
var livemessage = new LiveMessage('test_event', function(data) {
	add_message_line(data.name +": " + data.msg);

	}
);
function add_message_line(line_text) {
	var new_line = document.createElement('div');
	new_line.setTextValue(line_text);
	document.getElementById('chat').appendChild(new_line);
}
//-->
</script>

Then instead of using the send_message function in the wiki example I created my own function that does a POST to my own php file called chatTestSend.php which uses the facebook.livemessage.send() provided by the API. Doing it this way gave me a better understanding of what’s going on. I called this JS function sender(). Notice I used the FBJS Ajax object, you can read more about it here.

<script type="text/javascript">
<!--
function sender(uid, message){
	var ajax = new Ajax();
	var queryParams = { "uid" : uid, "message" : message };
	ajax.responseType = Ajax.RAW;
	ajax.requireLogin = true;

	ajax.post("http://YOURDOMAIN/chatTestSend.php", queryParams);	

	ajax.ondone = function(data) {
		add_message_line("Me: " + message);
		document.getElementById('message').setValue('');
	}
	ajax.onerror = function(data) { add_message_line("Error"); };
}
//-->
</script>

If you haven’t figured it out already this function is going to be called by an html form on the onSubmit event. The code below is similar to the example on the wiki. Combine the above javascripts with this file and call it something like chatTest.html.

<form action="#" method="post" onsubmit="sender(document.getElementById('chat_with').getValue(), document.getElementById('message').getValue()); return false;" >
<div id="chat"></div>
Message:
<input id="message" name="message" size="40" type="text" />
To (user id):
<input id="chat_with" name="chat_with" type="text" />
<input type="submit" />
</form>

And lastly, the php code of chatTestSend.php would do something like the following. Create the FB object and get the logged in user. Then, if the posts variables aren’t empty get the user’s name. Then call the method. Since there is no method in the php client lib use call_method. The only thing special about facebook.livemessage.send is that the message is sent using JSON. Luckily php 5 provides us with the json_encode() function. Pass an associative array into the json_encode function and you’re good to go.

$this->facebook = new Facebook($this->FBAPIKEY, $this->FBSECRET);
$this->user = $this->facebook->require_add();

if(!empty($_POST) && !empty($_POST["uid"]) && !empty($_POST["message"]) ) {
	$data = $this->facebook->api_client->users_getInfo($this->user, array('first_name'));
	$result = $this->facebook->api_client->call_method("facebook.livemessage.send",
	      array("recipient"=>$_POST["uid"], "event_name"=>"test_event", "message"=>json_encode(array("from"=>$this->user, "msg"=>$_POST["message"], "name"=>$data[0]['first_name']) ) ) );
}

So that’s about it. Open up chatTest.html and post to chatTestSend.php and send some messages to yourself. I concede that all of this probably won’t work right out of the box but with a little knowledge and tweaking you should be able to get it right. Drop me a comment if you need some help.