Forumotion Chatbox

Hello everyone,

As you probably know, the default FM chatbox is not really great, especially because it disconnects you after being inactive for a few time. For the last few days, I've being working on a custom made chat that does not have that problem. It uses a topic as a database, because FM doesn't allow access to our forum's database.

The chat is still in beta version, so it will probably have bugs. If you find any, please report them here. If you have the viewtopic_body or index_body templates modified, the code might not work on your forum. You'll have to post those templates and your forum's url here if you need help.

If you want to use this chat in your forum, these are the steps you'll have to follow:
1.Create a forum with whatever name and descriptions you want. You have to set the permissions so that the users that you want to be able to use the chat can view this forum and write posts in it.
2.Create a topic in that forum. Put whatever name and content you want.
3.Add this JS code with placement on the index:

Code:

window.chat={};
chat.config={
sending:0, //Do not modify//
tpic:0, //Do not modify//
more_tabs:0,
on:0, //Do not modify this//
version:0, //Edge ,phpBB3, punBB, phpBB2, Invision//
activ:1,
guests:1,
banned:[],
mods:[],
custom_placement:"",
main_room:"/t3-chattopic?view=newest",
chat_forum:"/f3-chatbox",
lang:{
head:"Chatbox",
no_localStorage:"Your browser does not support the localStorage API",
opened:"The chat is already opened in another tab",
view_list:"View the list of chat rooms",
main_room:"Open the main room",
create_room:"Create a new chat room",
chat_member:"Chat with a forum member",
loading:"Loading messages...",
placeholder:"Write something here",
send:"SEND",
error:"Your message could not be send",
too_short:"You cannot post an empty message",
succes:"Message sent succesfully"
}
};
chat.oldmes=[];
chat.newmes=[];
chat.newavatars=[];
chat.oldavatars=[];
chat.newnames=[];
chat.oldnames=[];
chat.toadd=[];
chat.container=[
"#main-content",
"#main",
"#main",
"#content-container",
"#content-container"
][chat.config.version];
chat.message=[
".postbody>.content>div",
".postbody>.content>div",
".entry-content>div>div:not(:empty)",
".postbody>div:not(:empty)",
".post-entry>div:not(:empty)"
][chat.config.version];
chat.uname=[
".username>a",
".postprofile>dl>dt>strong>a",
"h4.username>a",
".name>strong>a",
".postprofile-details>dt>a:has(span)"
][chat.config.version];
chat.avatar=[
".user-avatar>a",
".postprofile>dl>dt>a",
".user-basic-info>a",
".postdetails>a",
".postprofile-details>dt>a:has(img)"
][chat.config.version];
chat.check=function(){
if(typeof localStorage!="object"){
$("#content_chat").append("<span>"+chat.config.lang.no_localStorage+"</span>");
} else {
if(localStorage.getItem("chat_opened")=="1"){
$("#content_chat").append("<span>"+chat.config.lang.opened+"</span>");
} else {
localStorage.setItem("chat_opened", "1");
chat.config.on=1;
}
}
};
chat.ajax=function(link, oldars, ars, elements, callback){
$.get(link, function(data){
var h;
var el_len=elements.length;
var i=0;
for(i;i<el_len;i++){
h=$(data).find(elements[i]);
var len=h.length;
var j=0;
for(j;j<len;j++){
oldars[i][j]=ars[i][j];
ars[i][j]=h.eq(j).html();
};
};
callback();
});
};
chat.chat_html="<div id='chat_c'><div id='chat_head' class='color-primary'>"+chat.config.lang.head+"</div><div id='content_chat' class='center'><span id='chat_main'><span class='color-primary'>"+chat.config.lang.main_room+"</span></span><span id='chat_new'><span class='color-primary'>"+chat.config.lang.create_room+"</span></span><span id='chat_list'><span class='color-primary'>"+chat.config.lang.view_list+"</span></span><span id='chat_member'><span class='color-primary'>"+chat.config.lang.chat_member+"</span></span></div></div>";
window.onbeforeunload=function(){
if(chat.config.on && typeof localStorage=="object"){
localStorage.removeItem("chat_opened");
};
};
chat.css="<style>#chat_c{margin-top:3px}#chat_head{padding:10px;background:#023838;color:#f2f2f2}#content_chat{height:300px;max-height:300px;min-height:300px;background:#eee;border:2px solid #AEB3B5;border-top:0;overflow-x:auto}.center{text-align:center;padding:5px}#content_chat>span{padding-top:100px;display:inline-table;width:25%;height:200px}#content_chat>span>span{opacity:.8;padding:4px;background:#023838;color:#f2f2f2}#content_chat>span>span:hover{cursor:pointer;opacity:1}#avatar_chat>img{width:30px;height:30px;border-radius:100%}#chat_group{text-align:center;display:inline-table;border-right:2px solid #AEB3B5}#text_chat{display:inline}#message_chat{border-bottom:2px solid #AEB3B5;padding:3px}#chat_form{border:2px solid #AEB3B5;border-top:0;padding:3px}#chat_form>input{padding:5px;border-radius:0;background:#f2f2f2;color:#2f2f2f;border:2px solid #AEB3B5;margin-right:2px}.cursor_x:hover{cursor:not-allowed}</style>";
chat.edge_css="<style>#chat_c{margin-top:3px}#chat_head{padding:10px}#content_chat{height:300px;max-height:300px;min-height:300px;background:#eee;border:2px solid #AEB3B5;border-top:0;overflow-x:auto}.center{text-align:center;padding:5px}#content_chat>span{padding-top:100px;display:inline-table;width:25%;height:200px}#content_chat>span>span{opacity:.8;padding:4px;color:#f2f2f2}#content_chat>span>span:hover{cursor:pointer;opacity:1}#avatar_chat>img{width:30px;height:30px;border-radius:100%}#chat_group{text-align:center;display:inline-table;border-right:2px solid #AEB3B5}#text_chat{display:inline}#message_chat{border-bottom:2px solid #AEB3B5;padding:3px}#chat_form{border:2px solid #AEB3B5;border-top:0;padding:3px}#chat_form>input{padding:5px;margin-right:2px}.cursor_x:hover{cursor:not-allowed}</style>";
chat.init=function(){
if(!chat.config.activ || (_userdata.session_logged_in==0 && chat.config.guests===0)) return false;
$(chat.config.custom_placement!=""?chat.config.custom_placement:chat.container).prepend(chat.chat_html);
chat.check();
$("body").append(chat.config.version==0?chat.edge_css:chat.css);
if(chat.config.on==0 && chat.config.more_tabs==0){
$("#content_chat").html("<span id='warning'>"+chat.config.lang.opened+"</span>");
return false;
};
$("#chat_main>span").click(function(){
$("#content_chat").fadeOut("fast", function(){
$("#content_chat").html("<span id='loading'>"+chat.config.lang.loading+"</span>").fadeIn("fast");
});
chat.main_chat.start();
});
};
chat.null=function(){
};
chat.main_chat={
on:1,
cback:function(){
if(chat.main_chat.on){
chat.ajax(chat.config.main_room, [chat.oldmes, chat.oldnames, chat.oldavatars], [chat.newmes, chat.newnames, chat.newavatars], [chat.message, chat.uname, chat.avatar], chat.main_chat.cback);
chat.filter_data();
} else {
chat.filter_data();
};
},
start:function(){
chat.config.tpic=parseInt(chat.config.main_room.match(/\d+/));
chat.ajax(chat.config.main_room, [chat.oldmes, chat.oldnames, chat.oldavatars], [chat.newmes, chat.newnames, chat.newavatars], [chat.message, chat.uname, chat.avatar], chat.main_chat.cback);
},
stop:function(){
chat.main_chat.on=0;
}
};
chat.filter_data=function(){
var len=chat.oldmes.length;
var i=0;
chat.toadd=[];
for(i;i<len;i++){
if(chat.oldmes[i]!=chat.newmes[i]){
chat.toadd.push("<div id='message_chat'><div id='chat_group'><div id='avatar_chat'>"+chat.newavatars[i]+"</div><div id='name_chat'>"+chat.newnames[i]+"</div></div><div id='text_chat'>"+chat.newmes[i]+"</div></div>");
};
};
if(chat.toadd.length!=0) chat.update_messages();
};
chat.update_messages=function(){
if($("#loading").length!=0){
$("#loading").remove();
$("#content_chat").removeClass("center");
$("#content_chat").after("<div id='chat_form'><input type='text' id='chat_input' placeholder='"+chat.config.lang.placeholder+"'/><input type='button' value='"+chat.config.lang.send+"'/></div>");
$("#chat_form>input[type='button']").click(function(){
if(chat.config.sending==0){
var val=$("#chat_form>input[type='text']").val();
if(val.length==0){
$("#chat_form").append("<span>"+chat.config.lang.too_short+"</span>");
} else {
$("#chat_form>input[type='button']").addClass("cursor_x");
chat.config.sending=1;
chat.send(chat.config.tpic, val, chat.send_success, chat.send_error, chat.after_send);
};
};
});
};
var i=0, len=chat.toadd.length;
for(i;i<len;i++){
$("#content_chat").append(chat.toadd[i]);
};
chat.scroll();
};
chat.send=function(topic, message, callback_succes, callback_error, callback_always){
$.post("/post", {
mode:"reply",
t:topic,
message:message,
post: "Ok"
}).done(function(){
callback_succes();
}).fail(function(){
callback_error();
}).always(function(){
callback_always();
});
};
chat.send_error=function(){
$("#chat_form").append("<span>"+chat.config.lang.error+"</span>");
setTimeout(function(){
$("#chat_form>span").fadeOut("fast", function(){
$("#chat_form>span").remove();
});
}, 2000);
chat.config.sending=0;
$("#chat_form>input[type='button']").removeClass("cursor_x");
};
chat.send_success=function(){
$("#chat_form>input[type='button']").removeClass("cursor_x");
$("#chat_form").append("<span>"+chat.config.lang.succes+"</span>");
setTimeout(function(){
$("#chat_form>span").fadeOut("fast", function(){
$("#chat_form>span").remove();
});
}, 2000);
$("#chat_form>input[type='text']").val("");
chat.config.sending=0;
};
chat.after_send=function(){
$("#chat_form>input[type='button']").removeClass("cursor_x");
$("#chat_form>input[type='text']").val("");
chat.config.sending=0;
};
chat.scrolled=false;
chat.scroll=function(){
if(!chat.scrolled){
elem=$("#content_chat");
elem.scrollTop=elem.scrollHeight;
};
};
$("#content_chat").on('scroll', function(){
chat.scrolled=true;
});
$(function(){
chat.init();
});

