Мини-чат на ajax

Ress Kent · 21 Ноя 2014

Аватар по левому краю

Код:

<a style="float: left;" href="profile.php?mode=viewprofile&u='.$shout_row['shout_user_id'].'" target="_blank" title="Посмотреть профиль">'.$avatar.'</a>&nbsp;

Ress Kent · 2 Дек 2014

Немного внешний вид переделал, может кому нужно будет
ajax.php

Код:

    function chat_message()
    {
        global $bb_cache, $userdata, $bb_cfg, $lang, $user_opt, $user_id;
        $mode = (int) $this->request['mode'];
        $message = (string) @$this->request['message'];
        if($mode==1)
        {
            if(!$message) $this->ajax_die($lang['SHOUTBOX_ERR']);
            $bbcode_on = $bb_cfg['allow_bbcode'];
            $smilies_on = $bb_cfg['allow_smilies'];
            if(!IS_ADMIN)
            {
                $chk = DB()->fetch_row('SELECT MAX(shout_session_time) AS last_post_time FROM bb_shout WHERE shout_user_id = '.$userdata['user_id']);
                if ( $chk['last_post_time'] > 0 && ( time() - $chk['last_post_time'] ) < $bb_cfg['flood_interval'] ) $this->ajax_die($lang['FLOOD_ERROR']);
            }
            if (!empty($message))
            {
                DB()->query('INSERT INTO bb_shout (shout_text, shout_session_time, shout_user_id, shout_ip, shout_username) VALUES ("'.DB()->escape($message).'", '.time().', '.$userdata['user_id'].', "'.USER_IP.'", "'.DB()->escape($userdata['username']).'")');
                CACHE('bb_cache')->rm('shout_data', 60);
            }
        }
        if(!$shout_data = CACHE('bb_cache')->get('shout_data', 60))
        {
            $shout_rows = DB()->fetch_rowset("SELECT s.*, u.username, u.user_level, u.user_rank, u.avatar_ext_id, u.user_opt, u.user_id
                FROM bb_shout s, ".BB_USERS." u
                WHERE s.shout_user_id=u.user_id AND u.user_id = u.user_id
                ORDER BY s.shout_session_time DESC LIMIT 50");
            $i=0;
            $shout_data = '';
            foreach ($shout_rows AS $shout_row)
            {
                $row_class = !($i % 2) ? 'row1' : 'row2';
                $user_level =  $shout_row['user_level'];
                if($user_level) $username = profile_url($shout_row);
                else $username = '<span>'.$shout_row['username'].'</span>';
                $post_delete =($userdata['user_level'] == ADMIN || $userdata['user_level'] == IS_AM) ? '<img src="images/shout_delete.png" title="Удалить сообщение" class="clickable" onclick="ajax.shout_del('.$shout_row['shout_id'].'); ajax.chat_message(2); return false;" style="float:right">&nbsp;' : '';
                $pm_link = '<a style="float: right; margin-right: 6px;" href="privmsg.php?mode=post&u='.$shout_row['shout_user_id'].'" target="_blank"><img title="Послать личное сообщение"  align="absmiddle" src="images/shout_mail.png" /></a>';
                $avatar = get_avatar($shout_row['user_id'], $shout_row['avatar_ext_id'], !bf($shout_row['user_opt'], 'user_opt', 'dis_avatar'), 32, 32);
                $shout = (!$shout_row['shout_active']) ? $shout_row['shout_text'] : $lang['Shout_censor'];
                $shout = str_replace("\n", "\n", $shout);
                $shout = ($user_level == ADMIN) ? '<span>'.$shout.'</span>' : $shout;
                $shout_data .= '<div id="shout_'.$shout_row['shout_id'].'" class="chat-comment '.$row_class.'">
                <div> <a style="float: left;" href="profile.php?mode=viewprofile&u='.$shout_row['shout_user_id'].'" target="_blank" title="Посмотреть профиль">'.$avatar.'</a>&nbsp;
                <a class="bold" title="'.$lang['SHOUTBOX_INSERT_NAME'].'" style="text-decoration: none;" href="javascript:add_nick(\'[b]'.addslashes($shout_row['shout_username']).'[/b],\')">'.$username.' </a>&nbsp;
                <span class="small" style="font-size: 9px;">'.bb_date($shout_row['shout_session_time'], $bb_cfg['last_post_date_format']).'</span>
                </div>
                <div style="font-size: 11px; padding-left: 40px;">'.bbcode2html($shout).'</div>
                </div>';
                ++$i;
            }
          CACHE('bb_cache')->set('shout_data', $shout_data);
        }
        $this->response['message'] = $shout_data;
    }

index.tpl

Код:

<div style="margin: -3px 0 10px; padding: 10px; background: #FFF; border: 1px solid #009999; border-radius: 5px;">
<center><b>Мини чат</b></center>
        <div class="clear"></div>
        <div class="spacer_2"></div>
        <div id="chat" class="tLeft hidden"></div>
        </form>


    <div class="tCenter">
        <form name="post">
<div class="buttons mrg_4 tcenter">
  <input class="button" type="button" value=" B " name="codeB" title="Жирный (Ctrl+B)"  />&nbsp;
  <input type="button" value="Url" name="codeUrl" title="{L_URL_TITLE}" />&nbsp;
  <input type="button" value="Img" name="codeImg" title="{L_IMG_TITLE}" />
  <input type="button" value="{L_SKETCH}" name="codeThumbnails" title="{L_SKETCH_TITLE}" />
  <input type="button" value="Hide" name="codeSpoiler" title="{L_SPOILER}" />
  <img title="Смайлы" onclick="window.open('posting.php?mode=smilies', '_phpbbsmilies', 'height=540, resizable=yes, scrollbars=yes ,width=620'); return false;" src="/images/smiles/ab.gif">

&nbsp;
<select name="codeColor" class="text_color">
  <option style="color: black; background: #fff;" value="black" selected="selected">{L_QR_COLOR_SEL}:</option>
  <option style="color: darkred;" value="darkred">{L_COLOR_DARK_RED}</option>
  <option style="color: brown;" value="brown">&nbsp;{L_COLOR_BROWN}</option>
  <option style="color: #996600;" value="#996600">&nbsp;{L_COLOR_ORANGE}</option>
  <option style="color: red;" value="red">&nbsp;{L_COLOR_RED}</option>
  <option style="color: #993399;" value="#993399">&nbsp;{L_COLOR_VIOLET}</option>
  <option style="color: green;" value="green">&nbsp;{L_COLOR_GREEN}</option>
  <option style="color: darkgreen;" value="darkgreen">&nbsp;{L_COLOR_DARK_GREEN}</option>
  <option style="color: gray;" value="gray">&nbsp;{L_COLOR_GRAY}</option>
  <option style="color: olive;" value="olive">&nbsp;{L_COLOR_OLIVE}</option>
  <option style="color: blue;" value="blue">&nbsp;{L_COLOR_BLUE}</option>
  <option style="color: darkblue;" value="darkblue">&nbsp;{L_COLOR_DARK_BLUE}</option>
  <option style="color: indigo;" value="indigo">&nbsp;{L_COLOR_INDIGO}</option>
  <option style="color: #006699;" value="#006699">&nbsp;{L_COLOR_STEEL_BLUE}</option>
</select>&nbsp;
<select name="codeSize" class="text_size">
    <option value="12" selected="selected">{L_QR_SIZE_SEL}:</option>
    <option value="9" class="em">{L_FONT_SMALL}</option>
    <option value="10">&nbsp;size=10</option>
    <option value="11">&nbsp;size=11</option>
    <option value="12" class="em" disabled="disabled">{L_FONT_NORMAL}</option>
    <option value="14">&nbsp;size=14</option>
    <option value="16">&nbsp;size=16</option>
    <option value="18" class="em">{L_FONT_LARGE}</option>
</select>
<img title="Обновить чат" onclick="ajax.chat_message(2); return false;" src="/images/pic_loading.gif">
&nbsp;
   <center><br><textarea placeholder="Напишите сообщение..." onkeydown="submit_click(event)" id="message" class="chat_message"></textarea></center>
<p>

<a href="#" onclick="ajax.chat_message(1); $('#message').attr('value', '');return false;" class="button15">Отправить</a>
<script type="text/javascript">
var bbcode = new BBCode("message");
var ctrl = "ctrl";
bbcode.addTag("codeB", "b", null, "B", ctrl);
bbcode.addTag("codeImg", "img", null, "R", ctrl);
bbcode.addTag("codeUrl", "url", "/url", "W", ctrl);
bbcode.addTag("codeSpoiler", "spoiler", null, "",  ctrl);
bbcode.addTag("codeThumbnails", "thumbnails", null, "T", ctrl);

bbcode.addTag("codeSize", function(e) { var v=e.value; e.selectedIndex=0; return "size="+v }, "/size");
bbcode.addTag("codeColor", function(e) { var v=e.value; e.selectedIndex=0; return "color="+v }, "/color");
</script>
      </div>
      </div>
  </div>
  <br>
<!-- ENDIF -->

main.css

Код:

#chat { overflow: auto; width: 100%; height: 300px; }
.chat-comment{
    line-height: 1.5;
    min-height: 38px;
    height: auto;
    margin: 3px;
    padding: 4px;
    border: solid 1px #AED7FF;
    background-color: #F9FCFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
textarea.chat_message{
    height: 40px;
    width: 40%;
    border: 1px solid #AED7FF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 11px;
    margin-bottom: 7px;
}
a.button15 {
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .5em 1em calc(.5em + 1px);
  border-radius: 8px;
  background: rgb(64,199,129);
  box-shadow: 0 -3px rgb(53,167,110) inset;
  transition: 0.2s;
}
a.button15:hover { background: rgb(53, 167, 110); }
a.button15:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}

Ress Kent · 5 Янв 2015

Как смог от лишнего почистил + время в виде H:i
ajax.php

Код:

        function chat_message()
    {
        global $bb_cache, $userdata, $bb_cfg, $lang, $user_opt, $user_id;
        $mode = (int) $this->request['mode'];
        $message = (string) @$this->request['message'];
        if($mode==1)
        {
            if(!$message) $this->ajax_die($lang['SHOUTBOX_ERR']);
            $bbcode_on = $bb_cfg['allow_bbcode'];
            $smilies_on = $bb_cfg['allow_smilies'];

            if (!empty($message))
            {
                DB()->query('INSERT INTO bb_shout5 (shout_text, shout_session_time, shout_user_id, shout_ip, shout_username) VALUES ("'.DB()->escape($message).'", '.time().', '.$userdata['user_id'].', "'.USER_IP.'", "'.DB()->escape($userdata['username']).'")');
                CACHE('bb_cache')->rm('shout_data', 60);
            }
        }
        if(!$shout_data = CACHE('bb_cache')->get('shout_data', 60))
        {
            $shout_rows = DB()->fetch_rowset("SELECT s.*, u.username, u.avatar_ext_id, u.user_opt, u.user_id
                FROM bb_shout5 s, ".BB_USERS." u
                WHERE s.shout_user_id=u.user_id AND u.user_id = u.user_id
                ORDER BY s.shout_session_time DESC LIMIT 50");
            $i=0;
            $shout_data = '';
            foreach ($shout_rows AS $shout_row)
            {
                $username = '<span>'.$shout_row['username'].'</span>';
                $avatar = get_avatar($shout_row['user_id'], $shout_row['avatar_ext_id'], !bf($shout_row['user_opt'], 'user_opt', 'dis_avatar'), 20, 20);
                $shout = (!$shout_row['shout_active']) ? $shout_row['shout_text'] : $lang['Shout_censor'];
                $shout = str_replace("\n", "\n", $shout);
                $tm = bb_date($shout_row['shout_session_time'],'H:i', false);
                $shout_data .= '<div id="shout_'.$shout_row['shout_id'].'" class="chat-comment">
                <a class="okrug" style="float: left;" href="profile.php?mode=viewprofile&u='.$shout_row['shout_user_id'].'" target="_blank" title="Посмотреть профиль">'.$avatar.'</a> ['.$tm.']
                <a class="bold" title="'.$lang['SHOUTBOX_INSERT_NAME'].'" style="text-decoration: none;" href="javascript:add_nick(\'[b]'.addslashes($shout_row['shout_username']).'[/b],\')">'.$username.' </a>
                <span style="font-size: 12px;">:&nbsp;'.bbcode2html($shout).'</span></div></div>';
                ++$i;
            }
          CACHE('bb_cache')->set('shout_data', $shout_data);
        }
        $this->response['message'] = $shout_data;
    }

index.tpl

Код:

<script type="text/javascript">
    ajax.chat_message = function(mode) {
      ajax.exec({
        action : 'chat_message',
        mode : mode,
        message : $('#message').val()
      });
    };
    ajax.callback.chat_message = function(data) {
      if(data.message)
      {
        $('#chat').show();
        $('#chat').html(data.message);
        initPostBBCode('#chat');
      }
    };
    function submit_click(e) {
      e = e || window.event;
      if (e.keyCode == 13 && e.ctrlKey) {
        submit_chat();
      };
    }
    function add_nick(text){
      $('#message').attr('value', $('#message').val() + text +' ');
      $('#message').focus();
    }
    $(document).ready(function(){ajax.chat_message(2);});
    setInterval(function(){ajax.chat_message(2);}, 60000);
  </script>
    <h3 class="block_title">{L_MINI_CHAT}</h3>
<div style="padding: 10px; border-radius: 5px;" class="ipsBox table_wrap_b removeDefault">
        <div class="clear"></div>
        <div class="spacer_2"></div>
        <div id="chat" class="tLeft hidden"></div>
    <div class="tCenter">
        <form name="post">
<div class="buttons mrg_4 tcenter">
   <center>
   <textarea placeholder="Напишите сообщение..." onkeydown="submit_click(event)" id="message" class="chat_message"></textarea>  <img title="Смайлы" onclick="window.open('posting.php?mode=smilies', '_phpbbsmilies', 'height=540, resizable=yes, scrollbars=yes ,width=620'); return false;" src="/styles/images/smiles/ab.gif"> <br>
  <input class="button" type="button" value=" B " name="codeB" title="Жирный (Ctrl+B)"  />&nbsp;
  <input type="button" value="Url" name="codeUrl" title="{L_URL_TITLE}" />&nbsp;
  <input type="button" value="Img" name="codeImg" title="{L_IMG_TITLE}" />
  <input type="button" value="Hide" name="codeSpoiler" title="{L_SPOILER}" />
<select name="codeColor" class="text_color">
  <option style="color: black; background: #fff;" value="black" selected="selected">{L_QR_COLOR_SEL}:</option>
  <option style="color: darkred;" value="darkred">{L_COLOR_DARK_RED}</option>
  <option style="color: brown;" value="brown">&nbsp;{L_COLOR_BROWN}</option>
  <option style="color: #996600;" value="#996600">&nbsp;{L_COLOR_ORANGE}</option>
  <option style="color: red;" value="red">&nbsp;{L_COLOR_RED}</option>
  <option style="color: #993399;" value="#993399">&nbsp;{L_COLOR_VIOLET}</option>
  <option style="color: green;" value="green">&nbsp;{L_COLOR_GREEN}</option>
  <option style="color: darkgreen;" value="darkgreen">&nbsp;{L_COLOR_DARK_GREEN}</option>
  <option style="color: gray;" value="gray">&nbsp;{L_COLOR_GRAY}</option>
  <option style="color: olive;" value="olive">&nbsp;{L_COLOR_OLIVE}</option>
  <option style="color: blue;" value="blue">&nbsp;{L_COLOR_BLUE}</option>
  <option style="color: darkblue;" value="darkblue">&nbsp;{L_COLOR_DARK_BLUE}</option>
  <option style="color: indigo;" value="indigo">&nbsp;{L_COLOR_INDIGO}</option>
  <option style="color: #006699;" value="#006699">&nbsp;{L_COLOR_STEEL_BLUE}</option>
</select>
<select name="codeSize" class="text_size">
    <option value="12" selected="selected">{L_QR_SIZE_SEL}:</option>
    <option value="9" class="em">{L_FONT_SMALL}</option>
    <option value="10">&nbsp;size=10</option>
    <option value="11">&nbsp;size=11</option>
    <option value="12" class="em" disabled="disabled">{L_FONT_NORMAL}</option>
    <option value="14">&nbsp;size=14</option>
    <option value="16">&nbsp;size=16</option>
    <option value="18" class="em">{L_FONT_LARGE}</option>
</select>
<img title="Обновить чат" onclick="ajax.chat_message(2); return false;" src="/styles/images/pic_loading.gif">
<a href="#" onclick="ajax.chat_message(1); $('#message').attr('value', '');return false;" class="button15">Отправить</a>
&emsp;&emsp;

</center>
<script type="text/javascript">
var bbcode = new BBCode("message");
var ctrl = "ctrl";
bbcode.addTag("codeB", "b", null, "B", ctrl);
bbcode.addTag("codeImg", "img", null, "R", ctrl);
bbcode.addTag("codeUrl", "url", "/url", "W", ctrl);
bbcode.addTag("codeSpoiler", "spoiler", null, "",  ctrl);

bbcode.addTag("codeSize", function(e) { var v=e.value; e.selectedIndex=0; return "size="+v }, "/size");
bbcode.addTag("codeColor", function(e) { var v=e.value; e.selectedIndex=0; return "color="+v }, "/color");
</script>
      </div>
      </div>
  </div>
  <br>

main.css

Код:

 /* МИНИ ЧАТ НАЧАЛО*/
#chat { overflow: auto; width: 100%; height: 300px; }
.chat-comment{
margin-bottom:14px
}
textarea.chat_message{
    height: 40px;
    width: 40%;
    border: 1px solid #AED7FF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 11px;
    margin-bottom: 7px;
}
a.button15 {
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .5em 1em calc(.5em + 1px);
  border-radius: 8px;
  background: rgb(64,199,129);
  box-shadow: 0 -3px rgb(53,167,110) inset;
  transition: 0.2s;
}
a.button15:hover {
background: rgb(53, 167, 110);
}
a.button15:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}
.okrug {
background-color:rgb(252,252,255);
padding:1px;
border:1px solid #a5cae4;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px}
}
/* МИНИ ЧАТ КОНЕЦ*/

Dr_Brown · 5 Янв 2015

убейтесь!
Зачем Вам чат на форуме ?
Тут уже поведенчиский фактор играет роль, юзеры итак нынче молчаливые пошли, коменты не пишут, а Вы чаты адаптируете. Чат это бред. Нужны коменты под раздачами, новые топики с обсуждениями... итак контент не уникальный нибось, никто не делает уникальное описание, к каждому релизу.

Sprinx · 5 Янв 2015

Только 3 поля здесь нужно, остальное выкинуть можно.
shout_text, shout_session_time, shout_user_id

Ress Kent · 5 Янв 2015

Sprinx
без shout_ip не получается отправить сообщение в чат
без shout_username нельзя добавить ник в чат по клику

Exile · 5 Янв 2015

Ress Kent можно все, первое вообще хранить для чата нет смысла, а второе правкой яваскрипта на выводе реализуется.

Ress Kent · 5 Янв 2015

Exile с ип адресами разобрался, в таблице удалил и в аяксе нашел нужную строчку. С яваскриптом не знаю, надеюсь мозгов хватит)))

Ress Kent · 12 Янв 2015

Exile shout_username получилось убрать
Подправил install.txt по ней ставиться на чистую ревизию 2.1.5
+ скриншоты с чистой версии и моего сайта

Ress Kent · 12 Янв 2015

Поспешил, поправил на стандартный стиль для рамки.

Мини-чат на ajax

Ress Kent

Вложения

Ress Kent

Вложения

Ress Kent

Вложения

Dr_Brown

Sprinx

Ress Kent

Exile

Ress Kent

Ress Kent

Вложения

Ress Kent

Вложения