Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Aplikasi chat socket.io tidak berjalan seharusnya padahal kodenya sudah dibuat sama dengan di video
Halo saya mau bertanya,
saya merasa sudah ketik kode di server.js dan index.html dengan benar tapi kenapa tidak mau berjalan seharusnya? apa ada yang bisa membantu menjelaskan salahnya dimana?
ini untuk server.js nya :
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
var users = {};
var usernames = [];
io.on('connection', function(socket){
socket.broadcast.emit('newMessage', 'someone connected');
//kalo ada user yang daftar
socket.on('registerUser', function(username){
if(usernames.indexOf(username) != -1){
socket.emit('registerRespond', false);
} else {
users[socket.id] = username;
usernames.push(username);
socket.emit('registerRespond', true);
io.emit('addOnlineUsers', usernames);
console.log(users);
console.log('-----------');
console.log(usernames);
}
});
//kalo ada message baru
socket.on('newMessage', function(msg){
io.emit('newMessage', msg);
console.log('Chat baru : ' + msg);
});
//kalo ada message baru
socket.on('newTyping', function(msg){
io.emit('newTyping', msg);
})
//kalo user disconnect
socket.on('disconnect', function(msg){
socket.broadcast.emit('newMessage', 'someone left the chat');
var index = usernames.indexOf(users[socket.id]);
usernames.splice(index, 1);
delete users[socket.id];
io.emit('addOnlineUsers', usernames);
});
})
http.listen(3000, function(){
console.log('listening on 3000...');
});
lalu ini untuk index.html-nya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Socket io node js</title>
<style media="screen">
form{
position: absolute;
bottom: 0px;
width: 100%;
background: grey;
padding: 20px;
}
form::before, form::after{
clear: both;
}
li{
padding: 5px;
}
#message li:nth-child(even){
background: #333;
color: white;
}
#text_box{
float: left; width: 60%; height: 30px; border: none;
}
#nama_user{
float: left; width: 20%; height: 30px; border: none; margin-right: 10px;
}
button{
float: left; width: 10%; height: 33px; margin-left: 10px;
}
.hidden{
display: none;
}
#rightBox{
float: left;
width: 25%;
}
#leftBox{
float: left;
width: 70%;
}
</style>
</head>
<body>
<div id="homepage">
<h1>Selamat datang chatroom SK</h1>
<input type="text" id="nama_user" placeholder="nama kamu..">
<button id="submit_name"> Masuk!</button>
</div>
<div id="chatroom" class="hidden">
<div id="leftBox">
<ul id="messages"></ul>
</div>
<div id="rightBox">
<h2>Daftar user yang online</h2>
<ul id="user_lists"></ul>
</div>
<form>
<input type="text" id="text_box" placeholder="tulis pesan"> <button> Kirim </button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var socket = io();
var username = '';
$('form').submit(function(){
username = $('#nama_user').val();
socket.emit('newMessage', username + ' : ' + $('#text_box').val());
$('#text_box').val('');
isTyping = false;
return false;
})
//daftar user
socket.on('addOnlineUsers', function(usernames){
$('#user_lists').empty();
for(var i=0; i<usernames.length; i++){
$('#user_lists').append($('<li id="user_' + usernames[i] +'">').text(usernames[i]));
}
})
//untuk menampilkan frontend
socket.on('newMessage', function(msg){
$('#messages').append($('<li>').text(msg + '|| pada : ' + Date()));
$(".temporary").remove();
});
//ketika user daftar nama -> masuk ke chatroom
$('#submit_name').click(function(){
//validasi namanya sudah ada atau belum?
if($('nama_user') != ''){
//menguji nama exist atau belum
username = $('nama_user').val();
socket.emit('registerUser', username);
}
});
//menerima respon dari server saat register
socket.on('registerRespond', function(status){
if(status == false){
alert('username sudah dipakai, mohon cari nama lain');
}else{
$('#chatroom').removeClass('hidden');
$('#homepage').addClass('hidden');
}
});
//when someone typing
var isTyping = false;
$('#text_box').keyup(function(){
if(isTyping == false){
socket.emit('newTyping', username + ' sedang mengetik...');
}
isTyping = true;
});
socket.on('newTyping', function(msg){
$('#messages').append($('<li class="temporary">').text(msg));
});
</script>
</body>
</html>
setelah di jalankan node server.js
hasilnya kenapa console users & username di terminalnya tetap null?
daftar user online tidak muncul
dan hanya bisa masuk 1 user saja, sementara saat daftar user baru selalu keluar seperti ini
salahnya dimana ya? terimakasih untuk bantuannya mohon maaf karena masih newbie..
2 Jawaban:
kamu bisa <a href='https://sekolahkoding.com/kelas/membuat-aplikasi-chat-dengan-nodejs/video/menambahkan-username-waktu-dan-style '>download kodenya</a> dan bandingkan
halo @hilmanrdn, terimakasih udah menjawab.
maaf, saya sudah membandingkan dan sudah diubah sesuai kode yang di download di video. dibandingkan berkali-kali..
tapi hasilnya beda. yang saya ketik sendiri dengan yang di download.
padahal menurut saya sudah sama persis.
apa ada masalah dengan kode yang saya ketik sendiri? terimakasih
Tanggapan
silahkan diperhatikan lagi, kalau hasilnya beda, berarti kode yang ditulis memang ada bedanya.
thank you @hilmanrdn udah ketemu kurang "#"