4.Modify the code:
Find

Code: version:0

and replace 0 with:
1->if you're forum's version is phpBB3, 2->if you're forum's version is punBB, 3->if you're forum's version in phpBB2, 4->if you're forum's version is Invision
If you use Edge, than you don't have to modify that.
Find

Code: activ:1,

and replace 1 with 0 to deactivate the chat without deleting the script.
Find

Code: main_room:"/t3-chattopic?view=newest",

and replace t3-chattopic with the link of the topic you created at step 2.
Find

Code: chat_forum:"/f3-chatbox",

and replace f3-chatbox with the link of the forum you created at step 1.
You can also modify the lang object.

Enjoy!

Hello @Wolfuryo,

Thanks for sharing your work. So i've tested the code and the chat appears normally. But there are some bugs and here they are:

I followed the steps and i installed the "Chat" which is something similar to what Ange Tuteur made with the messanger but still. So i made the topic and then i tried to post and it said it was successfully sent but it wasn't.


Also, all other buttons besides chat do not work.


The version i tried was phpbb3 and with the default theme.

Am I imagining things or is this thread pretty much like this one?
Unless this is posted by the same person, on both forums, just with different names.. If it is, then my bad~ ^^

@Valoish Yeah Wolfuryo is Andrei, I think. lol

I made a quick test and it works pretty well so far. I noticed a few bugs though :

