FlaskでWebSocketを使ってリアルタイム通信を実装する基本｜初心者向け完全ガイド
生徒
「Flaskでチャットみたいに、画面が自動で更新される仕組みを作れますか？」
先生
「できますよ。FlaskではWebSocketという仕組みを使うと、リアルタイム通信が可能になります。」
生徒
「WebSocketって難しそうです。パソコンもまだ慣れていなくて……。」
先生
「大丈夫です。手紙と電話のたとえを使って、Flask WebSocketの基本から説明します。」
1. WebSocketとは何かを超かんたんに説明
WebSocket（ウェブソケット）は、サーバーとブラウザがずっとつながったまま通信できる仕組みです。
通常のWeb通信は、手紙のやり取りに似ています。 送って、返事を待って、また送る、という流れです。
一方でWebSocketは電話のようなものです。 つながったままなので、相手からもすぐに話しかけられます。
Flask WebSocket、リアルタイム通信、双方向通信というキーワードで、 チャットや通知機能を作りたい人がよく検索しています。
2. Flaskでリアルタイム通信が必要になる場面
リアルタイム通信とは、画面を更新しなくても情報が届く仕組みです。
例えば、チャット、オンラインゲームの状態表示、作業の進捗通知などです。
Flaskだけでは、基本的に「要求があったら返す」動きになります。 そのため、WebSocketを使うことで、 Flaskでもリアルタイム性のあるアプリが作れます。
3. FlaskでWebSocketを使うための準備
FlaskでWebSocketを扱うときは、Flask-SocketIOという拡張機能を使います。 拡張機能とは、Flaskに便利な力を追加する道具です。
from flask import Flask
from flask_socketio import SocketIO
app = Flask(__name__)
socketio = SocketIO(app)
これでFlaskアプリにWebSocketの機能が追加されました。
4. サーバー側でメッセージを受け取る
次に、ブラウザから送られてきたメッセージを受け取る処理です。
@socketio.on("message")
def handle_message(msg):
print("受信したメッセージ:", msg)
socketio.send("サーバーからの返事")
このコードでは、メッセージを受け取ったら、 そのまま返事を返しています。
Flask WebSocketでは、このようにイベントという形で処理を書きます。
5. HTML側でWebSocketを使う基本
次はブラウザ側の処理です。 HTMLとJavaScriptを使ってサーバーと通信します。
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.send("こんにちは");
socket.on("message", function(data) {
console.log(data);
});
</script>
ここでは、ページを開いた瞬間にメッセージを送り、 サーバーからの返事を受け取っています。
画面更新なしで動くのが、リアルタイム通信の特徴です。
6. FlaskとWebSocketが非同期処理になる理由
WebSocketは、ずっと接続したまま通信を行います。
そのため、Flaskの通常のAPIとは違い、 「いつ返すか」を待たずに動作します。
これを非同期処理と呼びます。 非同期とは「順番を待たずに同時に進む」という意味です。
Flask 非同期処理、WebSocket リアルタイムという言葉は、 この仕組みを理解するために重要です。
7. 初心者がつまずきやすいポイント
初心者の方が混乱しやすいのは、 「APIとWebSocketは別物」という点です。
APIは呼ばれたら返す、 WebSocketはつながり続けて話す、 この違いを意識すると理解しやすくなります。
最初は、送って返すだけのシンプルな例で十分です。
8. Flask WebSocketの基本的な考え方
FlaskでWebSocketを使うと、 リアルタイム性のあるアプリを作れます。
難しい技術に見えますが、 実際は「電話のようにつながり続ける通信」です。
Flask WebSocket 使い方、初心者、リアルタイム通信というキーワードで、 多くの人がこの基本を学んでいます。
