home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Redis

สร้างกระดานผู้นำ Edge แบบเรียลไทม์ด้วย Upstash Redis และ Fly.io

สร้างกระดานผู้นำที่ Edge โดยใช้ Upstash Redis และ Fly.io

ในเว็บแอปพลิเคชันแบบไดนามิกและมีส่วนร่วม ลีดเดอร์บอร์ดเป็นเครื่องมือที่มีประสิทธิภาพในการส่งเสริมการแข่งขันและการมีส่วนร่วมของผู้ใช้ ในบทช่วยสอนนี้ เราจะเริ่มต้นการเดินทางเพื่อสร้างกระดานผู้นำแบบเรียลไทม์โดยใช้ Upstash Redis เป็นที่เก็บข้อมูลแบ็กเอนด์และปรับใช้ที่ Edge ด้วย Fly.io . คู่หูแบบไดนามิกนี้ผสมผสานประสิทธิภาพของบริการ Redis แบบไร้เซิร์ฟเวอร์เข้ากับความสามารถในการจัดจำหน่ายทั่วโลกของ Fly.io เพื่อให้มั่นใจว่าผู้ใช้ทั่วโลกจะสามารถเข้าถึงข้อมูลที่มีความหน่วงต่ำ

เกี่ยวกับ Upstash Redis

Upstash เป็นบริการคลาวด์ ที่ให้บริการ Redis ที่มีการจัดการเต็มรูปแบบโดยเน้นไปที่ความเรียบง่าย ความสามารถในการปรับขนาด และความสะดวกในการใช้งาน Redis ซึ่งเป็นที่รู้จักในด้านความสามารถรอบด้านและความสามารถในการจัดเก็บข้อมูลในหน่วยความจำประสิทธิภาพสูง จะยิ่งน่าสนใจยิ่งขึ้นเมื่อจับคู่กับ Upstash ด้วย Upstash นักพัฒนาสามารถติดตั้งใช้งานและปรับขนาด Redis ได้อย่างราบรื่นสำหรับกรณีการใช้งานต่างๆ โดยไม่มีความซับซ้อนในการดำเนินงานที่เกี่ยวข้องกับการจัดการโครงสร้างพื้นฐาน

คุณสมบัติที่สำคัญของ Upstash Redis ได้แก่:

  • ความง่ายในการใช้งาน: Upstash ช่วยให้กระบวนการปรับใช้ง่ายขึ้นอย่างมาก ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับนักพัฒนาที่ต้องการลดความซับซ้อนในการดำเนินงานที่เกี่ยวข้องกับโครงสร้างพื้นฐาน

  • ประสิทธิภาพสูง: Redis ขึ้นชื่อในเรื่องการดึงข้อมูลที่รวดเร็วปานสายฟ้า ทำให้เหมาะสำหรับการจัดการคิวงาน การส่งข้อความ และลีดเดอร์บอร์ดแบบเรียลไทม์ตามที่เราจะสำรวจในบทช่วยสอนนี้ ด้วย Upstash คุณสามารถไว้วางใจโครงสร้างพื้นฐานระบบคลาวด์เพื่อการปรับขนาดที่ราบรื่น ทำให้มั่นใจได้ว่าแอปพลิเคชันของคุณจะสามารถจัดการปริมาณงานที่แตกต่างกันได้อย่างมีประสิทธิภาพ

  • ความสามารถในการขยายขนาด: Redis สามารถปรับขนาดได้สูงและด้วย Upstash ทำให้สามารถปรับขนาดได้โดยอัตโนมัติตามความต้องการ สิ่งนี้ทำให้มั่นใจได้ว่าแอปพลิเคชันของคุณพร้อมเสมอเพื่อรองรับโหลดในระดับต่างๆ ทำให้เป็นตัวเลือกที่เหมาะสำหรับแอปพลิเคชันแบบไดนามิกและปรับขนาดได้

  • บูรณาการที่เก็บข้อมูล: Redis ทำหน้าที่เป็นทั้งนายหน้าข้อความและที่เก็บผลลัพธ์ ปรับปรุงสถาปัตยกรรมให้มีประสิทธิภาพโดยการลดจำนวนองค์ประกอบที่คุณต้องจัดการ

