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



Ö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



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.

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.


@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.

@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:



 <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:

$(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.

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.

socket.on('message', function(mesaj){

$('#messages').append("<li>" + mesaj+" </li>");

console.log("Mesaj alındı!");

});
Mesaj göndermek için Jquery ile yollamabutonu id'li butonumuza click event'i ekliyoruz. Mesajı gönderdikten sonra input'umuzu temizliyoruz.

$('#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)