Daftar dan Belajar Sekarang!

Aplikasi chat socket.io tidak berjalan seharusnya padahal kodenya sudah dibuat sama dengan di video

foto mimila
3 Kontribusi 0 Coto
8 bulan yang lalu
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?  https://i.ibb.co/QjWSPB3/terminalnull.png daftar user online tidak muncul  https://i.ibb.co/jfQ2bZy/useronline.png dan hanya bisa masuk 1 user saja, sementara saat daftar user baru selalu keluar seperti ini  https://i.ibb.co/KLJcty0/userdipakai.png salahnya dimana ya? terimakasih untuk bantuannya mohon maaf karena masih newbie..

Jawaban
foto hilmanrdn
2000 Kontribusi 1545 Coto
8 bulan yang lalu
kamu bisa download kodenya dan bandingkan

foto mimila
3 Kontribusi 0 Coto
8 bulan yang lalu
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
  • silahkan diperhatikan lagi, kalau hasilnya beda, berarti kode yang ditulis memang ada bedanya. - hilmanrdn
  • thank you @hilmanrdn udah ketemu kurang "#" - mimila


Login untuk diksusi di forum sekolah koding