ゼロからはじめてみる日本語プログラミング「なでしこ」(62) Colabにサーバーを立ててチャットアプリを動かそう

本連載の51回目でWebSocketを利用したリアルタイムチャットの作り方を紹介しました。しかし、前回はLAN内で動かす方法を紹介しただけなので利用範囲は狭いものでした。そこで、今回は、無料で仮想マシンが使えるGoogle Colabにサーバーを立ててチャットアプリを動かせるように改良してみましょう。

Colabでチャットサーバーを立てて、チャットアプリを動かしているところ

無料でチャットサーバーを構築できる？！

今回はGoogle Colab上にWebSocketのサーバーを立てて、チャットアプリを作成する方法を紹介します。そもそもGoogle Colabとは、ブラウザから Python を記述し実行できるサービスです。学生や研究者など機械学習などデータサイエンスを実践するための方のものです。しかし、その実態は、Googleの高性能なマシンを最大12時間無料で貸し出してくれる太っ腹なサービスなのです。

そして、素晴らしいことに、Colab上でなでしこを動かすこともできるのです。そこで、今回はColab上になでしことWebSocketをセットアップして、チャットサーバーとして使ってみましょう。

Colabにログインして新規ノートブックを作ろう

Colabを使うには、Googleアカウントが必要です。こちらColabにアクセスしたら、新規ノートブックを作成しましょう。

Colabで新規ノートブックを作ろう

最初に、なでしことWebSoketプラグイン、ネットワーク公開のためのツールCloudflaredをインストールしましょう。以下のコードをColabのセルに入力して実行しましょう。

!npm install -g nadesiko3
!npm install nadesiko3-websocket
!wget https://bin.equinox.io/c/VdrWdbjqyF/cloudflared-stable-linux-amd64.deb
!dpkg -i cloudflared-stable-linux-amd64.deb

なお、Colabの基本的な使い方ですが、「コードセル」と呼ばれるテキストボックスにコード（プログラム）を入力し、左側にある実行ボタンを押します。すると、プログラムを実行した結果が表示されるというものです。

Colabの基本的な使い方

WebSocketサーバーのプログラムを書き込もう

それでは、最初にチャットサーバー(WebSocketサーバー)のプログラムを書き込んでみましょう。画面左上の「+コード」をクリックすると新規コードセルが表示されます。コードセルに以下のなでしこのプログラムを入力して実行してみましょう。これによって、Colab上に「server.nako3」というファイルが保存されます。

%%file server.nako3
!「nadesiko3-websocket」を取り込む。
#--- 設定 ---
PORT=5001
#--- イベントの指定 ---
WSサーバ起動成功した時には
  「● WebSocketサーバ(ECHOサーバ)を起動しました」と表示。
  自分IPアドレス取得して反復
    「- wss://{対象}:{PORT}」を表示。
  ここまで
ここまで
WSサーバ起動失敗した時には
  「WebSocketサーバの起動に失敗しました」と表示。
ここまで
WSサーバ接続した時には
  IP=対象["connection"]["remoteAddress"]
  「クライアント{IP}が接続しました」と表示。
  「>参加:{IP}」をWSサーバ全送信。
ここまで
WSサーバ受信時には
  「受信:{対象}」と表示。
  対象をWSサーバ全送信。
ここまで
#--- WebSocketを起動 ---
PORTでWSサーバ起動。

そして、次に書き込んだコードを実行しましょう。プログラムを実行するのと同時に、ポート5001を開放して外部からアクセスできるようにしましょう。同様の手順で新規コードセルを作成し、以下のコードを実行しましょう。

!cnako3 server.nako3 & cloudflared tunnel --url localhost:5001

上記コードを実行すると、なでしこのチャットサーバーが起動して、CloudflareのサービスであるArgo Tunnelを利用してサーバーが公開されます。それで、下記の画像にあるようなURLが表示されるので、このURLを覚えておきましょう。

チャットサーバーを起動したところ

チャットクライアントを作ろう

以前紹介したように、チャットアプリでは、チャットクライアントがチャットサーバーに接続してはじめてメッセージの交換ができるようになります。

既にサーバーは起動できたので、次にクライアントを作成して実行してみましょう。チャットクライアントは、Colab上に配置する必要はありません。いつものように、なでしこ簡易エディタを開いて、以下のプログラムを実行してみましょう。

その際、プログラムの2行目にある変数「サーバ−URL」を上記、Colabに表示されたURLに書き換えて実行しましょう。

# ★★★　以下のURLを書き換えてください★★★
サーバーURL=「https://xxxxxxxx/」

WS受信時には
　「#logs」のテキスト取得して、Lに代入。
　　L=対象＆改行＆L。
　　「#logs」へLをテキスト設定。
ここまで
サーバーURLの「https://」を「wss://」に置換してWSアドレスに代入。
WSアドレスへWS接続。

# チャット画面を作成
「<h1>チャットクライアント</h1>
<div>
  以下にメッセージを記入:<br>
  名前: <input type="text" id="名前" value="クジラ"><br>
  内容: <input type="text" id="メッセージ" value="テスト。"><br>
  <button id="送信ボタン">送信</button><br>
</div>
<div><h2>会話ログ</h2>
  <textarea id="logs" rows="10" cols="40"></textarea>
</div>」をDOM親要素へHTML設定。

「#送信ボタン」をクリックした時には
　　F名前=「#名前」のテキスト取得。
　　F内容=「#メッセージ」のテキスト取得。
　　「{今}> {F名前}: {F内容}」をWS送信。
　　「#メッセージ」に「」をテキスト設定。
ここまで。

なでしこ簡易エディタを実行しましょう。すると、チャットクライアントが、チャットサーバーに接続します。発言をすると、チャットサーバーに接続している全てのクライアントにメッセージが届きます。

チャットアプリを実行したところ

ブラウザで複数のウィンドウを開いて、同様にプログラムを実行してみましょう。メッセージを書き込むと同じように全てのクライアントにメッセージが届きます。

遠方の友人のスマホでも動かせる

また、Colabで得たURLを設定したクライアントであれば、同一ネットワーク上にないPCやスマートフォンを利用しても実行できます。なでしこ簡易エディタでは毎回プログラムを書き込む必要があるので、なでしこ3貯蔵庫などにプログラムを保存して、そのアドレスを友人に配布すれば、スマートフォンなどの端末でも動かすことができます。

Colabは最大12時間の利用しかできない

ただし、注意事項があります。無料で使えるColabは最大12時間しか使えません。12時間経つか最大90分ブラウザを操作しないでいるか、ページを閉じてしまうと、強制的に接続が切断され仮想マシンがシャットダウンしてしまいます。そうなると、改めてColab上でチャットサーバーを起動する必要があります。Colabには有料版がありますが、有料版でも24時間後には仮想マシンがリセットされますので、この特性を理解した上で利用しましょう。

まとめ

なお、今回紹介したCloudfrareのArgo Tunnelサービスを使えば自宅PC上で動かしているチャットサーバーを世界に公開することができます。とは言え、世界中にサーバーを公開するのはそれなりに危険もあります。そのため、Colabを使ってチャットサーバーを公開するなら、最大12時間で後腐れなく消えてくれるので、ちょっと試してみたいとか、仲間うちで一時的に利用したいという場合には便利です。

Colabとなでしこを使うと本当に手軽に、チャットサーバーを公開できるので試してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。