The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forumotion Chatbox

View previous topic View next topic Go down

Forumotion Chatbox

Post by Justice™ on May 20th 2017, 6:56 pm

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!
avatar
Justice™
Forumember

Posts : 520
Reputation : 120
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Forumotion Chatbox

Post by Luffy on May 20th 2017, 9:26 pm

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.





avatar
Luffy
Manager
Manager

Male Posts : 4866
Reputation : 492
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Re: Forumotion Chatbox

Post by Valoish on May 20th 2017, 9:54 pm

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~ ^^
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Re: Forumotion Chatbox

Post by Ange Tuteur on May 20th 2017, 10:39 pm

@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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2880
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Forumotion Chatbox

Post by Luffy on May 20th 2017, 10:39 pm

@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! Smile





avatar
Luffy
Manager
Manager

Male Posts : 4866
Reputation : 492
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Re: Forumotion Chatbox

Post by Valoish on May 20th 2017, 11:03 pm

Thanks for clarifying Ange and Luffy ^^
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Re: Forumotion Chatbox

Post by Justice™ on May 21st 2017, 5:06 am

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.


Last edited by Wolfuryo on May 21st 2017, 6:31 am; edited 1 time in total
avatar
Justice™
Forumember

Posts : 520
Reputation : 120
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Forumotion Chatbox

Post by SLGray on May 21st 2017, 6:28 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40855
Reputation : 2773
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Forumotion Chatbox

Post by Justice™ on May 21st 2017, 6:33 am

Thanks for that, I edited my post. Someone got a surprise notification Smile)
avatar
Justice™
Forumember

Posts : 520
Reputation : 120
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Forumotion Chatbox

Post by SLGray on May 21st 2017, 6:35 am

You're welcome.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40855
Reputation : 2773
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Forumotion Chatbox

Post by Luffy on May 21st 2017, 1:50 pm

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





avatar
Luffy
Manager
Manager

Male Posts : 4866
Reputation : 492
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Re: Forumotion Chatbox

Post by Justice™ on May 21st 2017, 2:56 pm

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.
avatar
Justice™
Forumember

Posts : 520
Reputation : 120
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Forumotion Chatbox

Post by Luffy on May 21st 2017, 4:03 pm

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! Wink





avatar
Luffy
Manager
Manager

Male Posts : 4866
Reputation : 492
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Re: Forumotion Chatbox

Post by Ange Tuteur on May 21st 2017, 4:49 pm

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2880
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Forumotion Chatbox

Post by Justice™ on June 22nd 2017, 11:05 am

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:
avatar
Justice™
Forumember

Posts : 520
Reputation : 120
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: Forumotion Chatbox

Post by Draxion on June 22nd 2017, 12:06 pm

Topic moved to the garbage as requested.
Please read our forum rules: ESF General Rules


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum