web socket คืออะไร web socket คือระบบ ระบบนึงที่จะมีการรับค่าและการส่งค่าระหว่าง server และ client แบบ realtime หรือก็คือเมื่อมีข้อมูลของฝั่ง server มีการเปลี่ยนแปลงเมื่อไหร่ หน้าเว็บไซต์ของ client ก็จะเปลี่ยนแปลงตามในทันที ซึ่ง Flask framework นั้นก็สามารถทำงานระบบ websocket ได้เหมือนกันเมื่อใช้งานคู่กับภาษา Javascript ซึ่ง websocket ที่เราจะใช้งานนั้นเป็น ของ socket.io
วิธีการ
ซึ่งการทำงานของ web socket นั้นก็ไม่ยากก็คือเมื่อข้อมูลทางฝั่ง server นั้นมีการเปลี่ยนแปลงข้อมูลจะนำไปอัพเดทที่หน้าของเว็บไซต์ฝั่ง client ทุกคนทันทีซึ่งการเขียนโค้ดในการใช้งานร่วมกับ Flask นั้นเราต้องประกาศหัวไว้ดังนี้
โค้ด: เลือกทั้งหมด
from flask import Flask,render_template
from flask_socketio import SocketIO
โค้ด: เลือกทั้งหมด
socketio.emit('reload')
โค้ด: เลือกทั้งหมด
@app.route('/lobbycreate',methods=['POST','GET'])
def create():
name=str(request.form['name']
with conn.cursor() as cursor:
sql="INSERT INTO `table`(`name`)value('"+name+"');"
cursor.execute(sql)
conn.commit()
socketio.emit('update')
return redirect(url_for('index.html'))
โค้ด: เลือกทั้งหมด
@app.route('/loginc',methods=['POST'])
def loginc():
with conn.cursor() as cursor:
sql="select * from table;"
cursor.execute(sql)
table=cursor.fetchall()
return table
โค้ด: เลือกทั้งหมด
<div id="name"></div>
<form action="{{ url_for('create') }}" method="post">
<input type="text" placeholder="name" name="name">
<button type="submit">submit</submit>
</form>
<script>
$.get('/lobbyc', function(data) {
$('#name').append(`<p style="right: 0px;">${v}</p>}
socket = io()
socket.on('update',function(){
console.log("reload page")
location.reload();})
</script>
สรุป
การทำ web socket นั้นก็เป็นอีกหนึ่งวิธีการที่เราสามารถใช้งานด้านการอัพเดทข้อมูลบนหน้าเว็บของเราได้อย่างว่องไวและทุกครั้งที่เราต้องการอัพเดทข้อมูลใน database เราก็จะอัพเดทข้อมูลทันทีในทุกหน้าเว็บไซต์ที่ client ได้ทำการเปิดไว้ซึ่งเราสามารถใช้วิธีการทั้งส่งข้อมูลเข้าและออกได้ด้วย websocket ได้เช่นกันถ้าหากว่าเราไม่อยากอัพเดทข้อมูลในทั้งหน้า
อ้างอิงค์
https://www.mindphp.com/บทเรียนออนไลน์/ ... html5.html
https://flask-socketio.readthedocs.io/en/latest/
https://socket.io/docs/v4/client-installation/