Phần 4: Tích hợp WebSocket cho cập nhật thời gian thực

1. Giới thiệu về WebSocket và lợi ích của nó

WebSocket là một giao thức mạng cho phép truyền tải dữ liệu hai chiều giữa client và server một cách liên tục và hiệu quả. Khác với HTTP, WebSocket cho phép duy trì một kết nối mở, giúp giảm thiểu độ trễ và tăng cường hiệu suất cho các ứng dụng yêu cầu cập nhật dữ liệu theo thời gian thực.

Lợi ích của WebSocket bao gồm:

Truyền tải dữ liệu nhanh chóng: WebSocket cho phép gửi và nhận dữ liệu mà không cần phải thiết lập lại kết nối như trong giao thức HTTP.
Cập nhật thời gian thực: Các ứng dụng có thể nhận thông tin mới ngay lập tức mà không cần phải làm mới trang hoặc gửi yêu cầu mới.
Tiết kiệm băng thông: WebSocket sử dụng ít băng thông hơn so với các phương pháp truyền thống vì không cần phải gửi header cho mỗi yêu cầu.

2. Cài đặt Flask-SocketIO

Để sử dụng WebSocket trong ứng dụng Flask, chúng ta sẽ sử dụng thư viện Flask-SocketIO. Đầu tiên, bạn cần cài đặt thư viện này bằng pip. Mở terminal và chạy lệnh sau:

pip install flask-socketio

Bên cạnh đó, bạn cũng cần cài đặt eventlet hoặc gevent để hỗ trợ việc xử lý các kết nối đồng thời:

pip install eventlet

3. Cấu hình WebSocket trong ứng dụng Flask

Tiếp theo, chúng ta sẽ cấu hình WebSocket trong ứng dụng Flask. Mở file app.py và thêm các dòng mã sau:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
socketio = SocketIO(app)

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

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=5000)

Trong đoạn mã trên, chúng ta đã khởi tạo một ứng dụng Flask và khởi tạo SocketIO với ứng dụng đó. Đừng quên thay thế your_secret_key bằng một giá trị bí mật của bạn.

4. Thêm chức năng gửi và nhận dữ liệu qua WebSocket

Chúng ta sẽ thêm các sự kiện để gửi và nhận dữ liệu qua WebSocket. Thêm đoạn mã sau vào file app.py:

@socketio.on('my_event')
def handle_my_event(data):
    print('Received data: ' + str(data))
    socketio.emit('my_response', {'data': 'Data received!'})

Đoạn mã trên định nghĩa một sự kiện my_event, khi sự kiện này được kích hoạt, server sẽ in ra dữ liệu nhận được và gửi phản hồi về client.

Tiếp theo, chúng ta cần cập nhật file index.html để sử dụng WebSocket:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.min.js"></script>
<script>
    var socket = io.connect('http://' + document.domain + ':' + location.port);

    socket.on('my_response', function(msg) {
        console.log(msg.data);
    });

    function sendData() {
        socket.emit('my_event', {data: 'Hello from client!'});
    }
</script>

Trong đoạn mã JavaScript này, chúng ta đã tạo một kết nối đến server và định nghĩa một hàm sendData để gửi dữ liệu đến server khi cần thiết.

5. Kiểm tra hoạt động của WebSocket

Để kiểm tra hoạt động của WebSocket, bạn có thể mở trình duyệt và truy cập vào địa chỉ http://:5000. Mở công cụ phát triển (Developer Tools) trong trình duyệt và kiểm tra tab Console.

Chạy hàm sendData từ console bằng cách gọi:

sendData();

Bạn sẽ thấy dữ liệu mà client gửi lên được in ra trong terminal của server và phản hồi từ server cũng sẽ được hiển thị trong console của trình duyệt.

Lưu ý: Đảm bảo rằng Raspberry Pi của bạn đã được kết nối internet và có thể truy cập từ máy tính mà bạn đang sử dụng để kiểm tra.

Thông qua các bước trên, bạn đã tích hợp thành công WebSocket vào ứng dụng Flask trên Raspberry Pi của mình. Điều này sẽ giúp bạn tạo ra một dashboard web có khả năng cập nhật thời gian thực, mang lại trải nghiệm người dùng tốt hơn.