JavaScript と Python (tornado) を使った匿名チャットツールを作った

github.com

サークルの新入生プロジェクトで、JavaScript を基礎から学習して、ゲームを作れるようになる、というものがある。

で、そのプロジェクトの部内のページに、

オンラインゲーム作れるようになるとｲｲﾈ!!

と書いてあったので、どういうふうに作るとよいのか、とりあえず通信部分はどうするとよいのかを知るために、WebSocket について学んだ。

WebSocket って何だろう(ざっくり)

サーバー→クライアントと、クライアント→サーバーの双方向の通信をサポートするプロトコル。メッセージを双方向で送り合うことができる。(雑)

とりあえず接続してみる

JavaScript で、

var ws = new WebSocket('ws://example.com/ws');

というふうに書く。そうすると、クライアントからサーバーに、「WebSocket 通信を開始する」という合図が送られる。

クライアントからサーバーへメッセージを送信したり、サーバーから受け取ったメッセージをクライアントで処理するときは、次のように書くとよい。

// サーバーにメッセージを送信する
ws.send('this is a message.');

ws.addEventListener('message', function(event) {
  // サーバーからメッセージを受け取ったときに実行される
  console.log(event.data);
});

ws.addEventListener('close', function(event) {
  // サーバーとの通信が切断されたときに実行される
  console.log('disconnected.');
});

いい感じに書くことができそうなので、これで JSON を送受信してオンラインゲームを作ればよいのかな？

成果物

github.com

ここで動いています

WebSocket を用いた非同期匿名チャットツール。接続が切れたときの再接続処理などは現状行っていないので、接続が切れたら再読み込みしてください。

クライアントは HTML5+JS、サーバーは Python3 で書かれている。Web フレームワークとして tornado を使用した。 Flask や bottle.py ほどシンプルではないが、シュッと WebSocket に対応させられるので便利。

余談

Heroku が Python 3 (3.5.11) に対応していたので最高な気持ちになった。