ด้วยการรวม Upstash Redis เข้ากับแอปพลิเคชันกระดานผู้นำแบบเรียลไทม์ของเรา เราได้ควบคุมพลังของบริการ Redis ที่มีการจัดการอย่างเต็มรูปแบบ ซึ่งเสริมความสามารถในการจัดจำหน่ายทั่วโลกของ Fly.io ส่งผลให้เกิดสถาปัตยกรรมแอปพลิเคชันเว็บที่แข็งแกร่งและตอบสนองได้ดี มาเจาะลึกถึงการใช้งานและแสดงให้เห็นว่า Upstash Redis กับ Fly.io สามารถยกระดับโครงการของคุณไปสู่อีกระดับได้อย่างไร

ข้อกำหนดเบื้องต้น

ก่อนที่เราจะเริ่มการเดินทาง ตรวจสอบให้แน่ใจว่าคุณมีข้อกำหนดเบื้องต้นดังต่อไปนี้:

  • Fly.io บัญชี

  • ความรู้พื้นฐานเกี่ยวกับ Flask และ Python

ตั้งค่าบัญชี Fly.io และฐานข้อมูล Redis

เริ่มต้นด้วยการสร้างบัญชีใน Fly.io จากนั้นติดตั้ง Fly CLI:

 # Linux
 curl -L https://fly.io/install.sh | sh
 
 # Other type of installation: https://fly.io/docs/hands-on/install-flyctl/

หลังจากติดตั้ง จากเทอร์มินัลของคุณ ให้เข้าสู่ระบบด้วย Fly:

fly auth login

นี่จะเป็นการเปิดเบราว์เซอร์ที่ขอให้คุณอนุญาตการเข้าสู่ระบบด้วยบัญชีที่คุณเพิ่งสร้างขึ้น เยี่ยมเลย ตอนนี้คุณสามารถโต้ตอบกับ Fly จากเทอร์มินัลของคุณได้

ตอนนี้เราได้ตั้งค่า Fly แล้ว มาสร้าง Redis กันดีกว่า ฐานข้อมูลที่เราจะใช้เพื่อสร้างกระดานผู้นำของเรา:

ตอนนี้เรามีฐานข้อมูล Upstash Redis ที่เราสร้างผ่าน Fly.io ด้วยคำสั่งเดียว ตอนนี้คุณสามารถดู REDIS_URL ได้จากเอาต์พุตหรือด้วยคำสั่งในเทอร์มินัล:

 flyctl redis status upstash-fly-leaderboard
 # Or open the upstash dashboard
 fly redis dashboard <your_org_name | personal>

หยิบ private_url และเก็บไว้ใน Flask_APP ตามที่เราต้องการ

พัฒนาแอปพลิเคชัน Flask

ในการสร้างลีดเดอร์บอร์ดของเรา เราจะใช้ Flask Flask เป็นเฟรมเวิร์ก Python ขั้นต่ำสำหรับการสร้างเว็บแอปพลิเคชัน เริ่มต้นด้วยการติดตั้งการขึ้นต่อกัน

 # flask - for as a web application framework
 # redis - A wrapper to connect and interact with Redis
 # gunicorn - wsgi server for running Python web applications
 
 $ pip install flask redis gunicorn
 
 # export the dependencies to requirements.txt
 $ pip freeze > requirements.txt

ตอนนี้เรามาวางรากฐานสำหรับแอป Flask ของเรากันดีกว่า เริ่มต้นด้วยการสร้างโมดูล app.py และมาเขียนโค้ดขั้นต่ำเพื่อเริ่มต้นแอปพลิเคชัน Flask และเชื่อมต่อกับ Upstash Redis 

import os
 
from flask import Flask, render_template, request, redirect, url_for
import redis
 
app = Flask(__name__)
 
# Read the connection string from the environment variable
UPSTASH_FLY_REDIS_CONNECTION_STRING = os.getenv('REDIS_URL')
LEADERBOARD_KEY = 'leaderboard'
 
# Initiate a connection to Upstash Redis Instance using the connection string
redis_client = redis.from_url(UPSTASH_FLY_REDIS_CONNECTION_STRING)

งั้นเรา:

  • เริ่มต้นแอป Flask

  • อ่าน REDIS_URL จากตัวแปรสภาพแวดล้อม

  • เริ่มต้น redis_client เพื่อโต้ตอบกับฐานข้อมูล Upstash Redis ที่เราสร้างใน Fly.io

ตอนนี้เรามากำหนดฟังก์ชันเพื่อเพิ่มผู้เล่นลงในกระดานผู้นำและดึงข้อมูลผู้เล่นด้วยคะแนนตามลำดับจากกระดานผู้นำ:

def add_score(player_id, score):
 # Add or update the score for the player in the leaderboard
 redis_client.zadd(LEADERBOARD_KEY, {player_id: score})
 
 
def get_leaderboard():
 leaderboard = redis_client.zrevrange(LEADERBOARD_KEY, 0, 9, withscores=True)
 
 formatted_leaderboard = [{'player_id': player_id.decode('utf-8'), 'score': int(score)} for player_id, score in
 leaderboard]
 
 return formatted_leaderboard

ฟังก์ชัน add_score ได้รับ player_id และคะแนน และเพิ่มลงในลีดเดอร์บอร์ด แซด เป็นคำสั่งใน Redis ที่ใช้เพื่อเพิ่มสมาชิกหนึ่งตัวขึ้นไปพร้อมคะแนนให้กับชุดที่เรียงลำดับ

ฟังก์ชันที่สอง get_leaderboard() ดึงข้อมูล 10 อันดับแรกที่มีคะแนนจากชุดที่จัดเรียง Redis (ลีดเดอร์บอร์ด) และส่งคืนในรายการที่จัดรูปแบบซึ่งมี ID ผู้เล่นและคะแนนที่เกี่ยวข้อง

เอาล่ะ ตอนนี้เรามาเพิ่มจุดสิ้นสุดสามจุดเพื่อโต้ตอบกับฐานข้อมูล Upstash Redis ของเรา

  • [GET] / — ดึงกระดานผู้นำ

  • POST /submit_score — ส่งคะแนนในลีดเดอร์บอร์ด

  • GET /clear_table — ล้างกระดานผู้นำ

@app.route('/')
def leaderboard():
 # Retrieve the top 10 players from the leaderboard and redirect to the leaderboard page with the data
 leaderboard = get_leaderboard()
 return render_template('leaderboard.html', leaderboard=leaderboard)
 
 
@app.route('/submit_score', methods=['POST'])
def submit_score():
 player_id = request.form['player_id']
 score = int(request.form['score'])
 
 # Call the function to add or update the score for the player in the leaderboard
 add_score(player_id, score)
 
 return redirect(url_for('leaderboard'))
 
 
@app.route('/clear_table', methods=['GET'])
def clear_table():
 # Delete all the data from the leaderboard
 redis_client.delete(LEADERBOARD_KEY)
 
 return redirect(url_for('leaderboard'))

ดังที่เราเห็น เรายังแสดงผล front-end page leaderboard.html เพื่อให้มีการโต้ตอบมากขึ้นและแบบเรียลไทม์ ที่รากของโปรเจ็กต์ ให้สร้างเทมเพลตโฟลเดอร์ และภายในให้สร้างไฟล์ leaderboard.html ด้วยโค้ดต่อไปนี้

สมบูรณ์แบบ ตอนนี้เพื่อทดสอบสิ่งนี้ในเครื่องในเทอร์มินัลของคุณ ให้โหลดตัวแปรสภาพแวดล้อม:

 # Linux
 export REDIS_URL='YOUR_UPSTASH_FLY_REDIS_CONNECTION_STRING'
 
 # Windows
 set REDIS_URL='YOUR_UPSTASH_FLY_REDIS_CONNECTION_STRING'
 
 # After that run:
 $ flask run

ใบสมัครของคุณควรพร้อมด้วยกระดานผู้นำและช่องทางในการเพิ่มบันทึกลงในกระดานผู้นำ

สร้างกระดานผู้นำ Edge แบบเรียลไทม์ด้วย Upstash Redis และ Fly.io

เมื่อคุณเพิ่มผลลัพธ์ คุณจะเห็นได้อย่างง่ายดายว่าผลลัพธ์จะได้รับการอัปเดตและจัดเรียงแบบเรียลไทม์ ซึ่งตรงกับสิ่งที่เราต้องการทำ! 🎉

ปรับใช้กับ Fly.io

ตอนนี้มายกระดับแอป Flask ของเราไปอีกขั้นด้วยการปรับใช้กับ Fly.io จากรากของโค้ดเบสของคุณ ให้ดำเนินการ:

flyctl launch
 
Scanning source code
Detected a Python app
Using the following build configuration:
 Builder: paketobuildpacks/builder:base
Creating app in /home/valon/code/upstash-fly-leaderboard
We're about to launch your Python app on Fly.io. Here's what you're getting:
 
Organization: <MyOrg> (fly launch defaults to the personal org)
Name: upstash-leaderboard (derived from your directory name)
Region: Amsterdam, Netherlands (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres: <none> (not requested)
Redis: <none> (not requested)
 
? Do you want to tweak these settings before proceeding? (y/N) : N

วิธีนี้จะตรวจจับโค้ดเบสของคุณและใช้การกำหนดค่าเริ่มต้นบางอย่างตามชื่อแอปพลิเคชัน รหัส ฯลฯ ของคุณ ฉันจะใช้การตั้งค่าเริ่มต้น ดังนั้นฉันจะดำเนินการต่อด้วย N .

ตอนนี้จะสร้าง fly.toml และ Procfile :

app = "upstash-fly-leaderboard"
primary_region = "otp" #
 
[build]
 builder = "paketobuildpacks/builder:base"
 
[env]
 PORT = "8080"
 
[http_service]
 internal_port = 8080 # Port where the app runs
 force_https = true
 auto_stop_machines = true
 auto_start_machines = true
 min_machines_running = 0
 processes = ["app"]
 
[[vm]]
 cpu_kind = "shared"
 cpus = 1
 memory_mb = 1024

ฉันปล่อยให้ทุกอย่างเป็นค่าเริ่มต้น ยกเว้นภูมิภาคที่ฉันเปลี่ยนเป็น otp ตอนนี้มาอัปเดต Procfile กันดีกว่า โดยที่คำสั่งการดำเนินการถูกกำหนดไว้ และให้รันด้วย gunicorn ใน 8080 พอร์ต

web: gunicorn -b 0.0.0.0:8080 app:app

แอป อยู่ที่ไหน คือชื่อโมดูลและแอปอื่นๆ เป็นตัวแปรที่กำหนดไว้ในโมดูลที่เรากำหนดแอป Flask ส่วนใหญ่เราทำเสร็จแล้ว แต่จำไว้ว่าในโค้ดที่เราเพิ่ม REDIS_URL เป็นตัวแปรสภาพแวดล้อม และเราตั้งค่าในเครื่องเป็น Upstash Redis ที่เราสร้างขึ้นโดยใช้ Fly CLI มาตั้งค่านี้เป็นความลับใน fly.io กันดีกว่า

 fly secrets set --app upstash-fly-leaderboard REDIS_URL=<>

เราทุกคนพร้อมแล้ว มาปรับใช้แอปกับ fly.io กันเถอะ ตอนนี้:

 fly deploy --ha=false

ผลลัพธ์ควรให้ URL เพื่อเยี่ยมชมแอปพลิเคชันที่เพิ่งปรับใช้ของเรา

Watch your deployment at https://fly.io/apps/<app_name>/monitoring
 
-------
Updating existing machines in '<app_name>' with rolling strategy
 
-------
 ✔ Machine <machine_id> [app] update succeeded
-------
 
Visit your newly deployed app at https://<app_name>.fly.dev/

บทสรุป

ในบทช่วยสอนนี้ เราได้เห็นการบูรณาการอย่างราบรื่นของ Upstash Redis และ Fly.io เพื่อสร้างกระดานผู้นำแบบเรียลไทม์ ด้วยการรวมประสิทธิภาพของบริการ Redis แบบไร้เซิร์ฟเวอร์เข้ากับความสามารถในการจัดจำหน่ายทั่วโลกของ Fly.io เราจึงมั่นใจได้ว่าผู้ใช้ทั่วโลกจะได้รับการเข้าถึงที่มีเวลาแฝงต่ำ

อย่าลังเลที่จะปรับปรุงแอปพลิเคชันลีดเดอร์บอร์ดของคุณเพิ่มเติมโดยเพิ่มการตรวจสอบสิทธิ์ผู้ใช้ สถิติเพิ่มเติม หรือคุณสมบัติอื่นใดที่เหมาะกับความต้องการของแอปพลิเคชันของคุณ อนาคตของเว็บแอปพลิเคชันที่น่าดึงดูดและตอบสนองอยู่ที่นี่ ซึ่งขับเคลื่อนโดยพลังของ Upstash Redis และการเข้าถึงทั่วโลกของ Fly.io

คุณสามารถดูซอร์สโค้ดแบบเต็มของบทความได้ที่พื้นที่เก็บข้อมูล GitHub พร้อมคำแนะนำ

https://github.com/vjanz/upstash-fly-redis-leaderboard

หากคุณมีคำถามใดๆ โปรดติดต่อฉันได้ตลอดเวลา นอกจากนี้ คุณสามารถเชื่อมต่อกับฉันได้ที่ LinkedIn, GitHub

ข้อมูลอ้างอิง

เหนือกว่า
https://redis.io
https://fly.io/