Guys i am building a chatroom similar to yahoo chat. Have got an error while implementing one to one chat. The thing is that I am using a jQuery plug in to add and manage chat boxes.
the plugin is
you will find the code for chatbox plugin in the below link
http://magma.cs.uiuc.edu/wenpu1/chatbox.html
the problem is that i am getting an error in my console that addMsg is not found. I tried to research about it(to check if the headers are repeated) but I am not able to find a solution.
my chatroom code is:
<!DOCTYPE HTML >
<html>
<head>
<title>chat room</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<link rel="stylesheet" href="http://magma.cs.uiuc.edu/wenpu1/css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="http://magma.cs.uiuc.edu/wenpu1/js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="http://magma.cs.uiuc.edu/wenpu1/css/jquery.ui.chatbox.css" rel="stylesheet" />
<script type="text/javascript" src="http://magma.cs.uiuc.edu/wenpu1/js/jquery.ui.chatbox.js"></script>
<script type="text/javascript" src="http://magma.cs.uiuc.edu/wenpu1/js/chatboxManager.js"></script>
</head>
<body style="background-image:url(http://fc08.deviantart.net/fs70/i/2011/341/2/0/extremely_simple_youtube_background_by_rainmeterarts-d4ignxm.png);background-repeat:no-repeat;background-position: 310px 0px;">
<fieldset id="field1" style=" margin:180px;
margin-left:570px;
font-family:verdana;
width:278px;
border-style:groove;
border-color:#8AB8E6;
border-width: 1em;">
<h2 style="font-family:verdana;color:#336680;">chat box</h2>
<div id="div1">
<textarea id="display" class="textarea1" rows="20" cols="35" disabled style="font-family:verdana;font-size:1em; border-style:solid;background:transparent;"></textarea>
</br>
</div>
<div id="div2">
<form name="form" action="/Say" method="GET" id="form" enctype="text/plain">
<input type="text" id="textbox1" style=" height:40px; width:215px;border-style:groove;">
<input type="button" value="send" class="submit" id="login" onclick="say();" style=" height:40px;width:80px;">
</form>
</div>
</fieldset >
<div id="friendsListPage">
</div>
<form name="input" action="/chatroom" method="GET" id="form1" enctype="text/plain">
<fieldset id="field2"
style="margin:290px;
margin-left:550px;
font-family:verdana;
font-size:1em;
width:348px;
border-style:groove;
border-color:#8AB8E6;
border-width: 1em;">
<h2 style="font-family:verdana;color:#336680;">LOG IN TO CHAT</h2>
USER_ID: <input type="text" id="textbox2" name="clientid" style=" height:40px;width:165px;border-style:groove;">
<input type="button" value="login" class="button" id="login" style="font-size:1em;font-family:verdana; height:40px; width:80px">
</fieldset>
<div id="chat_div">
</div>
<hr />
<div id="log">
</div>
</form>
<script type="text/javascript">
var clientid;
var flag=0;
var counter = 0;
var idList = new Array();
$(document).ready(function(){
$("#field1").hide();
$(".button").click(function(){
clientid = $("#textbox2").val();
$("#field2").hide();
$("#field1").fadeIn(2500);
var form=$('#form1');
$.get(form.attr('action'),$(form1).serialize(),function(data,status){
$('#display').val(" Welcome to our chatroom "+clientid);
channel = new goog.appengine.Channel(data.token);
socket = channel.open();
socket.onopen = onOpened;
socket.onmessage = onMessage;
socket.onerror = onError;
socket.onclose = onClose;
}
)
});
});
function onOpened() {
// event handler from when Connection has established.
}
function say() {
// send message to server, to be distributed to all
$.ajax({
url:"/Say",
type: "GET",
data:"message="+$("#textbox1").val()+"&clientid="+clientid,
dataType:"json",
success:function(data)
{
}
});
$('#textbox1').val('').focus();
return false;
}
function onMessage(msg)
{
var x=1;
var obj = JSON.parse(msg.data);
if(obj.msgtype=="cidlist")
{
if(flag==0){
flag=1;
var friendslist= new Array();
for ( x in obj.clientidlist) {
if(obj.clientidlist[x]===clientid)
{
return;
}
else
{
friendslist.push(obj.clientidlist[x]);
var a = "<a id='"+friendslist[x]+"' >"+friendslist[x]+"</a>";
var txt = document.createElement("div");
txt.innerHTML = a;
txt.style.cursor="pointer";
txt.setAttribute("onclick","openchat(\""+friendslist[x]+"\");");
document.getElementById("friendsListPage").appendChild(txt);
}
}
}
}
else if(obj.msgtype=="joinedchatroom")
{
$('#display').val($('#display').val()+msg.data+" ");
var a = "<a id='"+obj.clientid+"' >"+obj.clientid+"</a>";
var txt = document.createElement("div");
txt.innerHTML = a;
txt.style.cursor="pointer";
txt.setAttribute("onclick","openchat(\""+obj.clientid+"\");");
document.getElementById("friendsListPage").appendChild(txt);
}
else if(obj.msgtype=="private")
{
var x=0;
var e=0;
alert("new msg from "+obj.sender +" msg is "+ obj.message);
for(var i=0;i<idList.length;i++)
{
if(obj.sender==idList[i])
{
alert("inside if");
$("#" + idList[i]).chatbox("option", "boxManager").addMsg(obj.sender, obj.message); //getting an error on this line
e++;
}
}
if(e==0)
{
openchat(obj.sender,obj.message);
}
}
}
function openchat(reciever,msg) {
chatboxManager.init({messageSent : function(reciever,msg)
{
alert("reciever is"+reciever);
$("#" + reciever ).chatbox("option", "boxManager").addMsg(clientid, msg); //error on this line
$.ajax({
url:"/Privatemessage",
type: "GET",
data:"message="+msg+"&reciever="+reciever+"&sender="+clientid,
dataType:"json",
success:function(data)
{
}
});
}
});
var id = reciever;
idList.push(reciever);
chatboxManager.addBox(id,
{dest:"dest" + counter, // not used in demo
title:"box" + counter,
first_name: id,
last_name: "sender "+clientid
});
alert("end");
event.preventDefault();
}
</script>
</body>
</html>