Chat online realtime din trei pasi – 1/3

chat-online-thumb

Am inceput seria tutorialelor pentru aplicatii in timp real, dupa cum am mentionat anterior. In acest articol vom realiza un chat in timp real.

Focusul nostru este crearea unei aplicatii functionale din punct de vedere tehnic, prin urmare, partea de design nu va fi atat de dezvoltata.

Resurse

In aplicatia noastra vom folosi urmatoarele resurse:

  1. Bootstrap
  2. Node
  3. SocketIO

Pe langa resursele enumerate mai sus, trebuie mentionat faptul ca un VPS este necesar, deoarece e nevoie sa folosim WebSocket – acestea fiind de obicei blocate pe hosturile normale

Parcurs proiect

  1. Creare pagina principala
  2. Creare conexiune catre server
  3. Retusuri estetice/imbunatatiri de performanta/adaugare functii

Tema de astazi 

Astazi vom aborda crearea paginii principale, pentru aceasta ne vom folosi de Bootstrap – pe care-l vom vedea destul de des in proiectele noastre.

Pentru inceput, haideti sa includem libraria in pagina noastra HTML.

<html>
    <head>
        <title> Chat simplu </title>
        <link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
    </body>
</html>

In continuare vom folosi elemente din libraria noastra cum ar fi containere, randuri (row), coloane (col) – indicat ar fi sa le cititi putin inainte daca nu v-ati mai intalnit cu ele.

Acum ca ne-am familiarizat putin cu elementele pe care le vom folosi, trebuie sa stabilim designul la care vrem sa ajungem. Prin urmare, propun urmatoarele:

  1. 90% din inaltimea paginii sa fie mesajele
  2. 10% sa fie casuta unde introduci  si butonul de trimitere

Traducerea celor de mai sus in cod HTML o gasim mai jos – acestea trebuie introduse intre tagurile body, deoarece reprezinta corpul paginii.

<div class="container">
    <div class="row h-90" style="overflow-y:scroll;">
         <!-- randul trebuie sa fie fix de 90% din pagina
         daca avem mai multe mesaje, trebuie sa dam scroll -->
         <div class="col-6" id="primite">
             <!-- in stanga mesajele primite -->
         </div>
         <div class="col-6" id="trimise">
             <!-- in dreapta mesajele trimise -->
         </div>
    </div>
    <div class="row h-10">
        <!-- formular trimitere mesaj -->
    </div>
</div>

Scheletul paginii e gata, acum trebuie sa adaugam formularul de trimitere a datelor. Pentru asta, va trebui sa reveniti la documentatie si sa cautati detalii despre form controls si form-row – vom avea nevoie de ele in continuare.

<form onSubmit="return false;">
  <!-- returnam false pentru a nu declansa reincarcarea paginii -->
  <div class="form-row">
    <div class="col-10">
      <input type="text" class="form-control" placeholder="Mesaj...">
    </div>
    <div class="col-2">
      <input type="submit" class="btn btn-outline-success btn-block" value="Trimite">
    </div>
  </div>
</form>

Acum vom pune totul cap la cap si vom considera totul complet. 

<html>
    <head>
        <title> Chat simplu </title>
        <link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
    <div class="container">
        <div class="row h-90" style="overflow-y:scroll;">
             <!-- randul trebuie sa fie fix de 90% din pagina
             daca avem mai multe mesaje, trebuie sa dam scroll -->
             <div class="col-6" id="primite">
                 <!-- in stanga mesajele primite -->
             </div>
             <div class="col-6" id="trimise">
                 <!-- in dreapta mesajele trimise -->
             </div>
        </div>
        <div class="row h-10">
            <form onSubmit="return false;">
                <!-- returnam false pentru a nu declansa reincarcarea paginii -->
                <div class="form-row">
                    <div class="col-10">
                        <input type="text" class="form-control" placeholder="Mesaj...">
                    </div>
                    <div class="col-2">
                        <input type="submit" class="btn btn-outline-success btn-block" value="Trimite">
                    </div>
                </div>
            </form>
        </div>
    </div>
    </body>
</html>

In articolul urmator vom crea conexiunea la server si apoi vom reveni asupra acestui fisier pentru a a-l lega la server, iar la ultimul pas vom reveni pentru crearea unui design mai placut ochiului.

 

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *