การใช้ Room ใน Socket.IO

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

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

ภาพประจำตัวสมาชิก
opj
PHP Hero Member
PHP Hero Member
โพสต์: 195
ลงทะเบียนเมื่อ: 16/12/2024 9:05 am

การใช้ Room ใน Socket.IO

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

การใช้ Room ใน Socket.IO เป็นฟีเจอร์ที่ช่วยให้เราสามารถจัดกลุ่มไคลเอนต์ที่เชื่อมต่อกันใน ห้อง (room) และสามารถส่งข้อมูลไปยังไคลเอนต์ในห้องนั้นๆ ได้โดยเฉพาะ ไม่ต้องส่งข้อมูลไปยังทุกไคลเอนต์ที่เชื่อมต่อทั้งหมด ซึ่งเหมาะสำหรับกรณีที่ต้องการแยกไคลเอนต์ออกเป็นกลุ่มต่างๆ เช่น การแชทในห้องต่างๆ, การเล่นเกมในทีม, การส่งข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์ หรือการส่งข้อมูลเฉพาะในบางกลุ่มผู้ใช้ นอกจาก Socket.IO ยังมี Ajax ซึ่งใช้สำหรับการร้องขอข้อมูลแบบ request-response เมื่อไคลเอนต์ต้องการดึงข้อมูลจากเซิร์ฟเวอร์เป็นระยะๆ แต่ไม่รองรับการส่งข้อมูลแบบ real-time โดยตรง เราจึงจะพามารู้จักกับการส่งข้อมูลแบบเรีบลไทม์กัน ในบทความนี้เราจะมาทำระบบแชทง่ายๆบน Flask Framework กัน

Room ใน Socket.IO
  • Room คือคอนเซปต์ของการจัดกลุ่มไคลเอนต์ที่เชื่อมต่ออยู่ในเซิร์ฟเวอร์ ซึ่งสามารถส่งข้อมูลไปยังไคลเอนต์ในห้องนั้นได้โดยเฉพาะ
  • แต่ละไคลเอนต์สามารถเข้าร่วมหลายห้องได้ และแต่ละห้องจะมีชื่อเฉพาะที่ใช้ระบุกลุ่มนั้น
การใช้งาน Room ใน Socket.IO
การใช้งาน Room ใน Socket.IO สามารถทำได้ง่ายๆ โดยใช้ฟังก์ชัน join() เพื่อให้ไคลเอนต์เข้าร่วมห้อง และฟังก์ชัน to() หรือ in() เพื่อส่งข้อมูลไปยังห้องนั้นๆ

ตัวอย่างโค้ดการใช้ Room
Server: Python + Flask-SocketIO

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

from flask import Flask, render_template
from flask_socketio import SocketIO, emit, join_room

app = Flask(__name__)
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('chat.html')

@socketio.on('connect')
def handle_connect():
    print("Client connected")

@socketio.on('join')
def on_join(data):
    room = data['room']
    join_room(room)  
    emit('response', {'message': f'Joined room {room}'}, room=room)  

@socketio.on('send_message')
def handle_message(data):
    room = data['room']
    message = data['message']
    emit('response', {'message': message}, room=room)  

@socketio.on('disconnect')
def handle_disconnect():
    print("Client disconnected")

if __name__ == '__main__':
    socketio.run(app, debug=True)
  • เมื่อไคลเอนต์เชื่อมต่อเข้ามา, เซิร์ฟเวอร์จะรับคำขอให้เข้าร่วมห้อง (โดยใช้ฟังก์ชัน join_room(room))
  • หลังจากนั้น, ไคลเอนต์จะได้รับข้อความตอบกลับจากเซิร์ฟเวอร์ว่าเข้าร่วมห้องแล้ว
  • เมื่อได้รับข้อความจากไคลเอนต์ (ที่ระบุห้องและข้อความ), เซิร์ฟเวอร์จะส่งข้อความนั้นไปยังห้องที่ระบุ (โดยใช้ฟังก์ชัน emit() และพารามิเตอร์ room=room)
Client: HTML + JavaScript

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

<!DOCTYPE html>
<html>
<head>
    <title>Room Example</title>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
    <h1>Room Example</h1>
    <button id="joinRoom">Join Room A</button>
    <button id="sendMessage">Send Message to Room A</button>
    <div id="response"></div>

    <script>
        const socket = io.connect();

        socket.on('connect', function() {
            console.log('Connected to the server');
        });

        socket.on('response', function(data) {
            document.getElementById('response').innerText = data.message;
        });

        document.getElementById('joinRoom').onclick = function() {
            socket.emit('join', { room: 'Room A' });  
        };

        document.getElementById('sendMessage').onclick = function() {
            const message = 'Hello Room A!';
            socket.emit('send_message', { room: 'Room A', message: message }); 
        };
    </script>
