การทำ web socket บน Flask Framework ในภาษา Python

แชร์ความรู้ภาษา Python ไพทอน การเขียนโปรแกรมภาษาไพทอน

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

การทำ web socket บน Flask Framework ในภาษา Python

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

การทำ web socket บน Flask Framework ในภาษา Python
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')
เอาไว้ท้ายสุดของโค้ดของเราในการอัพเดทข้อมูลใน Database โค้ดนี้จะใช้สำหรับการส่งความต้องการไปที่ ฟังก์ชั่นที่ชื่อ reload ที่เรากำลังจะสร้างที่หน้า html ซึ่งจะขอยกตัวอย่างการใช้ไว้ดังนี้

โค้ด: เลือกทั้งหมด

@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'))
ซึ่งโค้ดส่วนนี้จะมีการรับค่ามาจาก textbox ที่หน้า html มาเก็บไว้ในตัวแปร name และ เก็บใส่ใน Database นอกจากนี้เราจะต้องเขียนโค้ดสำหรับการ select ข้อมูลจาก database ไว้ดังนี้

โค้ด: เลือกทั้งหมด

@app.route('/loginc',methods=['POST'])
def loginc():
        with conn.cursor() as cursor:
            sql="select * from table;"
            cursor.execute(sql)
            table=cursor.fetchall()
            return table
ต่อจากนั้นเรามาดูที่ index.htmlกันครับโดยจะมี

โค้ด: เลือกทั้งหมด

<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>
โดยเราจะขึ้นหน้า form เปล่าสำหรับเก็บข้อมูลจากการส่งข้อมูลแบบ json มาใส่จากนั้นจะมี textbox และปุ่ม submit เมื่อกดจะส่งค่าใน textbox ไปส่งใน create และบันทึกใส่ database จากนั้นเมื่อบันทึกเสร็จจะเข้ามาสู่ emit มาที่ socket.on('update') และทำการ location.reload() จะทำรีเฟรชหน้าก็จะเป็นการไปดึงข้อมูลจาก database มาใหม่ ซึ่งทุกครั้งที่เราใส่ข้อมูลลงใน textbox และกดปุ่มมันจะทำแบบที่อธิบายไปข้างต้นใหม่อีกรอบ ในทุกๆ client ที่เปิดอยู่
สรุป
การทำ 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/
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การทำ web socket บน Flask Framework ในภาษา Python

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

อยากเห็นภาพประกอบ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การทำ web socket บน Flask Framework ในภาษา Python

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

มีภาพประกอบให้ดูไหมครับ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: athirach.offcial, facebook.com [Crawler] และบุคลทั่วไป 89