首頁 > 文章 > 後端開發 > Flask框架下的WebSocket應用實作指南

Flask框架下的WebSocket應用實作指南

WBOY原創: 2023-09-29 10:06:261368瀏覽

Flask框架下的WebSocket應用實踐指南

摘要：WebSocket是一種用於即時雙向通訊的協議，它可以在瀏覽器和伺服器之間建立持久性的連接。使用Flask框架開發網路應用程式時，結合WebSocket可以實現即時資料更新、即時通訊等功能。本文將介紹如何在Flask框架下使用WebSocket，並提供程式碼範例。

引言：
隨著網路的發展，即時性需求越來越高，傳統的HTTP請求-回應模式已經難以滿足這種需求。在過去，為了實現即時通信，常常採用長輪詢或短輪詢的方式。但這種方式效率低下，浪費頻寬。 WebSocket協定的出現解決了這個問題，它允許在瀏覽器和伺服器之間建立持久性的全雙工連接，實現即時通訊。

一、WebSocket原理簡介：
WebSocket協定是基於TCP的一種協議，它可以在瀏覽器與伺服器之間建立雙向的通訊通道。傳統的HTTP協定是「請求-回應」模式，即客戶端發送請求給伺服器，伺服器接收到請求後進行處理並回傳回應給客戶端。而WebSocket協定可以直接在客戶端和伺服器之間建立一個持久的雙向連線。客戶端和伺服器可以透過這個連線進行即時的資料傳輸，而不需要等待與HTTP請求相同的效能開銷。

二、Flask整合WebSocket：
在Flask框架下，可以透過Flask-SocketIO插件來實現WebSocket的支援。 Flask-SocketIO是Flask框架的一個擴展，它提供了WebSocket的功能。下面是整合WebSocket的步驟。

安裝Flask-SocketIO
透過pip指令安裝Flask-SockeIO：
```
pip install flask-socketio
```

匯入Flask-SocketIO並建立應用程式物件

from flask import Flask
from flask_socketio import SocketIO

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

定義接收WebSocket訊息的方法

@socketio.on('message')
def handle_message(message):
 print('received message: ' + message)

定義發送WebSocket訊息的方法

def send_message(message):
 socketio.emit('message', message)

#啟動應用

if __name__ == '__main__':
 socketio.run(app)

三、WebSocket應用範例：
下面給出一個簡單的聊天室範例，示範如何使用WebSocket實現即時聊天功能。

from flask import Flask, render_template
from flask_socketio import SocketIO

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

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

@socketio.on('message')
def handle_message(message):
    socketio.emit('message', message)

if __name__ == '__main__':
    socketio.run(app)

在index.html中，可以透過JavaScript程式碼與伺服器進行交互，實現即時聊天的功能。

<!DOCTYPE html>
<html>
    <head>
        <title>Flask Websocket Chat</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        <script>
            var socket = io.connect('http://' + document.domain + ':' + location.port);

            socket.on('connect', function() {
                socket.send('User has connected!');
            });

            socket.on('message', function(data) {
                var new_message = document.createElement('div');
                new_message.innerHTML = data;
                document.querySelector('#messages').appendChild(new_message);
            });

            function sendMessage() {
                var message = document.querySelector('#message_input').value;
                socket.send(message);
            }
        </script>
    </head>
    <body>
        <h1>Flask Websocket Chat</h1>
        <div id="messages"></div>
        <input type="text" id="message_input">
        <button onclick="sendMessage()">Send</button>
    </body>
</html>

透過執行以上程式碼，即可實現一個簡單的WebSocket聊天室。

結論：
本文介紹如何在Flask框架下整合WebSocket，並提供了一個簡單的聊天室範例。透過Flask-SocketIO插件，可以方便地使用WebSocket來實現即時通訊的功能。在開發Web應用時，結合WebSocket可以提升使用者體驗，實現即時資料更新、即時通訊等功能。希望本文對大家在Flask框架下使用WebSocket有所幫助。

以上是Flask框架下的WebSocket應用實作指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript flask html pip 对象 http websocket

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Flask vs FastAPI: 建構高效API的最佳選擇下一篇：Flask vs FastAPI: 建構高效API的最佳選擇

看更多