Node.jsでWebSocketのサンプルを動作させるまで

Node.jsの環境構築から、WebSocketのサンプルを動作させるまでを書く。ちょっとはまったりしたので、そういうところも含めて書いておく。書いておかないと、自分がまたはまりそうなので。
インストールしたのは以下のバージョン。

nodebrew 0.6.2
node.js v0.8.18
websocket.io 0.2.1

Node.jsのインストール

brewで入れてみた。これは失敗。

# brew install node

nvmを使うべきだったか、とつぶやいたら、こもりさんが nodebrew がいいと教えてくれた。

brewで入れたやつは uninstall した。

# brew uninstall node

nodebrewのreadmeを見ながらインストール。

hokaccha/nodebrew · GitHub

# curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup

zshを使ってるので、.zshrcにパスを追加する。

export PATH=$HOME/.nodebrew/current/bin:$PATH
export NODEBREW_ROOT=$HOME/.nodebrew

反映させる。

# source ~/.zshrc

nodebrew が入った。

# nodebrew
nodebrew 0.6.2
...

node.jsのバージョンを確認する。

# nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6  
...
v0.8.0    v0.8.1    v0.8.2    v0.8.3    v0.8.4    v0.8.5    v0.8.6    v0.8.7
v0.8.8    v0.8.9    v0.8.10   v0.8.11   v0.8.12   v0.8.13   v0.8.14   v0.8.15
v0.8.16   v0.8.17   v0.8.18   

v0.9.0    v0.9.1    v0.9.2    v0.9.3    v0.9.4    v0.9.5    v0.9.6    v0.9.7

0.8系は安定版、0.9系は開発版なので、0.8系の最新をインストールする。

# nodebrew install v0.8.18

インストールはこっちのコマンドのほうがよかったかも。

nodebrew install-binary <version>   Download and install a <version> (binary file)

node.js 入ったかな。入ってる。

# nodebrew ls-all
...
local:
v0.8.18
...

デフォルトのnode.jsを指定する。

nodebrew use v0.8.18
node -v
v0.8.18

これで node.js のインストールはおしまい。

websocket.io

WebSocketを使いたいので websocket.io を入れる。これは失敗。

# npm install websocket.io

コマンドを実行したディレクトリにインストールされるとこもりさんが教えてくれた。

websocket.io を uninstall する。

# npm uninstall websocket.io

npmのヘルプを確認する。なるほど。

# npm help install
In global mode (ie, with -g or --global appended to  the  command),
it  installs  the  current package context (ie, the current working
directory) as a global package.

もう一度 websocket.io をインストールする。

# npm install -g websocket.io
...
> ws@0.4.20 install /Users/sada/.nodebrew/node/v0.8.18/lib/node_modules/websocket.io/node_modules/ws

入った。いい感じ。

WebSocketを使う

サーバのコードはこんな感じ。ブロードキャストできるechoサーバという感じ。

はじめてのnode.jsで、はじめてのWebSocket。

var ws = require("websocket.io");
var server = ws.listen(8888,
  function () {
    console.log("ws start");
  }
);

server.on("connection",
  function(socket) {
    socket.on("message",
      function(data) {
        console.log("message " + data);
        server.clients.forEach(
          function(client) {
            client.send(data);
          }
        );
      }
    );
  }
);

こちらのコードを参考にさせていただきました。

Node.jsとWebSocket.IOでチャットアプリを作る | mawatari.jp

ws.jsというファイル名で保存して実行する。エラーがでる。

# node ws.js

module.js:340
    throw err;
          ^
Error: Cannot find module 'websocket.io'
    at Function.Module._resolveFilename (module.js:338:15)

websocket.io が見えてない。ちょっと調べて、ファイルの先頭にこれを追加した。

require.paths.push('/Users/sada/.nodebrew/current/lib/node_modules');

実行する。require.pathsは無くなったから、NODE_PATHを使えと怒られる。

# node ws.js

Error: require.paths is removed. Use node_modules folders, or the NODE_PATH environment variable instead.
    at Function.Module._compile.Object.defineProperty.get (module.js:386:11)

NODE_PATHを使う。これを .zshrc に追記した。

export NODE_PATH=$HOME/.nodebrew/current/lib/node_modules

反映させる。

source ~/.zshrc

実行する。できた。

# node ws.js
ws start

クライアント側のHTMLとJSはこんな感じ。サーバにデータを送る、サーバから受け取ったデータを console.log に流すだけ。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script>
  $(function(){
    var host = "ws://localhost:8888/";
    var socket = new WebSocket(host);
    console.log(socket.readyState);

    socket.onopen = function(){
      console.log(socket.readyState);
    }
    socket.onmessage = function(message){
      console.log(socket.readyState + " " + message.data);
    }
    socket.onclose = function(){
      console.log(socket.readyState);
    }
    $(window).unload(function() {
      socket.onclose();
      console.log(socket.readyState);
    })

    $("#sendBtn").on("click",function(){
      message = $("#message").val()
      socket.send(message);
    });
  })
  </script>
</head>
<body>
  <h1>Hello World!</h1>
  <input type="text" id="message" /><button id="sendBtn">send</button>
</body>
</html>

まとめ

node.js はいろいろなツールのプラットフォームになってきているから、インストールしなきゃなと思ってた。去年くらいから。ちょうどWebSocketを扱う機会があったので、node.jsをインストールしてみた。
いろいろ調べながら、ここまで大体1時間くらい。多少は前提知識があったのでこれくらいで済んだ。全くのゼロからだと、ちょっと大変かもしれない。
こもりさん、いろいろ教えてくださってありがとうございます。Thanks [twitter:@cipher].

多少はまったけど、それでもかなりスムーズに環境構築できた。nodebrewやnpmなど、node.jsを便利に使う環境がかなりそろっていて助かる。
環境構築が終わっていれば、いろいろさらっと試せる。これまではnode.js使うものだと、ちょっと面倒だなーと思ってしまうことがあったけど、これからはさくっと試してみようと思える。いろいろ使ってみたい。

ちゃんと勉強しないとねぇ。