</body>
</html>
  • เมื่อกดปุ่ม "Join Room A" ไคลเอนต์จะส่งคำขอให้เข้าร่วมห้อง "Room A"
  • เมื่อกดปุ่ม "Send Message to Room A", ข้อความจะถูกส่งไปยังห้อง "Room A" และทุกไคลเอนต์ที่เข้าร่วมห้องนั้นจะได้รับข้อความ
    ตัวอย่างหน้าจอ หลังจากกกดปุ่ม Send Message to Room A
    join room.png
    join room.png (23.94 KiB) Viewed 111 times
การทำงานของ Room
  1. การเข้าร่วมห้อง (Join Room)
    • เมื่อไคลเอนต์ต้องการเข้าร่วมห้องเฉพาะ, เซิร์ฟเวอร์จะใช้คำสั่ง join_room(room) เพื่อให้ไคลเอนต์เข้าร่วมห้องที่ต้องการ
    • ไคลเอนต์สามารถเข้าร่วมหลายๆ ห้องได้
  2. การส่งข้อความไปยังห้อง (Emit to Room)
    • เมื่อไคลเอนต์ส่งข้อความไปยังเซิร์ฟเวอร์พร้อมกับข้อมูลห้อง, เซิร์ฟเวอร์จะใช้คำสั่ง emit() โดยกำหนด room=room เพื่อส่งข้อความไปยังห้องที่ไคลเอนต์เข้าร่วมอยู่
  3. การออกจากห้อง (Leave Room)
    • การออกจากห้องทำได้โดยใช้ leave_room(room) ซึ่งจะยกเลิกการเชื่อมต่อกับห้องที่ระบุ
ประโยชน์ของการใช้ Room
  1. แยกกลุ่มไคลเอนต์
    • ช่วยให้สามารถแยกกลุ่มไคลเอนต์ที่เชื่อมต่อออกเป็นกลุ่มๆ เพื่อการสื่อสารที่มีประสิทธิภาพมากขึ้น เช่น แชทในห้องต่างๆ หรือการจัดกลุ่มผู้เล่นในเกม
  2. การส่งข้อมูลเฉพาะกลุ่ม
    • สามารถส่งข้อมูลไปยังกลุ่มไคลเอนต์ที่เกี่ยวข้องได้ โดยไม่ต้องส่งไปยังทุกไคลเอนต์ในเซิร์ฟเวอร์
  3. ง่ายต่อการจัดการ
    • การใช้ห้องช่วยให้การจัดการไคลเอนต์ที่เชื่อมต่ออยู่มีความสะดวกสบายมากขึ้น เช่น การส่งข้อความไปยังกลุ่มผู้ใช้ที่เกี่ยวข้อง
การใช้ Room ใน Socket.IO เป็นฟีเจอร์ที่มีประโยชน์มากสำหรับการจัดการการสื่อสารแบบ real-time ที่มีการแยกกลุ่มไคลเอนต์ออกเป็นหลายๆ ห้อง ช่วยให้เราสามารถส่งข้อมูลไปยังกลุ่มที่เกี่ยวข้องได้โดยตรง เพิ่มประสิทธิภาพในการส่งข้อมูลและทำให้การจัดการไคลเอนต์ที่เชื่อมต่อในระบบง่ายขึ้น นอกจากนั้น การใช้ Room ใน Socket.IO ช่วยให้สามารถจัดกลุ่มไคลเอนต์ที่เชื่อมต่ออยู่ในเซิร์ฟเวอร์ให้สามารถส่งข้อความไปยังไคลเอนต์ในห้องนั้นๆ เท่านั้น ซึ่งทำให้การจัดการข้อมูลในแอปพลิเคชันที่มีหลายกลุ่มผู้ใช้เป็นไปได้อย่างมีประสิทธิภาพมากขึ้น เช่น การแชทแบบกลุ่ม, การส่งอัปเดตข้อมูลในห้องเฉพาะ, การจัดกลุ่มผู้เล่นในเกมออนไลน์, หรือการประชุมออนไลน์ที่มีหลายห้อง

อ้างอิง
viewtopic.php?f=144&t=91128
https://medium.com/@themaxaboy/@themaxaboy/สร้างระบบ-live-chat-ผ่าน-socket-io-พร้อมเก็บข้อความย้อนหลัง-ด้วย-strapi-headless-cms-efbc83daab15
https://kittisak-tos.medium.com/node-js-express-js-with-socket-io-b5cd5d904f8e
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 2