node.js+socket.ioを使ったライブコーディングwebアプリを作ってる

Node.js

かれこれ2ヶ月くらい、ちまちまと作り続けていたのがようやく動くようになったかなーという状態になったので公開してみる。

http://www1216u.sakura.ne.jp/livecoder/ 公開停止しました
手元のMacでChrome, Safari, Firefoxでは動いていた。IEは知らない。
ソースはGithubに。 https://github.com/sugyan/live-coder

使い方

Twitterでsignin。 /edit のエディタ上でテキストを編集すると、 /view/ でリアルタイムに編集が反映される(こちらはread only)。
同じユーザのページを見ているユーザ同士でのテキストチャットが可能。

構成

  • Server
    • node.js v0.4.1
    • ライブラリはnpmにて socket.io, express, ejs, oauth, configを使用。あとSessionWebSocketはちゃんと動いてくれないのでこちらを。
    • アプリは裏で3000番portで動かして、80番はnginxで受けて静的ファイルを配信しつつproxyしている。
    • socket.ioでのWebSocket通信とかは3000番で行っているので3000番が塞がってると動かないと思う
  • Client
    • Eclipse Orionのbrowser clientで使っているeditorを使用。
    • google-diff-match-patchを使って編集されるごとに差分を抽出し、socket.ioでサーバに送信、viewerはbroadcastされてきた差分情報を元に表示を更新する。
    • simpleTimeagoもちょっとだけ使ってます。
    • あと普通にjQuery。

背景

昨年夏にYokohama.pmでライブコーディングをやらせていただいたのですが、これがまたすごく楽しかったわけです。
第6回 yokohama.pm ＆ Perl Casual でライブコーディングに挑戦してみた - すぎゃーんメモ
で、昨年秋にjstudy #2に行ったときにid:Jxckさんのnode.jsの話を聞いてデモを見て、「node.jsすげー！」「socket.ioすげー！」と思ったわけで。
jstudy#2を開催しました - Webtech Walker
#jstudy2 で node.js について発表してきました。 - Block Rockin’ Codes
というわけで、自分が作りたいと思ったのはとにかくWebブラウザを使ってライブコーディングできるもの。node.jsに強いこだわりがあったわけではないのだけどsocket.ioはブラウザ互換とかあまり考える必要なくclient側もserver側も同じように書けて楽しかったので、結局全部node.jsで作ってみることにした。ある程度socket.ioでの通信内容が固定できてブラウザ互換も気にしなくても良いようになってくればPerlなど得意なものでserver側を書いても良いのでは、とは思っている。
webエディタについてもこだわりが無く、「編集／カーソル移動のイベントが取れて処理を挟める」「viewerとしてreadonlyにできてJavaScriptから内容を変更できる」くらいの機能があれば何でも良いと思っている。最初はCodeMirrorを使っていたのだけど後者の処理とsyntax highlightの処理がうまく調整できなくて試行錯誤してるところにちょうどorionのニュースが流れてきたので興味本位で触ってみたという程度。

今後の展望

こんな機能を入れたら面白いものが出来上がるんじゃないかなーと思っている。

  • ローカル環境での任意のエディタから編集情報を送信してwebにリアルタイム反映させる仕組み
  • 毎回serverで受け取る編集情報をstorageに保存し、あとで録画再生するようにライブコーディングを見られるようにする仕組み

リアルタイム性を追求するならば同じ時間に同じ場所(URL)にアクセスしている必要があるので、そのためのユーザへの通知の仕組みなども考える必要があるなぁ、とは思っている(現状、edit画面にてviewerが増減したときにchromeのnotificationが動くようにはしている)。