Skip to main content

Membuat Aplikasi Chatting menggunakan NodeJS, Socket.io & Mysql

Membuat Aplikasi Chatting menggunakan NodeJS, Socket.io & Mysql - Aplikasi chating berbasis web yang dapat berjalan secara realtime, dapat mengirimkan pesan berupa text maupun gambar. aplikasi ini bersifat private chat, atau one to one.

Aplikasi chating ini saya beri nama inponow web message. Didalamnya terdapat beberapa fitur yaitu :

  • login dan resigister system
  • penyimpanan kontak
  • mengubah photo dan informasi profile
  • pengiriman text dan image secara realtime
  • menghapus pesan & kontak


Dependencies yang digunakan dalam membantu pembuatan aplikasi chatting ini diantaranya :

  • socket.io
  • express
  • ejs
  • bootstrap

Berikut merupakan demo dari aplikasi chatting yang bernama Inponow Web Chat. Dan saya akan menggunakan bahasa inggris untuk menjelaskan setiap file yang saya bagikan.

  Stuktur folder dari Inponow Realtime Chatting Application

app folder structure


Login.ejs, script to set the login/register display and check the username in the Inponow Web Chat application.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Inponow Web Message</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/jsjq/jquery.min.js" charset="utf-8"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/socket.io/socket.io.js" charset="utf-8"></script>
  <style media="screen">
    @font-face {
      font-family: 'sans-bold';
      src: url('/font/OpenSans-Bold.ttf');
    }

    @font-face {
      font-family: 'sans';
      src: url('/font/OpenSans-Regular.ttf');
    }

    body {
      color: #000;
      overflow-x: hidden;
      font-family: 'sans';
      height: 100%;
      background-color: #fff;
      background-repeat: no-repeat
    }

    .card2 {
      margin: 0px 40px
    }

    .logo {
      width: 250px;
      margin-top: 20px;
      margin-left: 35px;
      /* padding: 30px 0 */
    }

    .image {
      width: 360px;
      height: 280px
    }

    .border-line {
      border-right: 1px solid #EEEEEE
    }

    .text-sm {
      font-size: 14px !important
    }

    .shadow {
      /* box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px !important; */
      box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.3) 0px 0px 0px 1px !important;
      border-radius: 7.2px;
    }

    ::placeholder {
      color: #BDBDBD;
      opacity: 1;
      font-weight: 300
    }

    :-ms-input-placeholder {
      color: #BDBDBD;
      font-weight: 300
    }

    ::-ms-input-placeholder {
      color: #BDBDBD;
      font-weight: 300
    }

    input,
    textarea {
      padding: 10px 12px 10px 12px;
      border: 1px solid transparent;
      box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
      border-radius: 7px;
      margin-bottom: 5px;
      margin-top: 2px;
      width: 100%;
      color: #2C3E50;
      font-size: 14px;
      letter-spacing: 1px;
    }

    input:focus,
    textarea:focus {
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      border: 1px solid #304FFE;
      outline-width: 0
    }

    button:focus {
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      outline-width: 0
    }

    a {
      color: inherit;
      cursor: pointer
    }

    .btn-blue {
      width: 150px;
      border-radius: 2px;
      background: #00CF68 !important;
      color: white;
      border-color: #00CF68;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20) !important;
      border-radius: 7.2px;
    }

    .btn-blue:hover {
      background-color: #000;
      color: white;
      cursor: pointer
    }

    .bg-blue {
      color: #fff;
      background-color: #00A3FF
    }

    @media screen and (max-width: 991px) {
      .logo {
        margin-left: 0px
      }

      .image {
        width: 300px;
        height: 220px
      }

      .border-line {
        border-right: none
      }

    }
  </style>
</head>

<body>
  <div class="row login__">
    <div class="col-md"></div>
    <div class="col-md-6" style="top:7em">
      <div class="px-1 px-md-5 mx-auto">
        <div class="card border-0">
          <div class="row d-flex">
            <!-- <div class="col-lg-6">
                    <div class="card1 pb-5">
                        <div class="row"> <img src="" class="logo px-5 py-4"> </div>
                        <div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img src="/custom/chat.svg" class="image"> </div>
                    </div>
                </div> -->
            <div class="col-lg-12">
              <div class="border-0 card px-4 py-5">
                <h3 class="pb-3">Inponow <span style="color:#00CF68;font-family:'sans-bold'">Web Chat</span></h3>
                <% if(flash_login != '' && type == 'signin'){ %>
                <div class="alert alert-danger alert-dismissible fade shadow show alert__" role="alert">
                  <strong style="font-size:13px"><%= flash_login %></strong>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <% }else if(flash_login != '' && type == 'signup') { %>
                <div class="alert alert-info alert-dismissible fade shadow show alert__" role="alert">
                  <strong style="font-size:13px"><%= flash_login %></strong>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <% } %>
                <form action="/signin" method="post">
                  <div class="row px-3"> <label class="mb-1">
                      <h6 class="mb-0 text-sm">Username</h6>
                    </label> <input class="mb-4" type="text" name="username" placeholder="Enter a valid username" autocomplete="off"> </div>
                  <div class="row px-3"> <label class="mb-1">
                      <h6 class="mb-0 text-sm">Password</h6>
                    </label> <input type="password" name="password" class="passw1" placeholder="Enter password"> </div>
                  <div class="row px-3 mb-4">
                    <div class="custom-control custom-checkbox custom-control-inline"> <input id="chk1" type="checkbox" name="chk" class="custom-control-input"> <label for="chk1" class="custom-control-label text-sm">Show Password</label> </div> <a
                      href="#" class="ml-auto mb-0 text-sm">Forgot Password?</a>
                  </div>
                  <div class="row mb-3 px-3 "> <button type="submit" class="btn btn-blue text-center">Login</button> </div>
                  <div class="row px-3"> <small>Haven't an account? <a class="register font-weight-bold" style="font-family:'sans-bold'">Register</a></small> </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md"></div>
  </div>

  <div class="row register__" style="display:none">
    <div class="col-md"></div>
    <div class="col-md-8" style="top:7em">
      <div class="px-1 px-md-5 mx-auto">
        <div class="card border-0">
          <div class="row d-flex">
            <div class="col-lg-12">
              <div class="border-0 card px-4 py-5">
                <h3 class="pb-3">Inponow <span style="color:#00CF68;font-family:'sans-bold'">Web Chat</span></h3>
                <form action="/signup" method="post">
                  <div class="row">
                    <div class="col-md-12 username_check_area">

                    </div>
                    <div class="col-md">
                      <label class="mb-1">
                        <h6 class="mb-0 text-sm">Username</h6>
                      </label>
                      <input class="mb-4 ccus" type="text" name="username" required placeholder="Enter a valid username" autocomplete="off">
                    </div>
                    <div class="col-md">
                      <div class=""> <label class="mb-1">
                          <h6 class="mb-0 text-sm">Your Fullname</h6>
                        </label> <input class="mb-4" type="text" name="name" required autocomplete="off" placeholder="Your username"> </div>
                    </div>
                  </div>
                  <div class="row px-3"> <label class="mb-1">
                      <h6 class="mb-0 text-sm">Password</h6>
                    </label> <input type="password" class="mb-4" name="password" required placeholder="Enter password"> </div>
                  <div class="row mb-3 px-3 "> <button type="submit" class="btn btn-blue text-center">Register</button> </div>
                  <div class="row px-3"> <small>Have an account? <a class="login font-weight-bold" style="font-family:'sans-bold'">Login</a></small> </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md"></div>
  </div>
  </div>

  <script type="text/javascript">
    $('.login').on('click', function() {
      $('.login__').show();
      $('.register__').hide();
    })
    $('.register').on('click', function() {
      $('.register__').show();
      $('.login__').hide();
    })

    $('.ccus').on('change', function () {
      $.ajax({
        url: "/check_username",
        type: 'POST',
        cache: false,
        dataType: 'JSON',
        data: {
          username: $(this).val(),
        },
        success: function(result) {
          console.log(result);
          if (result == 1) {
            // console.log('berhasil horeloca');
            $('.username_check_area').html(`<div class="alert alert-danger alert-dismissible fade show shadow" role="alert">
              Username <b style="text-transform:capitalize">${$('.ccus').val()}</b> has been used, type another username.
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>`);
            $('.ccus').val('');
          }else {
            $('.username_check_area').html('');
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.error();
        }
      })
    })

    $(document).ready(function() {
      setTimeout(function() {
        $('.alert__').fadeOut();
      }, 3000);
    })

    $('#chk1').on('change', function() {
      if(this.checked) {
        $('.passw1').attr('type', 'input');
      }else {
        $('.passw1').attr('type', 'password');
      }
    })
  </script>
</body>

</html>


Next page :

Ad by Adsterra