Kirim data dari server ke klien atau sebaliknya dengan SocketIO dan Flask

Artikel ini berisi cara implementasi mengirim data dari server ke klien dengan SocketIO dan Flask. Dalam hal ini “server” adalah bahasa yang digunakan untuk mengakses data server seperti PHP, Python, Java, dan lainnya. Lalu “klien” adalah lingkungan yang biasa dilihat oleh user seperti browser, aplikasi mobile android / ios. Jika berbicara browser pasti tidak lepas dari HTML dan Javascript πŸ™‚

Artikel ini juga membahas socket.io sebagai media untuk membantu menghubungkan proses tersebut. Dalam website socket.io tertulis

“Socket.IO enables real-time bidirectional event-based communication.
It works on every platform, browser or device, focusing equally on reliability and speed.”

Socket.io membantu proses realtime komunikasi berdasarkan event secara bidireksional. Dapat digunakan di setiap platform, browser atau device dengan memfokuskan kecepatan dan reliabiliti.

Saya penasaran apakah Flask Python bisa menghandle proses ini seperti Laravel pun sudah bisa. Dan ternyata sudah ada yaitu Flask-SocketOi, https://flask-socketio.readthedocs.io/en/latest/.

Mari kita coba bermain dengan library python ini.

Langkah #1

Awalnya, buat folder dengan sembarang nama, misalnya saya ini “flask-socketio-test”.

Langkah #2

Masuk ke dalam folder “flask-socketoi-test” lalu kita buat virtualenv dengan perintah.

virtualenv venv -p python3

“venv” sebagai nama folder untuk virtual environtment python.

Langkah #3

Aktifkan virtualenv dengan perintah.

source venv/bin/activate

*perintah ini hanya dijalankan di lingkungan linux. Untuk windows, silahkan cari tahu ya di google.

Langkah #4

Instlal flask-socketio dengan perintah.

pip install flask-socketio

Setelah itu kita buat folder src lalu buat file app.py didalamnya. Lalu buat pula folder templates yang didalamnya berisi file index.html. Kosongkan saja dulu.

Setelah berhasil membuat folder dan file. Mari kita lanjutkan di proses selanjutnya.

Langkah #5

Buka file app.py, lalu code seperti dibawah ini.

from flask import Flask, render_template, request
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'THIS IS SECRETKEY 1231412'
socketio = SocketIO(app)

@app.route('/')
def index():
	return render_template('index.html')

@app.route('/kirim')
def kirim_data():
	socketio.emit('my_response', {'data': 'data 1'}, namespace='/app1')
	return ('', 204)

@socketio.on('data_dari_browser', namespace='/app1')
def menerima_data(json):
    print('menerima data json: ' + str(json))

if __name__ == '__main__':
	socketio.run(app)

Jika dilihat terdapat route “/” yang mengarah ke file index.html. Isi dari file index.html adalah sebagai berikut.

<!DOCTYPE HTML>
<html>

<head>
    <title>Flask-SocketIO Test</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            namespace = '/app1';
            
            // initial socket object
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

            // sending data through socketio
            socket.on('connect', function () {

                // kirim data dari klien
                // dari klien ini bisa dari browser, atau dari mobile apps
                // biasa nya berupa form input
                socket.emit('data_dari_browser', { data: 'saya dari klien' });
            });

            socket.on('my_response', function (msg) {
                $('#log').append('<br>' + $('<div/>').text('Menerima data #' + msg.data).html());
            });
        });
    </script>
</head>

<body>
    <h1>Flask-SocketIO Test</h1>
    <div id="log"></div>
</body>

</html>

Baik, saya jelaskan per proses ya.

Mengirim data dari klien (browser) ke server

Untuk mengirim data dari klien ke server ini seperti proses ajax pada umumnya. Bedanya adalah kita tanpa jquery atau vanilla js. Kita pakai socket.io untuk mengirim data dari browser ke server.

Pengirim dari browser itu terlihat di baris kode ini.

socket.emit('data_dari_browser', { data: 'saya dari klien' });

Pastikan sudah pasang object socket dulu diatas sebelumnya. Lalu perhatikan terdapat namespace yang mengarahkan data ini akan diterima oleh server. Jika namespace ini berbeda dengan server, maka data tidak akan diterima.

Penerimaan data di sisi server bisa dilihat di app.py di fungsi berikut.

@socketio.on('data_dari_browser', namespace='/app1')
def menerima_data(json):
    print('menerima data json: ' + str(json))

Kita coba jalankan dengan perintah

python src/app.py

Lalu server berjalan ke port 5000, *default port flask dalam membuat server. Dan kita coba akses ke port tersebut dengan Firefox maka pada terminal python kita akan terlihat bahwa data telah diterima seperti gambar dibawah ini.

menerima data socket.io flask

Sesuai ya. Dari data tersebut bisa digunakan untuk akses database atau kebutuhan lainnya.

Mengirim data dari server ke klien (browser)

Mengirim data dari klien ke server sepertinya mudah dan sudah biasa dilakukan ya oleh teman-teman. Nah sekarang bagaimana mengirim data dari server ke klien tanpa refresh/reload page? Kodenya udah ada kok di atas. Mari kita coba liat ya.

Kode dari server untuk mengirim ke klien itu kita lihat dulu kode di sisi server yaitu di file app.py. Kode pengirimannya tepat di kode ini.

@app.route('/kirim')
def kirim_data():
	socketio.emit('my_response', {'data': 'data 1'}, namespace='/app1')
	return ('', 204)

Pada kode ini saya buat route dengan “/kirim” lalu tiap ada browser yang memanggil url tersebut maka akan menjalankan kode untuk mengirim data dari server ke klien dengan perintah emit tersebut.

Pastikan flag “my_response” dan namespace itu sama dengan yang di klien (kode index.html). Karena jika tidak sama maka tidak akan diterima lho πŸ™‚

Lalu bagaimana klien / browser menerima data dari server? mari kita lihat index.html dan terlihat kode untuk menerimanya seperti berikut.

socket.on('my_response', function (msg) {
  $('#log').append('<br>'+$('<div/>').text('Menerima data #'+msg.data).html());
});

Terima data dengan variable msg, lalu tempel ke html. Sederhana juga ya πŸ˜€

mengirim data flask-socketio

Dari sini kita sudah dapat mengirim data dari server ke klien dengan bantuan socket.io bersama flask. Kebutuhan untuk proses ini banyak sekali, salah satunya ada konsep chatting yang membutuhkan proses secara bidireksional event.

Apa saja aplikasi yang bisa memanfaatkan proses ini? coba kamu bayangkan mengirim data dari server ke klien tanpa refresh/reload dengan resources minim.

Karena kalau pakai method long polling ajax itu bikin server ngap-ngapan lho. πŸ™‚

Ada beberapa fitur lain seperti membuat group, membuat broadcast dan lainnya, silahkan lihat referensi dibawah artikel ini.

Selamat mencoba πŸ™‚

Referensi:

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: