The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Forumotion Chatbox

5 posters

Go down

Forumotion Chatbox Empty Forumotion Chatbox

Post by Guest 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
Guest
Guest


Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by TheCrow 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.
Forumotion Chatbox B2123710

Also, all other buttons besides chat do not work.
Forumotion Chatbox 05a05810

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

Male Posts : 6787
Reputation : 788
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

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

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

View user profile http://www.canvastutorials.org/

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

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

Male Posts : 13244
Reputation : 2991
Language : English & 日本語
Location : Pennsylvania

View user profile https://fmdesign.forumotion.com

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by TheCrow 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
TheCrow
TheCrow
Manager
Manager

Male Posts : 6787
Reputation : 788
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

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

Thanks for clarifying Ange and Luffy ^^
Valoish
Valoish
Forumember

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

View user profile http://www.canvastutorials.org/

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by Guest 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
Guest
Guest


Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

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

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


Forumotion Chatbox Slgray10

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

Male Posts : 50441
Reputation : 3478
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by Guest May 21st 2017, 6:33 am

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


Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

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

You're welcome.


Forumotion Chatbox Slgray10

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

Male Posts : 50441
Reputation : 3478
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by TheCrow May 21st 2017, 1:50 pm

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

Male Posts : 6787
Reputation : 788
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by Guest 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
Guest
Guest


Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by TheCrow 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
TheCrow
TheCrow
Manager
Manager

Male Posts : 6787
Reputation : 788
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by Ange Tuteur 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 :
Forumotion Chatbox Captur44
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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2991
Language : English & 日本語
Location : Pennsylvania

View user profile https://fmdesign.forumotion.com

Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

Post by Guest 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:
Forumotion Chatbox Screen13
avatar
Guest
Guest


Back to top Go down

Forumotion Chatbox Empty Re: Forumotion Chatbox

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

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


Forumotion Chatbox Draxio14
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 Forumotion Chatbox Solved11 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself
Draxion
Draxion
Support Moderator
Support Moderator

Male Posts : 2513
Reputation : 321
Language : English
Location : USA

View user profile https://www.talesoftellene.com/

Back to top Go down

Back to top

- Similar topics

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