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
Öncelikle uygulamayı oluşturalım. Gönderilen mesajlar şifreli olduğu için bir SECRET_KEY belirledik.
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:
Sorunsuz:
Bu kısım klasik Flask route, "/" path'ine geldiğinde index.html'i render etmesini sağlıyoruz.
Şimdi ise client tarafını kodlayacağız. Head tag'inde socketIO ve Jquery'i import edelim:
Sayfa hazır olduğunda localhost'a socketio ile bağlanıyoruz:
Connect event'i ile bağlandığımızı belirtiyoruz. Ben, "User Connected" diye bir mesaj yolluyorum.
Şimdi ise message event'i ile gelen mesajları yakalayacağız ve messages adlı ul tag'ine ekleyeceğiz.
Şimdi de mesaj göndermemiz lazım. Jquery ile yollamabutonu id'li butonumuza click event'i ekliyoruz ve input'umuzu temizliyoruz.
Repo: PrettyPrinted/flask-socketio-chat (UTF-8 zart zurtları için pull request gönderdim)
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
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:
Sorunsuz:
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("<", "<"), 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)