With Plupper, you can even implement your own web chat client. All you need is 2 plupper's message API methods and some jQuery stuff around.
The read method is implemented using the Comet technique. This means that your request will be "long polled" until the message arrives.
Example shows how you can implement your own simple chat client.
<html>
<head>
<title>TEST</title>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://static.plupper.com/js/plupper.js"></script>
</head>
<body>
<div id="header">My First Chat</div>
<div id="chatPane"></div>
<textarea id="inputArea"></textarea>
<script type="text/javascript">
var chat = {
accountName:"accountName@plupper.com",
count:0,
mainUrl: 'http://api.plupper.com/resources/message',
read:function() {
$.ajax({
type: "GET",
url: chat.mainUrl + '/read',
data: {
p:chat.accountName,
v:plupper.getVisitorUUID(),
c:(++chat.count)
},
dataType:"json",
success: function(json) {
if(json !== null && json.message !== null) {
chat.addOutputText(json.operatorName + ": " + json.message);
}
setTimeout("chat.read();", 1);
}
});
},
addOutputText:function(text) {
$("#chatPane").append(text + "</br>");
},
sendMessage:function(message) {
$.ajax({
type: "POST",
url: chat.mainUrl,
data: {
p: chat.accountName,
v: plupper.getVisitorUUID,
content: message
},
success: function() {
chat.addOutputText("me: " + message);
}
});
}
};
$(document).ready(function() {
$(window).keypress(function(e) {
if (e.keyCode == 13) {
chat.sendMessage($("#inputArea").val());
$("#inputArea").val("");
}
});
chat.read();
});
</script>
</body>
</html>
