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.

RCHAT

View previous topic View next topic Go down

RCHAT

Post by Justice™ on June 23rd 2017, 6:37 pm

Hi everyone,

As you might already know, I have recently started developing a chatbox for forumotion forums. The latest version right now is 1.1.

Features

-Sending and receiving messages(obviously)
-Using emoticons just like you do when you write posts
-You can modify the texts(they are currently in English)
-Auto-Scroll when a new message appears
-When the chat is closed, you can see how many new messages are in the chat without opening it
-Ability to reset the chat(it automatically clears localStorage data and refresh the page)

How to install

Firstly, you have to create a special topic for the chatbox(forumotion doesn't allow us access to the database, so we'll to do it this way). The title of the topic can be anything you want, but the content has to be like this:
Code:
 <div id='chat_sis'><div id='chat_bl'><div id='chat_group'><div id='chat_avatar'><img src='http://i.imgur.com/vwHtfNb.png'/></div><div id='chat_name'>ChatBot</div></div><div id='chat_message'>Welcome to the chatbox! Please respect the forum's rules.</div></div></div>
You can modify
Code:
Chatbot
,
Code:
http://i.imgur.com/vwHtfNb.png
(the link of the bot's avatar) and
Code:
Welcome to the chatbox! Please respect the forum's rules.
After this, go to the ACP, at the javascript codes section and add a new javascript with this code:
Code:
window.Rchat={};
Rchat.lang={
btn_text:"Chatbox",
chat_head:"Chatbox",
reset:"Reset the Chatbox",
loading:"Loading...",
placeholder_input:"Write a message",
send:"Send",
no_empty:"You can't send an empty message",
emoji_head:"Emoticons"
};
Rchat.config={
html:"<div id='chat'><div id='chat_btn'>"+Rchat.lang.btn_text+" <span id='chat_btn_notif_con'><span id='chat_btn_notif'>0</span> <i class='fa fa-commenting'></i></span></div><div id='chat_inner'><div id='chat_head'>"+Rchat.lang.chat_head+"<span>"+Rchat.lang.reset+"</span></div><div id='chat_content'><center><br/><br/><span>"+Rchat.lang.loading+"</span></center></div><div id='chat_form'><input id='chat_form_input' placeholder='"+Rchat.lang.placeholder_input+"'></input><div id='chat_form_send'>"+Rchat.lang.send+"</div><div id='chat_btts'><div id='chat_smilies'><img src='https://imgfast.net/users/3614/12/33/96/smiles/251363279.png'/></div></div></div></div></div>",
topic:"/t22-chattopics",
delay:0
};
$(function(){
$("head").append("<script src='https://rawgit.com/Wolfuryo/RChat/master/main.min.js'></script><link type='text/css' rel='stylesheet' href='https://rawgit.com/Wolfuryo/RChat/master/main.min.css'/>");
});
You have to change
Code:
/t22-chattopics
with the link of the topic you created.
Now you can go to any page of your forum and start chatting.

Modifications

You can change the texts of the change by modifing the lang object. Also, you can change the time the chat waits before sending another request to the server to check for new messages:
Code:
delay:2000
. If you put a value that is less than 2000(2 seconds), you may run into the request limit exceeded problem.

Preview

This is the way the chat should look when you finish installation(the texts here are not in english, but the chatbox will be in english):


Bugs

If you find anything not working as it should, please say so by posting here or reporting the issue on GitHub(https://github.com/Wolfuryo/RChat/issues?q=is%3Aopen+is%3Aissue);

Ideas

Got an idea about what could be added to the chat? Feel free to post here or on GitHub(https://github.com/Wolfuryo/RChat/issues/2)


Last edited by Wolfuryo on June 25th 2017, 2:43 pm; edited 1 time in total
avatar
Justice™
Forumember

Posts : 517
Reputation : 119
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: RCHAT

Post by Ange Tuteur on June 25th 2017, 12:09 am

Hi,

I gave it a try and noticed a few things which are problematic.

  1. The chat doesn't work if HTML is disabled on the forum. (no messages appear) This may be a negative for some people who disabled HTML for security reasons. I'd suggest an option which allows you to choose the message formatting, like
    Code:
    format : 'bbcode'
    for example. Here's a bbcode example of the HTML : ( You may need to
    Code:
    display:block;
    the tables with this method )
    Code:
    [table class="chat_sis"][tr][td]
      [table class="chat_bl"][tr][td]
        [table class="chat_group"][tr][td]
          [table class="chat_avatar"][tr][td][img]http://i.imgur.com/vwHtfNb.png[/img][/td][/tr][/table]
          [table class="chat_name"][tr][td]USERNAME[/td][/tr][/table]
        [/td][/tr][/table]
        [table class="chat_message"][tr][td]MESSAGE[/td][/tr][/table]
      [/td][/tr][/table]
    [/td][/tr][/table]
    Also instead of Id's you should use classes. Id's are meant to be unique identifiers for a single element, whereas classes are used for a collection of elements. It may not have a major impact at run time, but semantically it can be confusing for those who may read your code.

    Anywho, if you want you can also use JSON to store and parse message data. Then all you need to do is just loop over the messages in a topic and parse their contents. You can also place the data in a bbcode table to make retrieval easier cross-version.
    Code:
    [table class="chat-data"][tr][td]JSON OR MESSAGE DATA[/td][/tr][/table]

  2. If you press "Send" multiple times with no message it spams the error message multiple times. I'd suggest adding a variable which tells the script that the error message is active before appending it. Once the timeout is complete you can set the variable to false so the error message can show again.

  3. In topics the SCEditor overlaps the chatbox, I'd recommend increasing the z-index so that the chat displays above the editor.


If I notice anything else I'll let you know. KIU thumright
avatar
Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: RCHAT

Post by Justice™ on June 25th 2017, 7:53 am

Thanks for the feedback, Ange! The issues will be fixed in the next version.
avatar
Justice™
Forumember

Posts : 517
Reputation : 119
Language : Romanian and English

http://board.realmsn.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