JSXC integration

[souperk]

Hello, I am a javascript and php newbie, but I am trying to integrate hxxp:jsxc.org [nonactive] xmpp web-chat client to my forum (poke.lagos.p4u.gr/form). This is the code I have written up to the point

Code Select Expand

function addChat()
{
global $user_settings;

echo '<script>';

//load the jsxc settings.
echo 'jsxc.init({xmpp: {url:\'/http-bind\' } , root:\'/forum/jsxc\'});';

echo 'var password = \'' . $user_settings['passwd'] . '\';';
echo 'var username = \'' . $user_settings['member_name'] . '\';';
echo 'console.log(\'password=\' + password);';
echo 'console.log(\'username=\' + username);';

//if there isn't an active connection and user is logged in
if(!empty($user_settings['passwd']))
{
echo 'if(!jsxc.xmpp.conn)';
echo '{';
//connect
echo 'jsxc.xmpp.login( username + \'@poke.lagos.p4u.gr\', password);';
echo '}';
}else {
//if there is already a connection and user is not logged in.
echo 'else if(jsxc.xmpp.conn)';
echo '{';
echo 'jsxc.xmpp.logout();'; //disconnect
echo '}';
}

echo'</script>';
}


I call the addChat() on Themes/default/index.template.php on function template_body_above() . However, that way the chat appears only on the main page. Where should I insert so it will be printed on all pages? The same goes for the following html includes for the javascript and css files, which I added on  Themes/default/index.template.php on function template_html_above().

Code Select Expand


echo '
   <!-- require:dependencies -->
   <link href="jsxc/css/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
   <link href="jsxc/css/jquery.mCustomScrollbar.min.css" media="all" rel="stylesheet" type="text/css" />
   <link href="jsxc/css/jquery.colorbox.css" media="all" rel="stylesheet" type="text/css" />
   <link href="jsxc/css/jsxc.css" media="all" rel="stylesheet" type="text/css" />
   <link href="jsxc/css/jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />
   <!--  endrequire -->

   <!-- require:dependencies -->
   <script src="jsxc/lib/jquery.min.js"></script>
   <script src="jsxc/lib/jquery.ui.min.js"></script>
   <script src="jsxc/lib/jquery.colorbox-min.js"></script>
   <script src="jsxc/lib/jquery.slimscroll.js"></script>
   <script src="jsxc/lib/jquery.fullscreen.js"></script>
   <script src="jsxc/lib/jsxc.dep.js"></script>
   <!--  endrequire -->

   <!-- jsxc library -->
   <script src="jsxc/jsxc.min.js"></script>
';


Also, I think smf has a module system, so when this is finished I will the code and if anyone is interested feel free to package and upload it.

[souperk]

Hello! I made some digging and found that $content['html_headers'] can be used to add custom html headers in the templates. After that I wrote the following code and called loadChat() function in index.php line 187 after loadUserSettings();

Code Select Expand

function loadChat()
{
global $context;

$context['html_headers'] = $context['html_headers']
. '<script type="text/javascript" src="jsxc/lib/jquery.min.js"></script>'
. '<script type="text/javascript" src="jsxc/lib/jquery.ui.min.js"></script>'
. '<script type="text/javascript" src="jsxc/lib/jquery.colorbox-min.js"></script>'
. '<script type="text/javascript" src="jsxc/lib/jquery.slimscroll.js"></script>'
    . '<script type="text/javascript" src="jsxc/lib/jquery.fullscreen.js"></script>'
. '<script type="text/javascript" src="jsxc/lib/jsxc.dep.js"></script>'
. '<script type="text/javascript" src="jsxc/jsxc.js"></script>'
. '<link href="jsxc/css/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />'
. '<link href="jsxc/css/jquery.mCustomScrollbar.min.css" media="all" rel="stylesheet" type="text/css" />'
. '<link href="jsxc/css/jquery.colorbox.css" media="all" rel="stylesheet" type="text/css" />'
. '<link href="jsxc/css/jsxc.css" media="all" rel="stylesheet" type="text/css" />'
. '<link href="jsxc/css/jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />';

loadChatScript();
}

function loadChatScript()
{
global $user_settings, $context;

$res = ''
. '<script type="text/javascript">'

//set username
. 'var username = \'' . $user_settings['member_name'] . '\';'
//set password
//TODO check if I can pass sha1 value of password to xmpp
. 'var password = \'' . $user_settings['passwd'] . '\';'

//temporary logging
. 'console.log(\'username=\' + username);'
. 'console.log(\'password=\' + password);' . "\n"
//load the jsxc settings.
. 'jsxc.init({xmpp: {url:\'/http-bind\' } , root:\'/forum/jsxc\'});';

//if there isn't an active connection and user is logged in
if(!empty($user_settings['passwd']))
{
$res = $res
//connect
. 'jsxc.xmpp.login( username + \'@poke.lagos.p4u.gr\', password);';
}else {
//if there is already a connection and user is not logged in.
$res = $res
. 'jsxc.xmpp.logout(true);'; //disconnect
}

$res = $res . '</script>';

$context['html_headers'] = $context['html_headers'] . $res;
}

You can see the actual on my github repository hxxp:github.com/souperk/jsxc2smf/. [nonactive]
Now I am getting an error on boards (only on boards, everything else works fine) and when I checked the html output I noticed that all the scripts I included where redirected to the index.php.

Code Select Expand

SyntaxError: expected expression, got '<'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E


1)Any hints on this? Is there another way to include the javascript and css depedencies?

2)The use of $context['html_headers'] is documented anywhere besides the code? Because I couldn't find anything on the documentation.

3) Is there the right place for questions like this?

Thank you in advance!

[Kindred]

actually, there is no need to mess up the standard header variable...  i believe there is a hook called additional_headers which was created specifically to insert additional things without messing with the core code.

I suggest you read the WIKI (link to the top right, manual) on how to use hooks...