Socket.IO adalah library JavaScript yang digunakan untuk membuat aplikasi realtime seperti chat. Dalam tutorial ini, kita akan belajar bagaimana membuat sebuah aplikasi chat sederhana menggunakan Socket.IO.

Pertama, buat sebuah folder baru dan buat file server.js di dalamnya. Kemudian, masukkan kode berikut ke dalam file tersebut:

  
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  socket.on('chat message', msg => {
    io.emit('chat message', msg);
  });
});

http.listen(port, () => {
  console.log(`Socket.IO server running at http://localhost:${port}/`);
});
  

Kode di atas merupakan kode dasar untuk menjalankan server Socket.IO. Kita menggunakan Express untuk menangani routing dan mengirimkan file index.html ke client saat client mengakses halaman ‘/’. Kemudian, kita menggunakan socket.io dengan http server.

Selanjutnya, buat file index.html di dalam folder yang sama dengan file server.js dan masukkan kode berikut ke dalam file tersebut:

  



  
  
  
  
  


  

    

      Send
    
    
<script>
  var socket = io();

  var messages = document.getElementById('messages');
  var form = document.getElementById('form');
  var input = document.getElementById('input');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });

  socket.on('chat message', function(msg) {
    var item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  });
</script>



  

Kode di atas adalah kode HTML untuk tampilan aplikasi chat kita. Kita menggunakan elemen ul dengan id “messages” untuk menampilkan pesan yang diterima, elemen form dengan id “form” untuk mengirim pesan dan elemen input dengan id “input” untuk mengetik pesan.

Setelah kita memahami kode di atas, kita dapat menjelaskan bagaimana aplikasi chat ini bekerja. Pertama, aplikasi mengeksekusi kode JavaScript yang mengatur event listener pada form. Setiap kali form dikirim (submit), event listener akan menjalankan fungsi yang mencegah aksi default dari form dan mengirim pesan yang ditulis di input ke server melalui socket.io dengan emit event “chat message” dan mengosongkan input.

Kemudian, server menerima event “chat message” dan mengirim pesan yang diterimanya kembali ke semua client yang terhubung dengan emit event “chat message” juga. Pada client, event listener ditambahkan pada socket untuk menerima event “chat message” dan menambahkan pesan tersebut ke dalam element ul dengan id “messages” dan mencakup tampilan.

Itulah cara kerja aplikasi chat sederhana menggunakan socket.io. Kamu dapat mencoba menjalankan aplikasi ini di localhost dengan menjalankan perintah “node server.js” di command prompt atau terminal dan mengunjungi http://localhost:3000/ di browser.

Demo aplikasi:

Referensi: 👉https://socket.io/get-started/chat

Source code: 👉https://github.com/socketio/chat-example

Sekian, Semoga Bermanfaat!

Jangan lupa share artikel ini ke orang lain, barangkali mereka membutuhkan. Jangan sungkan hubungi kami bila ada pertanyan. Atau silahkan tinggalkan komentar di bawah dan mari kita berdiskusi.

Pennulis:

Heri Wahyudiono

Ditulis pada:

Lampung, 2023-01-26

---

Tag: html css bootstrap tailwind css javascript php react codeigniter node js mysql flutter socket.io