Oxwall and html5-chat integration

Official plugin

There is an official html5-chat plugin made by oxwall team (Skalfa LLC)

https://developers.oxwall.com/store/item/1554

which does the job.

How to make it full screen ?

This plugin embeds the chat into the 

<div class="owc_content">

and whose size can be too small for the chat. The idea would be to make it full screen (and just keep the header). For that you need to edit some files

in /ow_includes/config.php change the OW_DEV_MODE to false (this allows to empty cache), after the manipulation, you will set it back to true

define('OW_DEV_MODE', true);

in /ow_plugins/html5-chat-com/views/controllers/chat_index.html add these lines after {style}

{style}

.ow_content {
    position: absolute;
    top: 69px;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%!important;
}

div.ow_footer {
    display:none;
}

check it: if everything is ok, then set back the OW_DEV_MODE to false

define('OW_DEV_MODE', false);

 

phpsocial

html5 chat and phpsocial integration

PHP social is a cool social “facebook” like script.  It is not free but has a moderated price of 49$.

We suppose we want to get a chat page in full screen, auto loggedon and called “chat”.

(You need to be registered and loggedon on netswing.fr to test it)

ex: https://www.netswing.fr/chat

How can we integrate HTML5-chat into php social ?

Step1 : edit .htaccess and add this line

RewriteRule ^chat/?$        index.php?a=chat          [NC]

Step2 : edit config.php and add

'chat'        => 'chat',

Step3: download this script: chat , unzip it and edit it and change the 2 lines: webmasterid and password

$webmasterid = xxx;
$password = 'xxxx';

Step4: FTP upload chat.php to /sources folder

Step5: Test that your chat works fine on https://www.netswing.fr/chat

 

Here is the source of chat.php 

<?php
function PageMain() {
/*
* Change these 2 parameters and put your webmasterid and your chat password here
*/
$webmasterid = 'xxxxx'; // your webmasterid number
$password = 'yyyyy'; // your chat password
//

global $TMPL, $LNG, $CONF, $db, $user, $settings, $plugins;
if(!isset($user) || !isset($user['idu']) ) {
header("Location: ".$CONF['url']."/index.php?a=welcome");
}

$json = json_encode(array('id'=>$user['idu'], 'username'=>$user['username'], 'image'=>$CONF['url'].permalink('/thumb.php?t=a&w=112&h=112&src='.$user['image']),
'gender'=>($user['gender'] == 1) ? 'male' : 'female', 'role'=>'user', 'profile'=>$CONF['url']. '/profile/'.$user['username'], 'password'=>$password));
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));
ob_start();?>
<script src="https://jwt.html5-chat.com/script/<?=$webmasterid?>/<?=$encoded?>"></script>
<?php
$script = ob_get_clean();
echo $script;
exit;
}
VLD

html5 + vldpersonals: how to add html5 chat into vldpersonals

Integration of html5-chat into vldpersonals

 

edit the .htaccess file and that line:

RewriteRule ^chatHtml5/?$ chatHtml5.php [L]

which means: your chat will be available on https://www.yoursite.com/chatHtml5

Create a blank chatHtml5.php file on root of your website / and paste the script

<?php
ini_set('display_errors', 1);error_reporting(E_ALL);

session_start();
if (!isset($_SESSION['username'])) {
    header('Location:/');exit;
}
include('includes/config.php');
mysql_connect($conf['db_hostname'], $conf['db_username'], $conf['db_password']) or die();
mysql_select_db($conf['db_name']) or die("ERROR: Cannot SELECT the Database.");

function getAvatar($username) {
    $get_pic = mysql_query("SELECT picture,joindate,member_id FROM vld_members WHERE username = '$username' LIMIT 1") or die(mysql_error());
    while($got_pic = mysql_fetch_array($get_pic)) {
        $members_image = $got_pic['picture'];
        $member_joindate = $got_pic['joindate']; // this will be the members joindate from the members table
        $member_id = $got_pic['member_id']; // this is the ID of the member you want to show the avatar
    }
    if ($members_image == '') {
        $avatar = "/media/user_picture_none.gif"; // set here the path to the image that shows if user has no avatar uploaded
    }else
    {
        $media = substr($member_joindate, -1, 1).'/'.
            substr($member_joindate, -2, 1).'/'.
            substr($member_joindate, -3, 1).'/'.
            substr($member_joindate, -4, 1).'/'.
            $member_id.'/';
        $path = '/media/uploads/'.$media.'photo_'.$members_image;
        $avatar = $path;
    }
    return $avatar;
}


$password = 'seccret Password';
$webmasterid = 'xxxxxxxx';

$json = json_encode(array(
        'webmasterid'=>$webmasterid ,
        'password'=>$password,
        'username'=>$_SESSION['username'],
        'gender'=>$_SESSION['profile_fields']['profile_gender1'],
        'role'=>'user',
        'image'=>$conf['virtual_path'].getAvatar($_SESSION['username'])
    )
);
$encoded = file_get_contents("https://html5-chat.com/protect/".base64_encode($json));

?>
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Chat HTML5</title>
</head>
<body>
<script src="https://html5-chat.com/script/<?=$webmasterid?>/<?=$encoded?>"></script>
</body>
</html>

 

 

 

 

 

OLD version of VLD

<?php
require 'vendor/autoload.php';
use \Firebase\JWT\JWT;
session_start();
if (!isset($_SESSION['username'])) {
    header('Location:/');exit;
}
include('includes/config.php');
mysql_connect($conf['db_hostname'], $conf['db_username'], $conf['db_password']) or die();
mysql_select_db($conf['db_name']) or die("ERROR: Cannot SELECT the Database.");

function getAvatar($username) {
    $get_pic = mysql_query("SELECT picture,joindate,member_id FROM vld_members WHERE username = '$username' LIMIT 1") or die(mysql_error());
    while($got_pic = mysql_fetch_array($get_pic)) {
        $members_image = $got_pic['picture'];
        $member_joindate = $got_pic['joindate']; // this will be the members joindate from the members table
        $member_id = $got_pic['member_id']; // this is the ID of the member you want to show the avatar
    }
    if ($members_image == '') {
        $avatar = "/media/user_picture_none.gif"; // set here the path to the image that shows if user has no avatar uploaded
    }else
    {
        $media = substr($member_joindate, -1, 1).'/'.
            substr($member_joindate, -2, 1).'/'.
            substr($member_joindate, -3, 1).'/'.
            substr($member_joindate, -4, 1).'/'.
            $member_id.'/';
        $path = '/media/uploads/'.$media.'photo_'.$members_image;
        $avatar = $path;
    }
    return $avatar;
}
$password = 'yourHTML5-chatPassword';
$webmasterid = 'yourHTML5WebmasterId',
$mysuer = array('webmasterid'=>$webmasterid , 'password'=>$password, 'username'=>$_SESSION['username'], 'gender'=>$_SESSION['profile_fields']['profile_gender1'], 'role'=>'user', 'image'=>$conf['virtual_path'].getAvatar($_SESSION['username']));
$encoded = JWT::encode($mysuer, $password);
?>
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Chat HTML5</title>
</head>
<body>
<script src="https://html5-chat.com/chat/<?=$webmasterid?>/<?=$encoded?>"></script>
</body>
</html>

You need of course to integrate the JWT libraries for that.

For PHP, we use for instance: https://github.com/firebase/php-jwt (if you use another langage, pick your library from jwt.io