Postingan lainnya

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..

nodejs javascript jquery

@mimila

3 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

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

@hilmanski

2670 Kontribusi 2132 Poin

Dipost 5 tahun 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

@mimila

3 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

Tanggapan

silahkan diperhatikan lagi, kalau hasilnya beda, berarti kode yang ditulis memang ada bedanya.

@hilmanski

thank you @hilmanrdn udah ketemu kurang "#"

@mimila