RCHAT

Salut tuturor,

De cateva zile am inceput sa lucrez la un proiect:cel mai bun chatbox custom de pe forumGratuit . I-am pus numele RChat(R de la username-ul meu ). Codul se afla in versiunea beta, astfel ca este posibil sa aiba bug-uri.

Previzualizare

---

Daca doriti sa vedeti chat-ul in actiune, intrati pe forumul meu(link-ul se afla la profil).

Instalare

---

Pentru a folosi chat-ul va trebui ca mai intai sa creati un topic cu orice nume si care sa contina acest cod ca mesaj:

Cod:

<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'>Bine ati venit in chat. Sunteti rugati sa respectati regulile precizate in regulamentul forumului.</div></div></div>


Puteti modifica "ChatBot", "Bine ati venit in chat. Sunteti rugati sa respectati regulile precizate in regulamentul forumului.", precum si link-ul avatarului.

Dupa aceasta va trebui sa adaugati urmatorul cod CSS:

Cod:

#chat_btn{
position:fixed;
bottom:5px;
right:5px;
background:#055;
opacity:0.8;cursor:pointer;
padding:5px;
border-bottom:2px solid #088;
color:#f2f2f2;
}
#chat_btn:hover{
opacity:1.0;
}
#chat_inner{
opacity:0.0;
display:none;
position:fixed;
right:5px;
bottom:40px;
width:70%;
height:400px;
background:#f2f2f2;
border:2px solid #055;
}
#chat_inner.s{
opacity:0.97;
display:block;
}
#chat_head{
background:#055;
padding:5px;
color:#f2f2f2;
}
#chat_content{
height:340px;
overflow-y:scroll;
}
#chat_form{
width:100%;
position:absolute;
border-top:2px solid #055;
bottom:0px;
}
#chat_form>*{
display:inline-table;
}
#chat_form_input{
color:#055;
background:#f2f2f2;
border:0px;
border-right:2px solid #055;
}
#chat_form_send{
padding:6px;
border-right:2px solid #055;
color:#055;
cursor:pointer;
}
#chat_form_send:hover{
background:#055;
color:#f2f2f2;
}
#chat_content{
width:100%;
}
#chat_content>#chat_bl{
padding:3px;
display:inline-table;
}
#chat_content>#chat_bl>*{
display:inline-table;
}
#chat_content>#chat_bl>#chat_group>#chat_avatar>img{
border-radius:100%;
width:30px;
height:30px;
}
#chat_content>#chat_bl>#chat_group>#chat_avatar{
padding-top:3px;
}
#chat_content>#chat_bl>#chat_group{
background:#098;
color:#f2f2f2;
width:100%;
}
#chat_content>#chat_bl>#chat_message{
background:#055
color:#f2f2f2
position:relative;
padding:9.5px;
display:inline-table;
word-break:break-all;
}
#chat_content>#chat_bl>#chat_group>#chat_name{
position:relative;
top:-9px;
}
#chat_content>#chat_bl>#chat_group>*{
display:inline-table;
}
#chat_smilies>img{
vertical-align:-7px;
}
#chat_smilies{
cursor:pointer;
}
#chat_smi_pop{
position:absolute;
bottom:50px;
left:165px;
background:#f2f2f2;
opacity:0.9;
border:1px solid #098;
width:200px;
text-align:center;
}
#chat_smi_pop_head{
padding:3px;
background:#098;
color:#f2f2f2;
border-bottom:2px solid #055;
}

Si in final, codul javaScript cu plasamentul pe paginile pe care doriti sa apara chat-ul:

Cod:

window.Rchat = {};
Rchat.config = {
    html: "<div id='chat'><div id='chat_btn'>Chatbox</div><div id='chat_inner'><div id='chat_head'>Chatbox</div><div id='chat_content'><center><span>Se incarca...</span></center></div><div id='chat_form'><input type='text' id='chat_form_input' placeholder='Scrie ceva...'></input><div id='chat_form_send'>Trimite</div><div id='chat_btts'><div id='chat_smilies'><img src='https://2img.net/u/3614/12/33/96/smiles/251363279.png'/></div></div></div></div></div>",
    add_html: function() {
        $("body").append(Rchat.config.html);
    },
    sel: "#chat_sis",
    chatting: 1,
    topic: "22",
    delay: 2000,
    sending: 0,
    ct: [],
    form_auth: ""
};
Rchat.init = function() {
    Rchat.config.add_html();
    Rchat.config.toggleSH($("#chat_btn"));
};
Rchat.config.toggleSH = function(elem) {
    elem.click(function(e) {
        $("#chat_inner").toggle().toggleClass("s");
        if ($("#chat_inner").css("display") == "none") {
            localStorage.activc = "0";
        } else {
            localStorage.activc = "1";
        };
        e.preventDefault();
    });
};
Rchat.config.start_chat = function() {
    Rchat.config.chatting = 1;
    Rchat.config.receive();
};
Rchat.config.stop_chat = function() {
    Rchat.config.chatting = 0;
};
Rchat.config.receive = function() {
    if (Rchat.config.chatting) {
        if (localStorage.activc == "1") {
            $.get("/t" + Rchat.config.topic + "-?view=newest", function(data) {
                if ($("#chat_content>center").length) $("#chat_content>center").remove();
                Rchat.config.form_auth = [$(data).find("[name='auth[]']").eq(0).val(), $(data).find("[name='auth[]']").eq(1).val()];
                var m = $(data).find(Rchat.config.sel),
                    len = m.length,
                    i = 0;
                if (len < Rchat.config.ct.length) {
                    Rchat.config.ct = [];
                    $("#chat_content").html("");
                    for (i; i < len; i++) {
                        Rchat.config.ct.push(m.eq(i).html());
                        $("#chat_content").append(m.eq(i).html());
                        $('#chat_content').scrollTop($('#chat_content')[0].scrollHeight);
                    };
                } else {
                    for (i; i < len; i++) {
                        if (m.eq(i).html() != Rchat.config.ct[i] && i < Rchat.config.ct.length) {
                            Rchat.config.ct[i] = m.eq(i).html();
                            $("#chat_content>div").eq(i).html(m.eq(i).html());
                        } else {
                            if (m.eq(i).html() != Rchat.config.ct[i]) {
                                $("#chat_content").append(m.eq(i).html());
                                Rchat.config.ct[i] = m.eq(i).html();
                            }
                        };
                    };
                };
                setTimeout(function() {
                    Rchat.config.receive();
                }, Rchat.config.delay);
            })
        } else {

            setTimeout(function() {
                Rchat.config.receive();
            }, Rchat.config.delay);
        };
    };
};
Rchat.config.comp = function(name, avatar, mess) {
    return "<div id='chat_sis'><div id='chat_bl'><div id='chat_group'><div id='chat_avatar'><img src='" + avatar + "'/></div><div id='chat_name'>" + name + "</div></div><div id='chat_message'>" + mess + "</div></div></div>";
};
Rchat.config.send = function(m) {
    if (!Rchat.config.sending) {
        Rchat.config.sending = 1;
        $.post("/post", {
            t: Rchat.config.topic,
            mode: 'reply',
            post: 'OK',
            message: m,
            auth: Rchat.config.form_auth
        }).always(function() {
            Rchat.config.sending = 0;
        });
    };
};
Rchat.config.init_send = function() {
    $("#chat_form_send").click(function() {
        Rchat.config.send(Rchat.config.comp(_userdata.username, _userdata.avatar.split("src=")[1].split("   ")[0].split(""")[1], $("#chat_form_input").val()));
        $("#chat_form_input").val("");
    });
};

$(function() {
    if (localStorage.activc == undefined) localStorage.activc = "0";
    Rchat.init();
    if (localStorage.activc == "1") $("#chat_btn").click();
    Rchat.config.start_chat();
    Rchat.config.init_send();
});

Va trebui sa cautati urmatoarea linie:

Cod:

topic: "22",

si sa modificati 22 in id-ul topicului creat.

Bug-uri+Idei

---

Codul este in versiunea beta(adica nu a fost optimizat complet si este posibil sa contina si bug-uri). Daca gasiti un bug sau aveti idei despre ce as putea adauga la chat, lasati un mesaj in acest  topic.

Păi, chat-ul nu l-am testat pe forum am întrat pe forumul tău am văzut că seend-ul este vizibil pentru vizitatori ce nu ar trebuii să fie sau să ai o obțiune chat guests, chat members. Chat-ul nu execută și pagina a doua deci nu ai posibilitatea să vezi toate mesajele pe chat, nu apar diferite erori de avertizarea userilor pentru un aspect mai plăcut, după părerea mea! Se poate face un chat și fără să adaugi un text în mesaj .Oricum multă baftă cu această variantă

Ionut, chat-ul e in versiunea beta, deci nu este terminat. Legat de vizitatori, voi adauga o opțiune pentru ascunderea chat-ului sau poate o camera speciala.

părerea mea, e dacă vrei un chat numai pentru administratori, și moderatori recomand acest chat: https://help.forumgratuit.ro/t51780-cum-putem-adauga-un-chat-pentru-staff-ul-forumului

chat-ul nu este vizibil pentru vizitatori, membri, decât atunci când ei obțin un grad prin cerere.

@mihai, iti respect parerea, dar aceasta nu prea are sens. Topicul acesta este despre dezvoltarea unui chat, nu despre chat-uri pentru staff.

Frumos cod, insa îți recomand folosirea json și ajax pentru un proiect de succes. Încearcă sa limitezi puțin codul, sau dacă crezi că este mai bine, îți recomand să il rescrii sub o alta forma. Aici '
window.Rchat = {};' îți propun sa faci așa.


window.Rchat = {
    config: {},
    other: {}
};

@Apollo, ma gândisem si eu sa las in config doar ce avea legătură cu config-ul, și restul sa le separ. Următoarea versiune(probabil ca va apărea mâine) va fi mai user-friendly legat de configurări. Am văzut ca apar erori daca chat-ul e deschis in 3 tab-uri(request limit exceeded) așa ca probabil voi pune mesajele in localstorage ca sa trimit request-uri doar de pe o pagina.

Dacă îți apare acea eroare înseamnă că folosește .Get in exces, și cauzează încărcarea pagini prea mult, atunci serverul principal trimite eroarea, încearcă cu session storage (salvare date pe sesiune). Aștept să văd noua versiune.

Mult succes.

Versiunea 1.0

---

Am terminat prima versiune stabila a chat-ului.

Bug-uri rezolvate

---

-Scroll-ul automat cand apar mesaje noi ar trebui sa functioneze acum fara probleme
-Nu se mai pot trimite mesaje goale

Noutati

---

-Acum puteti folosi emoji-urile de pe forum si in chat
-Configurarile sut mult mai usor de efectuat
-Codul este mai bine structurat, fisierele css si js fiind deasemenea hostate pe CDN-ul GitHub

Codul JS

---

Cod:

window.Rchat={};
Rchat.lang={
btn_text:"Chatbox",
chat_head:"Chatbox"
};
Rchat.config={
html:"<div id='chat'><div id='chat_btn'>"+Rchat.lang.btn_text+"</div><div id='chat_inner'><div id='chat_head'>"+Rchat.lang.chat_head+"</div><div id='chat_content'><center><span>Se incarca...</span></center></div><div id='chat_form'><input type='text' id='chat_form_input' placeholder='Scrie ceva...'></input><div id='chat_form_send'>Trimite</div><div id='chat_btts'><div id='chat_smilies'><img src='https://2img.net/u/3614/12/33/96/smiles/251363279.png'/></div></div></div></div></div>",
topic:"5",
delay:0
};
$(function(){
$("head").append("<script src='https://rawgit.com/Wolfuryo/RChat/master/main.js'></script><link type='text/css' rel='stylesheet' href='https://rawgit.com/Wolfuryo/RChat/master/main.css'/>");
});

Este necesar sa stergeti toate codurile CSS pe care le-ati adaugat anterior si au legatura cu acest chat.

Configurari

---

Puteti modifica obiectul config, precum si obiectul lang(cel din urma nu este inca terminat).
-html:Puteti modifica structura HTML a chat-ului
-topic:Link-ul topicului folosit pentru chat
-delay:Cat de des sa trimita codul cereri catre server. Cu cat valoarea e mai mica, cu atat chat-ul este mai fluent, dar este posibil ca serverul sa dea erori.


Daca doriti sa colaborati la acest proiect, acesta este link-ul repository-ul de pe github:https://github.com/Wolfuryo/RChat

Versiunea 1.1

---

Am rezolvat multe bug-uri si am adaugat cateva functionalitati noi. Daca aveti inca instalata versiunea 1.0, nu veti putea folosi chat-ul

Bug-uri rezolvate

---

-Scroll-ul automat functioneaza acum fara bug-uri(initial nu functiona la prima incarcare a mesajelor)
-Mici optimizari ale codului

Functionalitati noi

---

-Afisarea numarului de mesaje noi langa butonul de deschidere al chat-ului, atunci cand acesta din urma este inchis
-Buton pentru resetarea chat-ului(stergerea intrarilor din localStorage)
-Desing imbunatatit
-Posibilitatea modificarii textelor chat-ului cu ajutorul obiectului lang

Codul JS

---

Pentru a beneficia de noua versiune, trebuie sa inlocuiti codul versiunii anterioare cu acesta:

Cod:

window.Rchat={};
Rchat.lang={
btn_text:"Chatbox",
chat_head:"Chatbox",
reset:"Reseteaza chat-ul",
loading:"Se incarca...",
placeholder_input:"Scrie un mesaj",
send:"Trimite",
no_empty:"Nu poti trimite un mesaj gol",
emoji_head:"Smilies"
};
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://2img.net/u/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'/>");
});

Alte precizari

---

Trebuie sa editati variabila topic(topic:"/t22-chattopics"),modificand-o in link-ul forumului folosit pentru chat. Este necesar sa puneti link-ul complet.
Puteti deasemenea edita obiectul lang si puteti modifica delay-ul.