• Editing posts creates a new message instead of updating the old one
  
• The chatbox doesn't scroll to the newest message
  
• The chatbox doesn't work on forums with "Unauthorize unofficial forms to post messages and private messages on the forum" enabled
  
• The script doesn't automatically add "?view=newest" to the provided chat URL. (not everyone will know to include / keep this, so I recommend adding it if it's not present)
  

I also have a small suggestion : Add a delay between requests when checking for new messages. From what I could tell, request after request was being sent without much delay which can :
1. Be heavy on the user system and data plan.
2. It may be seen as an "attack" on Forumotion's servers which can lead to temporary denial of service on the user-end. It's a free service, so we should try to respect that.

In regards to delay, I recommend a range of 3 to 10 seconds between requests. Plus a timeout due to inactivity would help reduce further requests sent to the server ; Imagine the user leaves their phone or computer on the page and it keeps sending requests while their away. That data will eventually add up, so we should try to reduce it by halting requests until activity resumes.

Valoish wrote:Am I imagining things or is this thread pretty much like this one?
Unless this is posted by the same person, on both forums, just with different names.. If it is, then my bad~ ^^

Yes they are the same person @Valoish! Different usernames!

Thanks for clarifying Ange and Luffy ^^

Wolfuryo=Andrei=R1bb0N This are the usernames I use on the fm forum's. For now, just the first button is working, but the other ones will work in the next versions.
@Ange Tuteur, yes, the code creates a new post everytime a user sends a message to the chat. Otherwise, we would have to make everyone moderator for them to be able to access the chat. Also, I'll add the delay you've been talking about.

