Python Flask SocketIO ile (log tutmayan :D) Chat Uygulaması Yapmak

0x1D

Kıdemli Üye
23 Nis 2020
2,652
78
MARS
Merhaba,
Kısaca Flask SocketIO ile chat uygulaması yapacağız. Başlıktaki log tutmayan esprisini database kullanmadığım için yaptım, sayfaya f5 atarsanız tüm mesajlar silinir. Tabii kendiniz bir js kodu yazıp mesjaları loglamaz iseniz :p

Öncelikle aşağıdaki modülleri yüklemeniz gerekiyor. Aşağıda belirttiğim versiyonları yüklemezseniz bağlanırken; "The client is using an unsupported version of the Socket.IO or Engine.IO protocols Error" gibi bir hata alabilirsiniz


Kod:
Flask
Flask-SocketIO==4.3.1
python-engineio==3.13.2
python-socketio==4.6.0

Öncelikle uygulamayı oluşturalım. Gönderilen mesajlar şifreli olduğu için bir SECRET_KEY belirledik.
Python:
from flask import Flask, request, render_template
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config['SECRET_KEY'] = "secretkey" 
socketio = SocketIO(app, cors_allowed_origins='*')

Gelen mesajları dinlemek için bir listener oluşturduk, böylece gelen mesajları yakalayıp diğer client'lere göndereceğiz. Ben mesjı client'lere iletirken gönderenin ip adresiyle beraber iletiyorum (request.remote_addr) eğer uygulamamızda bir kayıt sistemi olsaydı nickname ile gönderebilirdik. mesaj.replace kısmını da ufaktan xss'i engellemek için koydum. encode('latin-1').decode('utf-8') diyerek utf-8 karakterleri alırken yaşadığımız sorunları çözdüm.

Sorunlu:

image.png


Sorunsuz:
image.png



Python:
@socketio.on('message')
def mesaj_al(mesaj):
    msj = mesaj.encode('latin-1').decode('utf-8')
    print("Mesaj:", msj)
    send(request.remote_addr + ": " + msj.replace("<", "&lt;"), broadcast=True)


Bu kısım klasik Flask route, "/" path'ine geldiğinde index.html'i render etmesini sağlıyoruz.
Python:
@app.route("/")
def ana():
    return render_template("index.html")


if __name__ == "__main__":
    socketio.run(app, debug=True)


Şimdi ise client tarafını kodlayacağız. Head tag'inde socketIO ve Jquery'i import edelim:


JavaScript:
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


Sayfa hazır olduğunda localhost'a socketio ile bağlanıyoruz:
JavaScript:
$(document).ready(function(){
          
var socket = io.connect("http://127.0.0.1:5000");
        });

Connect event'i ile bağlandığımızı belirtiyoruz. Ben, "User Connected" diye bir mesaj yolluyorum.
JavaScript:
socket.on('connect', function(){
                socket.send('User connected');
            });

Şimdi ise message event'i ile gelen mesajları yakalayacağız ve messages adlı ul tag'ine ekleyeceğiz.
JavaScript:
socket.on('message', function(mesaj){
                $('#messages').append("<li>" + mesaj+" </li>");
                console.log("Mesaj alındı!");
            });


Şimdi de mesaj göndermemiz lazım. Jquery ile yollamabutonu id'li butonumuza click event'i ekliyoruz ve input'umuzu temizliyoruz.
JavaScript:
$('#yollamabutonu').on('click', function(){
                socket.send($('#messageBox').val());
                console.log($('#messageBox').val())
                $('#messageBox').val('');
            })


Repo: PrettyPrinted/flask-socketio-chat (UTF-8 zart zurtları için pull request gönderdim)
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.