先生と生徒の会話形式で理解しよう

生徒

「FlaskでLINEみたいなチャットアプリって作れますか？」

先生

「作れますよ。FlaskとFlask-SocketIOを使うと、リアルタイムで会話できるチャットが作れます。」

生徒

「プログラミングもパソコンもほとんど触ったことがないんですが、大丈夫でしょうか？」

先生

「大丈夫です。チャットの仕組みを会話の流れに例えながら、Flaskチャットアプリの作り方を順番に説明します。」

1. FlaskとFlask-SocketIOで何ができるのか

Flaskは、PythonでWebアプリを作るためのとてもシンプルな仕組みです。 Webアプリとは、ブラウザで動くサービスのことです。

Flask-SocketIOは、Flaskにリアルタイム通信の力を追加する拡張機能です。拡張機能とは、便利な機能を後から付け足す部品のようなものです。

この二つを組み合わせると、ページを更新しなくてもメッセージが届くチャットアプリを作ることができます。

2. チャットアプリの仕組みを超シンプルに理解する

チャットアプリは、次の流れで動いています。

一つ目は、ユーザーがメッセージを送ることです。二つ目は、サーバーがそのメッセージを受け取ることです。三つ目は、他の人の画面にすぐ表示されることです。

普通のWebサイトは手紙のやり取りですが、チャットは電話のように常につながっています。この仕組みをWebSocketと呼びます。

3. Flask-SocketIOを使う準備

まずはFlaskアプリにSocketIOを組み込みます。ここでは難しい設定はせず、最小限の形だけを紹介します。


from flask import Flask
from flask_socketio import SocketIO

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

このコードで、Flaskがリアルタイム通信に対応しました。チャットアプリの土台ができた状態です。

4. メッセージを受け取るサーバー側の処理

次に、ブラウザから送られたメッセージを受け取る処理です。


@socketio.on("send_message")
def receive_message(data):
    print("受信:", data)
    socketio.emit("receive_message", data)

ここでは、受け取ったメッセージを全員に送り返しています。 emitは「送信する」という意味です。

チャットでは、誰かの発言を全員に届けるのが基本になります。

5. HTMLとJavaScriptでメッセージを送る

次は、ブラウザ側の処理です。 HTMLとJavaScriptを使って、サーバーと会話します。


<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();

function sendMessage() {
    const msg = document.getElementById("msg").value;
    socket.emit("send_message", msg);
}

socket.on("receive_message", function(data) {
    console.log(data);
});
</script>

ボタンを押すとメッセージを送信し、誰かの発言があるとすぐ受信されます。