About the fact that this chat is similar to what Ange developed, I can say that I didn't copy it(and I think Ange can confirm what I say). Anyway, the reason why I started working on this was more to test my JS skill and learn new things. I thought about doing it for quite some time, but I had not got enough JS knowledge.

Ange is a different member. To tag Ange Tuteur, you have to do this:

Code:

@"Ange Tuteur"

Thanks for that, I edited my post. Someone got a surprise notification )

You're welcome.

As i mentioned above i have had some issues with this! Just a heads up.

This is a beta version, only the main chat works for now. About the sending messages issue, you have to go to the ACP->General->Security. Find Unauthorize unofficial forms to post messages and private messages on the forum and set it to NO. If it doesn't work, I'll need your forum link.

Wolfuryo wrote:This is a beta version, only the main chat works for now. About the sending messages issue, you have to go to the ACP->General->Security. Find Unauthorize unofficial forms to post messages and private messages on the forum and set it to NO. If it doesn't work, I'll need your forum link.

Yes with that works but i believe you should have it written within the first topic so other members who test this know!

Wolfuryo wrote:@Ange Tuteur, yes, the code creates a new post everytime a user sends a message to the chat. Otherwise, we would have to make everyone moderator for them to be able to access the chat. Also, I'll add the delay you've been talking about.

Sorry, I think my wording could've been better ; I meant when editing one of your messages in the chatbox topic (any message), it creates a new entry in the chatbox rather than updating the message content of the post which was edited.

Also, if you want the chatbox to work on forums with the security option enabled, you need to retrieve the auth data from the quick reply or post reply forms. Usually it's just better to get the entire form, edit the necessary data, serialize it, and then POST it over AJAX. This is what the form data I'm talking about looks like :

It contains the auth data, post mode, topic id, etc..

If you try to submit a form like this without the auth data, you usually get "A browser error occurred [Error #230], please contact technical support." if the security option is enabled.

Can a moderator please close this topic and send it to garbage? I decided to start from scratch and I created another chat that is way better than this one, has less bugs and also has a better design. I'll make a new topic for it once this one is garbaged.

A screenshot of the new chat: