Create Chat Applications using NodeJS, Socket.io & Mysql - Web-based chat applications that can run in real time, can send messages in the form of text or images. This application is a private chat or one to one.
I named this chat application Inponow Web Message. This application has several features, namely :
- login and resigister system
- contact storage
- change photo and profile information
- sending text and images in real time
- delete messages & contacts
The dependencies used in helping the creation of this chat application include :
- socket.io
- express
- ejs
- bootstrap
Here is a demo of a chat application called Inponow Web Chat.
 |
| 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">×</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">×</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">×</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 :
Tidak ada komentar:
Posting Komentar