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

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

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

User avatar
ewqolf
PHP Super Member
PHP Super Member
Posts: 472
Joined: 14/11/2022 9:26 am

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

Post by 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 นั้นเราต้องประกาศหัวไว้ดังนี้

Code: Select all

from flask import Flask,render_template
from flask_socketio import SocketIO
จากนั้นให้เราทำการเขียนโค้ดในส่วนของ

Code: Select all

socketio.emit('reload')
เอาไว้ท้ายสุดของโค้ดของเราในการอัพเดทข้อมูลใน Database โค้ดนี้จะใช้สำหรับการส่งความต้องการไปที่ ฟังก์ชั่นที่ชื่อ reload ที่เรากำลังจะสร้างที่หน้า html ซึ่งจะขอยกตัวอย่างการใช้ไว้ดังนี้

Code: Select all

@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 ไว้ดังนี้

Code: Select all

@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กันครับโดยจะมี

Code: Select all

<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/
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 36626
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by 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
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 36626
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by 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
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 11 guests