10
Jul
2020

Membuat Server Chat dengan Socket.io

Tutorial ini merupakan langkah pertama dari seri tutorial Aplikasi Chat Multiplatform dengan Socket.io, silahkan kunjungi link tersebut untuk melihat daftar tutorial secara lengkap.

Untuk membuat aplikasi chat dengan Socket.io, diperlukan sebuah server sebagai jembatan antar aplikasi untuk bisa saling berkomunikasi. Servernya cukup sederhana saja, hanya menggunakan Nodejs, Socket.io dan beberapa library pendukung. Data user dan pesan tidak perlu disimpan di server, cukup diterima dari user dan disampaikan ke user lainnya.

Untuk dapat mengikuti tutorial ini, pastikan di komputer teman-teman sudah terinstall Nodejs, jika belum terinstall silahkan download terlebih dahulu di https://nodejs.org/. Untuk versi yang digunakan di tutorial ini yaitu versi 12.7.0.

1. Inisialisasi proyek dengan NPM init

Langkah-langkahnya sebagai berikut:

  1. Buat sebuah folder
  2. Buka cmd dan arahkan ke dalam folder yang baru saja dibuat
  3. Ketikkan npm init
  4. Isikan semua data yang diminta

Jika langkah-langkah di atas berhasil maka akan muncul sebuah file bernama package.json di dalam folder yang baru dibuat.

2. Install socket.io dan express

Ketik npm install socket.io express di cmd, tunggu hingga selesai mengunduh. Yang digunakan di tutorial ini adalah Socket.io versi 2.3.0 dan Express versi 4.17.1.

3. Buat server sederhana

Tujuannya adalah untuk menguji apakah server bisa berjalan di komputer kita atau tidak.

Buat file baru dan beri nama index.js. Dan berikut adalah isinya:

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = 3000;

server.listen(port, ()=>{
    console.log(`Server listening at port ${port}`);
});

Jalankan kode di atas dengan cara ketik node index.js di cmd yang tadi dibuka. Jika kode berjalan lancar atau tidak ada error maka akan muncul Server listening at port 3000.

4. Handle login dan data user

Data user yang sudah login akan disimpan di array yang nantinya akan ditampilkan di client agar tahu siapa saja yang sedang online. User yang disimpan hanya user yang sedang dalam keadaan online saja.

Masih di dalam file index.js tambahkan kode berikut:

...
let users = [];

io.on('connect', (socket) => {
    let me;
    socket.emit('users', users);
    socket.on('login', (name, fn) => {
        for(var user of users){
            if (user==name) {
                fn('failed');
                return;
            }
        }
        me = name;
        users.push(me);
        io.emit('newUser', me);
        fn('success');
    });
});

Penjelasan dari kode di atas:

  • let users – digunakan untuk menyimpan seluruh data user
  • io.on(‘connect’, – listen/mendengarkan event connect. Artinya setiap user yang terhubung ke server akan ditangkap oleh fungsi tersebut. Untuk selanjutnya semua event terkait user yang terhubung akan diletakkan di dalam fungsi ini.
  • let me – untuk menyimpan user yang terhubung. Variabel ini hanya berisikan nama dari user yang berhasil login nantinya.
  • socket.emit(‘users’, users) – mengirim isi dari variabel users ke user yang baru saja terhubung dengan nama event users. Kode tersebut langsung dijalankan seketika user terhubungan dengan server, tujuannya untuk mendapatkan semua data user yang sudah terhubung ke server untuk ditampilkan di client.
  • socket.on(‘login’, – mendengarkan event login. User yang mengirimkan event login dari client akan di tangani oleh fungsi ini. Terdapat 2 parameter yang diterima dari fungsi ini yaitu name dan fn. Name sendiri adalah nama yang dikirimkan dari client, sedangkan fn adalah callback yang akan dikirimkan kembali ke client. Kenapa memerlukan callback, karena untuk memberitahu client apakah nama yang dikirimkan ke server sudah terdaftar atau belum, jika sudah maka akan dikirim kembali ke client berupa pesan failed dan jika berhasil maka akan dikirim kembali ke client berupa pesan success. Jika nama belum terdaftar, nama akan disimpan di variabel me dan juga akan disimpan di variabel users.
  • io.emit(‘newUser’, me) – fungsi ini berkaitan dengan login, jika nama user belum terdaftar maka fungsi ini akan dipanggil. Jika diperhatikan hampir mirip dengan socket.emit, tapi untuk yang ini menggunakan io.emit. Untuk io.emit akan mengirimkan event ke semua client yang terhubung. Jadi semua client akan tahu jika ada user baru yang terhubung.

5. Handle user logout dan disconnect

Sebelumnya server sudah bisa menangani user terhubung dan user login, tapi server belum bisa menangani user yang logout ataupun koneksinya terputus. Kenapa kita perlu membuat kode untuk menangani hal tersebut? Karena kita perlu menghapus data user di server jika user tersebut logout atau disconnect.

...
io.on('connect', (socket) => {
   ...
    socket.on('logout', () => {
        if (me == null) {
            return;
        }
        let index = users.indexOf(me);
        users.splice(index, 1);
        io.emit('removeUser', me);
    });
    socket.on('disconnect', () => {
        if (me==null) {
            return;
        }
        let index = users.indexOf(me);
        users.splice(index, 1);
        socket.broadcast.emit('removeUser', me);
    });
});

Penjelasan dari kode di atas:

  • socket.on(‘logout’ – mendengarkan event logout. Jika user melakukan logout maka data user tersebut akan dihapus dari array users. Dibagian akhir dari fungsi ini, server akan mengirimkan event ke semua client dengan nama event removeUser guna memberi tahu semua client agar menghapus user tersebut dari list yang ada di client.
  • socket.on(‘disconnect’ – mempunyai tujuan yang sama dengan logout, bedanya pada bagian akhir fungsi ini yaitu server mengirimkan event dengan nama event removeUser ke semua client kecuali client yang mengirim event ini.

6. Handle pertukaran pesan

Setelah menangani data user, saatnya membahas tentang pesan. Kabar baiknya, kode untuk pertukaran pesan ini malah lebih sederhana dari kode untuk penanganan user. Karena pesan yang disampaikan ke server hanya akan diteruskan begitu saja ke user, jadi tidak perlu disimpan.

...
io.on('connect', (socket) => {
    ...
    socket.on('newMessage', (message) => {
        io.emit('newMessage', message);
    });
});

Jadi setiap pesan yang dikirimkan ke server, akan diteruskan/dikirimkan ke semua client.


Cukup mudah bukan untuk kode di bagian server? Untuk kode lengkapnya, teman-teman bisa lihat di https://github.com/hendrawanwijaya/hendra-one-socket-io-chat-server

Sekian dulu untuk tutorial kali ini, jika ada pertanyaan, usulan atau koreksi bisa sampaikan di kolom komentar ya. Terima kasih.

Share

You may also like...