Cara termudah untuk membuat aplikasi chat realtime dengan Python adalah menggunakan framework Tornado, karena arsitektur asinkronusnya dirancang khusus untuk menangani banyak koneksi persisten seperti WebSocket. Dengan Tornado, Anda bisa membangun server chat yang efisien, yang mampu menerima dan menyiarkan pesan ke banyak pengguna secara instan.

Aplikasi chat adalah contoh klasik dari aplikasi real-time. Berbeda dengan situs web biasa di mana Anda meminta halaman dan server mengirimkannya, aplikasi chat membutuhkan komunikasi dua arah yang konstan dan instan. Tornado, dengan model non-blocking I/O-nya, adalah alat yang sempurna untuk pekerjaan ini. Artikel ini akan memandu Anda melalui konsep dan kode dasar untuk membangun aplikasi chat sederhana Anda sendiri.

baca juga : Tangani Ribuan Koneksi Sekaligus dengan Kekuatan Asinkronus Tornado

Kenapa Tornado? Senjata yang Tepat untuk Komunikasi Realtime

Sebelum kita masuk ke dalam kode, penting untuk memahami mengapa Tornado adalah pilihan yang sangat baik untuk aplikasi chat. Alasannya ada dua.

1. Arsitektur Asinkronus Sebuah server chat menghabiskan 99.9% waktunya untuk menunggu. Ia menunggu pengguna mengetik dan mengirim pesan. Dalam framework sinkronus tradisional, setiap koneksi yang “menunggu” ini akan mengikat satu proses atau thread server, yang sangat boros sumber daya.

Tornado, dengan sifat asinkronusnya, dapat menangani ribuan koneksi yang sedang “menunggu” ini dalam satu thread saja. Ia tidak pernah terblokir; ia hanya akan bereaksi ketika ada “event” yang terjadi, misalnya ada pesan baru yang masuk. Ini membuatnya sangat efisien untuk aplikasi dengan banyak koneksi yang tidak terlalu aktif.

2. Dukungan WebSocket Bawaan yang Hebat WebSocket adalah teknologi yang memungkinkan komunikasi dua arah secara persisten antara klien (browser) dan server melalui satu koneksi TCP. Bayangkan ini seperti saluran telepon yang selalu terbuka, bukan seperti mengirim surat bolak-balik (model HTTP biasa). Tornado memiliki dukungan native untuk WebSocket yang sangat matang dan mudah digunakan, yang menjadi tulang punggung dari aplikasi chat kita.

Arsitektur Aplikasi Chat Sederhana Kita

Kita akan membangun sebuah sistem chat yang sangat dasar namun fungsional. Arsitekturnya akan terdiri dari beberapa komponen:

1. Server Tornado (Backend): Ini akan menjadi pusat dari seluruh operasi.
2. Koneksi WebSocket: Setiap pengguna yang membuka aplikasi chat akan membuat satu koneksi WebSocket yang persisten ke server.
3. Manajemen Klien: Server akan menyimpan daftar semua koneksi klien yang sedang aktif.
4. Mekanisme Siaran (Broadcast): Ketika server menerima pesan dari satu klien, ia akan mengirimkan pesan tersebut ke semua klien lain yang sedang terhubung.
5. Klien (Frontend): Sebuah halaman HTML sederhana dengan JavaScript untuk berkomunikasi dengan server WebSocket.

Langkah 1: Menyiapkan Server Dasar dan Koneksi WebSocket

Langkah pertama adalah membuat server Tornado yang bisa menerima dan mengelola koneksi WebSocket. Kita akan membuat sebuah kelas handler yang mewarisi tornado.websocket.WebSocketHandler.

Buat sebuah file bernama chat_server.py:

Python

import tornado.ioloop
import tornado.web
import tornado.websocket

class ChatHandler(tornado.websocket.WebSocketHandler):
    # Metode ini akan dipanggil saat koneksi baru dibuka
    def open(self):
        print("Koneksi WebSocket baru dibuka.")

    # Metode ini akan dipanggil saat ada pesan baru masuk dari klien
    def on_message(self, message):
        print(f"Pesan diterima: {message}")
        # Untuk saat ini, kita hanya akan mengirim kembali pesan ke pengirimnya
        self.write_message(f"Anda mengirim: {message}")

    # Metode ini akan dipanggil saat koneksi ditutup
    def on_close(self):
        print("Koneksi WebSocket ditutup.")

    # Izinkan koneksi dari origin yang berbeda (untuk development)
    def check_origin(self, origin):
        return True

def make_app():
    return tornado.web.Application([
        (r"/chat", ChatHandler),
    ])

if __name__ == "__main__":
    app = make_app()
    app.listen(8888)
    print("Server chat berjalan di ws://localhost:8888/chat")
    tornado.ioloop.IOLoop.current().start()

Kode di atas menciptakan sebuah server “echo”. Setiap kali seorang klien mengirim pesan, server akan mengirimkannya kembali ke klien yang sama. Ini adalah titik awal yang baik untuk memastikan koneksi WebSocket kita berfungsi.

Langkah 2: Mengelola Klien dan Mekanisme Siaran

Sekarang, mari kita ubah server “echo” kita menjadi server chat yang sesungguhnya. Kita perlu menyimpan semua klien yang terhubung dan menyiarkan pesan ke semuanya.

Ubah kelas ChatHandler di file chat_server.py Anda menjadi seperti ini:

Python

class ChatHandler(tornado.websocket.WebSocketHandler):
    # Gunakan set untuk menyimpan semua koneksi klien yang aktif
    clients = set()

    def open(self):
        ChatHandler.clients.add(self)
        print(f"Koneksi baru! Total klien terhubung: {len(ChatHandler.clients)}")

    def on_message(self, message):
        print(f"Pesan diterima: {message}")
        # Siarkan (broadcast) pesan yang masuk ke semua klien
        for client in ChatHandler.clients:
            # Kirim pesan ke setiap klien yang terhubung
            client.write_message(message)

    def on_close(self):
        ChatHandler.clients.remove(self)
        print(f"Koneksi ditutup. Sisa klien: {len(ChatHandler.clients)}")

    def check_origin(self, origin):
        return True

Perubahan Kunci:

• clients = set(): Kita membuat sebuah set sebagai variabel kelas. set adalah struktur data yang efisien untuk menyimpan item unik. Ini akan menjadi daftar semua klien kita.
• open(): Saat klien baru terhubung, kita menambahkannya ke set clients.
• on_close(): Saat klien terputus, kita menghapusnya dari set.
• on_message(): Inilah inti dari logika chat. Alih-alih hanya mengirim kembali pesan, kita kini melakukan looping melalui set clients dan mengirimkan pesan tersebut ke setiap klien.

Dengan ini, backend kita sudah siap!

Langkah 3: Membuat Klien Sederhana dengan HTML dan JavaScript

Server kita tidak ada gunanya tanpa antarmuka untuk pengguna. Mari kita buat sebuah file HTML sederhana bernama index.html.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Chat Realtime dengan Tornado</title>
    <style>
        body { font-family: sans-serif; }
        #messages { list-style-type: none; margin: 0; padding: 0; border: 1px solid #ccc; height: 300px; overflow-y: scroll; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
        #chatbox { display: flex; }
        #messageBox { flex-grow: 1; }
    </style>
</head>
<body>
    <h1>Chat Room Super Sederhana</h1>
    <ul id="messages"></ul>
    <div id="chatbox">
        <input type="text" id="messageBox" placeholder="Ketik pesan Anda di sini..." autocomplete="off"/>
        <button onclick="sendMessage()">Kirim</button>
    </div>

    <script>
        // Membuat koneksi WebSocket ke server kita
        var ws = new WebSocket("ws://localhost:8888/chat");
        var messageList = document.getElementById('messages');
        var messageBox = document.getElementById('messageBox');

        // Fungsi yang akan dijalankan saat ada pesan masuk dari server
        ws.onmessage = function(event) {
            var messageItem = document.createElement('li');
            messageItem.appendChild(document.createTextNode(event.data));
            messageList.appendChild(messageItem);
            messageList.scrollTop = messageList.scrollHeight; // Auto-scroll ke bawah
        };

        // Fungsi untuk mengirim pesan ke server
        function sendMessage() {
            var message = messageBox.value;
            if (message.trim() !== "") {
                ws.send(message);
                messageBox.value = ""; // Kosongkan kotak input
            }
        }
        
        // Kirim pesan saat menekan tombol Enter
        messageBox.addEventListener("keyup", function(event) {
            if (event.key === "Enter") {
                sendMessage();
            }
        });
    </script>
</body>
</html>

Kode JavaScript Kunci:

• new WebSocket("ws://localhost:8888/chat"): Ini adalah baris yang membuat koneksi ke server Tornado kita. Perhatikan penggunaan ws:// bukan http://.
• ws.onmessage: Ini adalah event listener. Fungsi di dalamnya akan dieksekusi setiap kali browser menerima pesan dari server melalui WebSocket.
• ws.send(): Ini adalah fungsi untuk mengirim pesan dari browser ke server.

baca juga : Pernyataan Sikap Sivitas Akademika Universitas Teknokrat Indonesia Terkait Aksi Massa dan Kondisi Bangsa Indonesia Terkini

Menjalankan dan Menguji Aplikasi Chat Anda

Sekarang, saatnya untuk melihat hasil kerja kita.

1. Jalankan server Python Anda dari terminal: python chat_server.py.
2. Buka file index.html di browser Anda. Cara termudah adalah dengan mengklik kanan file tersebut dan memilih “Open with” -> “Google Chrome” atau browser lainnya.
3. Buka index.html lagi di tab browser kedua atau jendela browser yang berbeda.
4. Anda kini memiliki dua klien chat. Coba ketik pesan di salah satu jendela dan tekan “Kirim”. Anda akan melihat pesan tersebut muncul secara instan di jendela kedua.

Selamat! Anda baru saja membangun sebuah aplikasi chat realtime yang fungsional.

penulis : Muhammad Anwar Fuadi