vim でファイル保存したら node.js + Chrome Extension で、ブラウザ自動更新


vim(とか) でプログラムいじって保存→ブラウザで確認って作業は頻繁にありますよね!

保存するたびにマウス動かして(またはショートカットで切り替えて)、ブラウザ更新するのはいい加減面倒くさいので自動更新する方法がないかと探してたんですが、環境的に動かないものばかり(OS依存とか)だったので作ってみました(`ー´) ドヤッ!
せっかく作ったので設定方法紹介します。なお、codeは github で絶賛公開中。

仕組み


1. vim(とか)でファイル保存したときに http で websocket サーバへ request を飛ばします。ここももちろん自動化
2. request を受けた httpd サーバ 兼 websocket サーバは、接続中のクライアントに「どのサーバで、どのディレクトリが更新されたか」を push 通知します
3. push 通知を受けたクライアント(Chrome)は、ブラウザをリロードします

必要なブツ

  • vim。emacs は認めない ファイル保存時に http で request 飛ばせるなら何でもいいです
  • httpd 兼 websocket サーバを動かすための vps。既に持ってるならそこに入れればいいし、ないなら安いVPS契約するか友達に間借りするか、など
  • Chrome Extension 使うので Chromeちゃん

    1. vim でファイル保存時に request 飛ばすようにする

    さっそく設定手順を紹介していきますが・・・

    http://example.com:8000
    http://example.com:8001

    と仮定します。適宜、自分の環境に読み替えてください。ポートも8000である必要はないです。

    自動更新の対象にしたいサーバで、.vimrc に以下を追記します。

    let wgetstr = "!wget -q --spider \"http://example.com:8000/?path=" . expand("%:p:h") . "\""
    autocmd BufWritePost *.php,*.css silent exe wgetstr

    example.com:8000 の部分は自分の環境に置き換えてください。
    「*.php,*.css」の部分は、対象の拡張子を指定してます。自由に設定してください。

    これで対象ファイルを保存すれば example.com:8000 へ ファイルのパスが送信されるようになります。

    2. vps に node.js + express + socket.io をインストールして httpd 兼 websocket サーバを動かす

    node.js インストール

    CentOS用なので違うディストリビューションは適宜読み替えを。

    yum install -y openssl-devel gcc-c++
    wget http://nodejs.org/dist/v0.8.8/node-v0.8.8.tar.gz
    tar zxvf node-v0.8.8.tar.gz
    cd node-v0.8.8
    ./configure
    make
    sudo make install

    設置用ディレクトリを作って移動

    忘れると「どうやって起動するんだっけ・・?」となるので忘れない場所に作りましょう。
    自分のホーム/node/node-reload に作ると仮定します。

    mkdir -p ~/node/node-reload
    cd ~/node/node-reload

    express とか socket.io とか色々インストール

    どかーんと入れます。

    sudo npm install -g forever
    sudo npm install express
    sudo npm install socket.io
    sudo npm install socket.io-client
    sudo npm install ejs
    express -e

    ここまでのディレクトリ構成を見てみると、こうなってるはずです↓

    HOME/node/node-reload
      app.js
      node_modules
      package.json
      public
      routes
      views

    ファイル編集

    vim から飛ばされた request を受け取るための httpd(ポート8000)用の編集をします。

    app.js

      app.set('port', process.env.PORT || 8000);

    3000 を 8000 に変更

    routes/index.js
    github に公開してるソースに置き換えてください。さらに以下の部分を自分の環境に書き換えます。

    var csocket = client.connect('http://example.com:8001');

    http://example.com:8001 を 自分の websocket用サーバアドレスに変えます。

    動作確認

    いったん動作確認してみます。以下コマンドでサーバ起動

    node app.js

    こんな文字が出ます↓

       info  - socket.io started
    Express server listening on port 8000

    さらにブラウザで以下のようなアドレスでアクセスしてみます。

    http://example.com:8000/?path=/var/www/html

    nodeの画面でこんな文字が出てればOK↓

    { host: 'あなたの接続環境のホスト名',
      path: '/var/www/html' }

    forever で永続化

    さきほどの node は、Ctrl+C で落として以下コマンドで node プロセスを永続化します。

    forever start app.js

    止めたい時は、以下コマンド

    forever stop app.js

    以上で サーバ側の準備が整いました。

    3. Chrome Extension をインストール

    こちら で公開しているのでインストールしてください。

    インストールすると、websoketのアドレス入力が出るので websocket用サーバのアドレス(例だとポート 8001のほう)を入力してOK。

    ブラウザ右上にアイコンが出ます。クリックしてもまだデータ受信してないので何もでません。

    4. 動作確認

    想定どおり動くか確認します。まず、「1. vim でファイル保存時に request 飛ばすようにする」で設定した場所で vim を使ってファイル保存してください。

    Node Reload のアイコンをクリックすると、ホスト名、パスが表示されます。

    パスをクリックするとブラウザの更新対象として設定されます。

    準備完了。もう一度、vimでファイル保存して自動で更新されれば成功です。

    設定はタブ毎に保存するので、以下のように自動更新する場所とタブを分けて利用できます。
    タブAの自動更新対象: example.com の /var/www/html
    タブBの自動更新対象: example.com の /home/oreore/develop/php
    タブCの自動更新対象: temog.info の /var/www/django

    よいvimライフを!

  • コメントを残す

    メールアドレスが公開されることはありません。

    Top