RCHAT

Vezi subiectul anterior Vezi subiectul urmator In jos

RCHAT

Mesaj Scris de R1bb0N la data de Joi 15 Iun - 21:39

Salut tuturor,

De cateva zile am inceput sa lucrez la un proiect:cel mai bun chatbox custom de pe forumGratuit Super . I-am pus numele RChat(R de la username-ul meu Fericit ). 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://imgfast.net/users/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.
avatar
R1bb0N
Membru Forumgratuit

Mesaje : 62
Varsta : 16
Data înscrierii : 26/06/2016
Multumiri : 6
Niciun avertisment

http://board.realmsn.com

Sus In jos

Re: RCHAT

Mesaj Scris de Ionut la data de Vin 16 Iun - 7:38

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 Fericit.Oricum multă baftă cu această variantă


The Best Skin IPB.Board, platforma ForumGratuit
avatar
Ionut
Asistent
Asistent

masculin

Mesaje : 655
Varsta : 19
Data înscrierii : 01/11/2015
Multumiri : 74
Niciun avertisment

http://helptutorial.rpgwars.net/

Sus In jos

Re: RCHAT

Mesaj Scris de R1bb0N la data de Vin 16 Iun - 10:45

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.
avatar
R1bb0N
Membru Forumgratuit

Mesaje : 62
Varsta : 16
Data înscrierii : 26/06/2016
Multumiri : 6
Niciun avertisment

http://board.realmsn.com

Sus In jos

Re: RCHAT

Mesaj Scris de mihai la data de Vin 16 Iun - 15:19

părerea mea, e dacă vrei un chat numai pentru administratori, și moderatori recomand acest chat: http://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.
avatar
mihai
Membru Forumgratuit

masculin

Mesaje : 383
Varsta : 19
Localizare : Forumgratuit
Data înscrierii : 25/09/2014
Multumiri : 22
2 avertismente

http://wikifg.forumgratuit.ro/

Sus In jos

Re: RCHAT

Mesaj Scris de R1bb0N la data de Vin 16 Iun - 19:57

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

Mesaje : 62
Varsta : 16
Data înscrierii : 26/06/2016
Multumiri : 6
Niciun avertisment

http://board.realmsn.com

Sus In jos

Re: RCHAT

Mesaj Scris de Apollo la data de Vin 16 Iun - 22:38

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: {}
};
avatar
Apollo
Membru onorific
Membru onorific

masculin

Mesaje : 922
Varsta : 23
Localizare : Github, SSYT.
Data înscrierii : 10/08/2015
Multumiri : 113
Niciun avertisment

https://goo.gl/FNpP4P

Sus In jos

Re: RCHAT

Mesaj Scris de R1bb0N la data de Sam 17 Iun - 8:36

@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.


Ultima editare efectuata de catre R1bb0N in Sam 17 Iun - 15:51, editata de 1 ori
avatar
R1bb0N
Membru Forumgratuit

Mesaje : 62
Varsta : 16
Data înscrierii : 26/06/2016
Multumiri : 6
Niciun avertisment

http://board.realmsn.com

Sus In jos

Re: RCHAT

Mesaj Scris de Apollo la data de Sam 17 Iun - 13:58

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.
avatar
Apollo
Membru onorific
Membru onorific

masculin

Mesaje : 922
Varsta : 23
Localizare : Github, SSYT.
Data înscrierii : 10/08/2015
Multumiri : 113
Niciun avertisment

https://goo.gl/FNpP4P

Sus In jos

Re: RCHAT

Mesaj Scris de R1bb0N la data de Sam 17 Iun - 19:18

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://imgfast.net/users/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
avatar
R1bb0N
Membru Forumgratuit

Mesaje : 62
Varsta : 16
Data înscrierii : 26/06/2016
Multumiri : 6
Niciun avertisment

http://board.realmsn.com

Sus In jos

Re: RCHAT

Mesaj Scris de R1bb0N la data de Dum 18 Iun - 23:40

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://imgfast.net/users/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.
avatar
R1bb0N
Membru Forumgratuit

Mesaje : 62
Varsta : 16
Data înscrierii : 26/06/2016
Multumiri : 6
Niciun avertisment

http://board.realmsn.com

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum