Advertisement:

Author Topic: Tutorial: how to COMPLETELY integrate FlashChat into SMF so you have a cool CHAT  (Read 295211 times)

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
Hello folks, this is my attempt to give something back to the community.
I am running SMF 1.0 RC1 and I wanted to have a chat in my board. I have tried about 3 or 4 scripts and I must say I couldn't deal with how slow Java chats are and how imprecisely those applets render on different browsers. I am a supporter of PHP's power and if that means I have to accept some Flash (Flash ain't that bad and is much muuuuch faster than java), I'll gladly do it as long as the chat has the features I wanted, first and foremost integration with SMF in terms of user database.
The chat that does that is FlashChat which you can buy at a honest and fair price (finally somebody understood you can't charge houndreds!) from http://www.tufat.com
I bought my software and installed the chat. I will not explain how to install it in SMF because the package contains pretty detailed instructions on how to do that (except the SMF integration instructions forget to tell you that you have to CHMOD 777 the appdata/appTime.txt file and forgets to provide you with the chat gif button that you'll be able to request to the software dude via email or download from somewhere else).
Once you install the chat you can further graphically enhance it and make it similar to your board by using styles and themes. Documentation is included (even if not excellent).
This said, here come my two cents:
What I did NOT like about this chat is the fact that it would open in a new window completely ignoring the template and style and theme of SMF. So you have a chat that recognizes your registered users because it uses the same database but it launches independently and looks completely different and is an "outsider" to the board. Here is how you can change this. These instructions will launch your chat inside the board's theme/template so that you still have the header of the board above the chat and the footer of the board below it. I hope you know what I mean. Basically you have your chat but above it you have that piece of SMF that you see in every single SMF page except the help pages. And same below.
Here is how (I assume that you installed SMF in the folder called /smf/ and that you are using the default theme - if you are not just change "/smf/" with the name of your smf folder on your server and change "default" with the name of your theme's folder inside the /Themes/ directory of yoru SMF installation):
1. open /smf/index.php
2. find this line:
Code: [Select]
'boardrecount' => array('Admin.php', 'AdminBoardRecount'),and after that code add this code:
Code: [Select]
'chat' => array('Chat.php', 'Chat'),3. create a file called Chat.php with your text-only editor such as NotePad (PC) or BBEdit (Mac) and add this code inside it:
Code: [Select]
<?php
if (!defined(&#39;SMF&#39;))
die(&#39;Hacking attempt...&#39;);

function Chat() {
// This is gonna be needed...
loadTemplate(&#39;Chat&#39;);
}
?>
4. save this file inside /smf/Sources
5. create a file called Chat.template.php with your text-only editor such as NotePad (PC) or BBEdit (Mac) and add this code inside it:
Code: [Select]
<?php
// Version: 1.0 RC1; Chat

function template_main()
{
global $context$settings$options$txt$scripturl;

echo &#39;
<script language="JavaScript" type="text/javascript"><!--
function checkAll(onOff)
{
for (var 0document.searchform.elements.lengthi++)
{
if (document.searchform.elements[i].name.substr(03) == "brd")
document.searchform.elements[i].checked onOff;
}
}
// --></script>
<form action="&#39;, $scripturl, &#39;?action=search2" method="post" name="searchform" id="searchform">
<table width="80%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td>&#39;, theme_linktree(), &#39;</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center" class="tborder">
<tr class="titlebg">
<td>Chat</td>
</tr><tr>
<td class="windowbg">&#39;;

// load the chat
echo &#39;<iframe width="100%" height="450" src="http://www.yourserver.com/smf/FlashChat/flashchat.php"></iframe>&#39;;

echo &#39;
</td>
</tr>
</table>
</form>&#39;;
}

?>
6. save this file inside /smf/Themes/default/
7. the code above assumes that your server is called www.yourserver.com and that you have installed SMF in the root's folder "smf" and FlashChat in its subfolder "FlashChat". You don't need the full URL, you can also (and it is recommended that you do) use "FlashChat/flashchat.php" as your URL if you have created the "FlashChat" folder inside the "smf" folder. Change paths according to your installation. [#NOTE: please read note below]
8. in that same folder open /smf/Themes/default/index.template.php and at the end of the file (I am assuming that you have ALREADY installed FlashChat and followed all the SMF integration instructions carefully, thus modified this file beforehand) find this bit of code:
Code: [Select]
<a href="', $GLOBALS['boardurl'], '/FlashChat/flashchat.php">and change just that one bit of code (which is part of an entire line of code - you are NOT supposed to change or delete the rest of that line) it into this:
Code: [Select]
<a href="', $scripturl, '?action=chat">
#NOTE: I have resorted to using iframe because I could not get include or require to work but if some PHP genius out there can explain me why I wouldn't be able to include("http://www.yourserver.com/smf/FlashChat/flashchat.php"); or to require("http://www.yourserver.com/smf/FlashChat/flashchat.php"); I'd be very thankful for that and I'd recommend using this option as opposed to the iframe thing that doesn't work on some browsers like older Netscapes...


UPDATE (October 14th 2004) - "Users in Chat":

Ok, here is an update on how to COMPLETELY and TOTALLY integrate FlashChat into an SMF template. Thanks to AxeCrazy who provided me with the core code to do this.
Please note that in this tutorial update it is assumed that your MySQL's table prefix is "smf_" as in every case of a fresh installation of SMF. If you have upgraded your forum from a YaBB SE installation your table prefix will most likely be "yabbse_", therefore you will have to change every instance of  smf_fc_connections with yabbse_fc_connections. This said let's rock'n'roll!

Ths tutorial addition will show you two things:
A. how to show how many of the currently online users are actually in the chat (this will be shown in the ONLINE USERS section at the bottom of the INDEX page)
B. how to add a text at the top of the page (under the navigation menu with all the buttons) that says how many users are in the chat
In both cases I implemented a few easy but neat tricks that will avoid that text to be shown when you are in the chat page and that will make sure the sentece is grammatically correct, in terms of singular and plural.


SUB-TUTORIAL #1: INDEX PAGE "Users in Chat" integration (the number of users in the chat will appear in the ONLINE USERS section, right next to where it says "X visitors, X users").

1. Open smf/Themes/default/BoardIndex.template.php
2. search for the comment string:
Code: [Select]
// "Users online" - in order of activity3. right after that line, before the following echo statement, add this code:
Code: [Select]
    $chatrequest = db_query("
            SELECT COUNT(*) AS numb
            FROM  smf_fc_connections
            WHERE userid IS NOT NULL", __FILE__, __LINE__);
         list ($chatcount) = mysql_fetch_row($chatrequest);   
         mysql_free_result($chatrequest);
     
if ( $chatcount == "1" ) {
$singularplural2 = "";
} else {
$singularplural2 = "s";
}
4. a few lines below you'll see a long line (part of the above mentioned echo statement) that should look like this:
Code: [Select]
<a href="', $scripturl, '?action=who">', $context['num_guests'], ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ', $context['num_users_online'], ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'], (empty($context['num_users_hidden']) ? '' : ' (' . $context['num_users_hidden'] . ' ' . $txt['hidden'] . ')'), '</a><br />
5. replace that line with this one:
Code: [Select]
<a href="', $scripturl, '?action=who">', $context['num_guests'], ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ', $context['num_users_online'], ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'], (empty($context['num_users_hidden']) ? '' : ' (' . $context['num_users_hidden'] . ' ' . $txt['hidden'] . ')'), ', ' . $chatcount . ' User'.$singularplural2.' in Chat</a><br />
6. You are done. This will make your forum's index page bottom read something like: "0 Visitors, 4 Users, 2 Users in Chat". Please note that my code does actually take into account the possibility that just one user is online and will adjust the sentence grammatically so that it will read "1 User in Chat", as opposed to "1 Users in Chat", which we all know is wrong, don't we? ;)


SUB-TUTORIAL #2: add "Users in Chat" sentence in ALL pages except the chat page itself (this will add a sentence at the top of your board section, right below the INDEX, HELP, SEARCH, ADMIN, PROFILE, CALENDAR, CHAT, LOG OUT navigation bar buttons). My code will adjust the sentence to make sure it is grammatically correct AND it will NOT show the sentence in the actual chat page becase the user doesn't need to see it (he/she already has this information from the chat room) and because the user count would not be up to date, since the page was already parsed and doesn't update in real time, like the chat room does.

1. Open smf/Themes/default/index.template.php
2. search for the comment string:
Code: [Select]
// The main content should go here3. right after that line there is a two line echo statement that opens the tags <table>, <tr> and <td>.
4. Right after those two lines add this code:
Code: [Select]
     $chatrequest = db_query("
            SELECT COUNT(*) AS numb
            FROM  smf_fc_connections
            WHERE userid IS NOT NULL", __FILE__, __LINE__);
         list ($chatcount) = mysql_fetch_row($chatrequest);   
         mysql_free_result($chatrequest);
         
if ( @$_GET['action'] != "chat" ) {
if ( $chatcount == "1" ) {
$singularplural1 = " is ";
$singularplural2 = "";
} else {
$singularplural1 = " are ";
$singularplural2 = "s";
}
echo '
Currently there ' . $singularplural1 . ' <font color="#FF0000">' . $chatcount . ' User'.$singularplural2.' in the Chat!</font><br>';
}
If for some reason you want the line to appear ONLY if there actually IS somebody in the Chat, then you can use instead of the code above this code:
Code: [Select]
     $chatrequest = db_query("
            SELECT COUNT(*) AS numb
            FROM  smf_fc_connections
            WHERE userid IS NOT NULL", __FILE__, __LINE__);
         list ($chatcount) = mysql_fetch_row($chatrequest);   
         mysql_free_result($chatrequest);
         
if ( @$_GET['action'] != "chat" ) {
if ( $chatcount == "1" ) {
$singularplural1 = " is ";
$singularplural2 = "";
} else {
$singularplural1 = " are ";
$singularplural2 = "s";
}
if ( $chatcount != 0 )
echo 'Currently there ' . $singularplural1 . ' <font color="#FF0000">' . $chatcount . ' User'.$singularplural2.' in the Chat!</font><br>';
}
5. You are done. This will make all your forum's pages read something like this at the top: "Currently there are 2 Users in the Chat!". Please note that my code does actually take into account the possibility that just one user is online and will adjust the sentence grammatically so that it will read "Currently there is 1 User in the Chat!", as opposed to "Currently there are 1 Users in the Chat!", which we all know is wrong, don't we? ;)
In addition to that, as I was explaining above, it does NOT show the line in the actual INTEGRATED chat page because the user count would not be up to date with what is happening in real time inside the chat room.

I hope this will help everybody and make your forum/chat experience even more enjoyable!
« Last Edit: October 14, 2004, 09:13:53 AM by marcnyc »

Offline -Garion-

  • Semi-Newbie
  • *
  • Posts: 53
  • Gender: Male
  • Oh My Goddess!
Thanks for taking the time to write up this tutorial.  When I get a chance I'll give it a go.   :)

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
You are very welcome, like I said I want to give something back to this community who has always helped me with my YaBBGold/YaBBSE/SMFBeta/SMF1.0 issues.
Now I just wish somebody would figure out how to tell visitors/users on the board how many are in the chat PLUS I wish the SMF people finally came out with their CMS integration...

Offline Elijah Bliss

  • Sophist Member
  • *****
  • Posts: 1,340
Hey, this is cool! This is the best looking chatroom I've ever seen! Very smooth and efficient.
Does it consume a lot of bandwidth?

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
This questions should be addressed to the manufacturer of the sw. I am just a user like you ;-)

Offline babylonking

  • SMF Friend
  • Full Member
  • *
  • Posts: 664
  • Gender: Male
  • Proudly Canadian
    • Assyrian Chaldean Online Community
Thanks for the tutorial marcnyc, I also added video and audio plugins to the chat.  ;)

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
Where did you do that? Can I see it?
Did anybody figure out how to check how many users are in the chat and display it in the forum's index page?

Offline dg

  • Semi-Newbie
  • *
  • Posts: 60
  • Gender: Male
  • N00b
    • dg.com
Marc,

Thanks alot for your write up.  I have since purchased and installed the product with no problems whatsoever.  Although when I did email Daniela bout the chat_icon.gif, he said it was already included.

I'll have to check on that when I get home.

Thanks again!

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
I didn't see the icon anywhere but if you can find it good for you. I didn't even need it because I am using the Aquamania theme and luckily Andrea had provided a chat icon with that theme already! Andrea rocks...

Offline dg

  • Semi-Newbie
  • *
  • Posts: 60
  • Gender: Male
  • N00b
    • dg.com
Where did you do that? Can I see it?
Did anybody figure out how to check how many users are in the chat and display it in the forum's index page?

Login with

username= fb3
password= fb3

http://www.babylonking.net/forum/

After you login click the chat button.  :)


That's just great.  Your site constantly amazes me (i'm registered as ChillyP, btw)!
You even have icons depicting each user?  Nice touch man.

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
It's nice to see my tutorial implemented for real for the first time ;-) I am excited ;-P
I should check out the plug ins, I didn't even know there were plug ins for FlashChat.
Nice theme by the way, what is it?

Offline AxeCrazy

  • Semi-Newbie
  • *
  • Posts: 13
  • Gender: Male
  • I'm a llama!
i also included the flashchat now.
It rocks.
http://www.kolonisten.nl/yabbse [nofollow]
working on the user counter

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
let me know how it goes on the user counter... I haven't had time to get to it yet, but a hint is here:
I noticed that there is a user counter in the php page that you access if you go to the root of your FlashChat folder (basically if you access it bypassing the forum). In the top right corner of the PHP log in page of the FlashChat files there is a link that takes you to a counter so I guess we could start from there and use that code... anyway, if you figure it out please post it and let me know...

Babylonking, where did you find those plug ins? I didn't find them on the tufat site...

Offline AxeCrazy

  • Semi-Newbie
  • *
  • Posts: 13
  • Gender: Male
  • I'm a llama!
well got it working.
in the index.template.php find the part where you put in the chat button.
just before that add.
Quote
         $request = db_query("
            SELECT COUNT(*) AS numb
            FROM  yabbse_fc_connections
            WHERE userid IS NOT NULL", __FILE__, __LINE__);
         list ($count) = mysql_fetch_row($request);    
         mysql_free_result($request);

the yabbse_fc_connections should be replaced by your $prefix_fc_connections
next i replace the alt "Chat"in the button with alt="' . $count . ' users in chat".
Works great.
kinda quick and dirty, but ok

Offline babylonking

  • SMF Friend
  • Full Member
  • *
  • Posts: 664
  • Gender: Male
  • Proudly Canadian
    • Assyrian Chaldean Online Community
let me know how it goes on the user counter... I haven't had time to get to it yet, but a hint is here:
I noticed that there is a user counter in the php page that you access if you go to the root of your FlashChat folder (basically if you access it bypassing the forum). In the top right corner of the PHP log in page of the FlashChat files there is a link that takes you to a counter so I guess we could start from there and use that code... anyway, if you figure it out please post it and let me know...

Babylonking, where did you find those plug ins? I didn't find them on the tufat site...

It's paid add-on, here is the link http://www.virtualjam.net/addonhosting.htm

About the who's chatting i use this code
Code: [Select]
<?php @include(&#39;http://www.babylonking.net/forum/FlashChat/info.php&#39;); ?>

Offline AxeCrazy

  • Semi-Newbie
  • *
  • Posts: 13
  • Gender: Male
  • I'm a llama!
used that before, but that gave a somwhat bulky overview.
I just wanted a quick indicator, but it is more or less the same code ;)

Offline charlottezweb

  • Charter Member
  • SMF Hero
  • *
  • Posts: 2,472
  • Gender: Male
    • Charlottezweb.com
Has anyone seen resource issues with this script yet?

Regards,
Jason

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
well got it working.
in the index.template.php find the part where you put in the chat button.
just before that add.
Quote
         $request = db_query("
            SELECT COUNT(*) AS numb
            FROM  yabbse_fc_connections
            WHERE userid IS NOT NULL", __FILE__, __LINE__);
         list ($count) = mysql_fetch_row($request);    
         mysql_free_result($request);

the yabbse_fc_connections should be replaced by your $prefix_fc_connections
next i replace the alt "Chat"in the button with alt="' . $count . ' users in chat".
Works great.
kinda quick and dirty, but ok

Hi AxeCrazy, I have tested and implemented your code. I have added some tweaks in order to make it grammatically-compliant and in order to have it appear in the index page (and if you choose to) in all the pages of the forum, at the top. Please look at the initial post of this topic (my tutorial) as I have updated the tutorial and added all of these information and explained how to implement these two changes. I have chosen to rename the variables $chatrequest and $chatcount, simply because request and count are pretty common words and I wanted to avoid possible conflicts, as I am not familiar with the internal structure of SMF and they might have already been used/reserved in other instances

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
It's paid add-on, here is the link http://www.virtualjam.net/addonhosting.htm
About the who's chatting i use this code
Code: [Select]
<?php @include(&#39;http://www.babylonking.net/forum/FlashChat/info.php&#39;); ?>

Hey Babylonking, just three questions:
1 how do you create those news in your website's index?
2 is that shoutbox the one readily available in the MODS section?
3 it's a nice theme, did you do it yourself or what?

Offline marcnyc

  • Full Member
  • ***
  • Posts: 457
Has anyone seen resource issues with this script yet?

Regards,
Jason

Unfortunately I don't know how resource intensive it is. I haven't had any issues, to answer your questions, but I have 12Gb monthly bandwidth transfer available. You might want to address these questions to the manufacturer or install some bandwidth profiler script on your server to monitor it. If you have any hard facts data please post them as I am curious about this as well.