Node ITかあさん

ITかあさん

Vagrantでnode.js環境を作る

Vagrantを最新に

Vagrant 最新
Vagrant環境をアップデートします。

# vagrant -v
Vagrant 1.7.2

Vagrantの本家サイトを確認すると、現在Vagrantは1.8.1が出ているそうで、自分の既存の環境と差をチェックして古ければバージョンをあげます。
最新vagrantダウンロード

Vagrantを最新に

vagrantをインストール
Vagrantを通常のソフトウェアのインストールと同等にインストールするとアップデートされる。

アップデートを確認し、プラグインをアップデート

# vagrant -v
Vagrant 1.8.1
# vagrant plugin update
Updating installed plugins…
All plugins are up to date.

アップデートをしたら、プラグイン関係もアップデートします。

適当なフォルダを作って、vagrant add

CentOS7のvagrantのboxを追加

# mkdir electron
# cd electron/
# vagrant box add CentOS7.0 https://github.com/tommy-muehle/puppet-vagrant-boxes/releases/download/1.1.0/centos-7.0-x86_64.box

box listを確認、vagrant initで使うboxを選択

boxをダウンロードしたら、現在使えるbox listを確認し、使いたいboxを選択します。

# vagrant box list
CentOS7.0 (virtualbox, 0)
# vagrant init CentOS7.0
# vagrant up

vagrant sshよりNVMをインスト

NVM(Node Version Manager)をインスト。
NVMのインストール方法についてはこちらを参照
2016年5月6日現在だと下記が最新。

# curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
# nvm install 5.0

バージョンチェック

# nvm –version
0.31.0
# node -v
v5.0.0

visudo

# visudo

設定変更

env_restを無効
#Defaults env_keep += “HOME”
↓↓↓↓↓
Defaults env_keep += “HOME”パスの置き換えをしないようにする
Defaults secure_path = /sbin:/bin:/usr/sbin:/usr/bin
↓↓↓↓↓
#Defaults secure_path = /sbin:/bin:/usr/sbin:/usr/bin

変更したら一度ログアウトし、再度ログインして設定が反映される。

Vagrantの作業フォルダを変更

スクリーンショット 2016-05-07 10.24.33

vagrant initすると、vagrant fileができて、.vagrantフォルがが出現している。

仮想マシンとしてのフォルダと、PCから作業出来るフォルダはデフォルトでは.vagrantフォルダで共通。
このままでは作業しずらいので、下記のようにvagrant fileを変更した。

config.vm.synced_folderの第一引数はホストマシンでのフォルダ(Vagrantfileから見た時の相対パスで)
第二引数は仮想マシンから見た時のフォルダ。
Vagrantfileを修正したら、ホストマシンにappフォルダを作り、一度vagrant sshで仮想マシンにログインした後、仮想マシン直下にvagrantディレクトリを作成。

ホストマシン

スクリーンショット 2016-05-07 10.49.47

仮想マシン

# vagrant ssh
Last login: Sat May 7 03:42:25 2016 from 10.0.2.2
Welcome to your Vagrant-built virtual machine.
[vagrant@localhost ~]$ pwd
/home/vagrant
[vagrant@localhost ~]$ cd /
[vagrant@localhost /]$ mkdir vagrant
[vagrant@localhost /]$ cd vagrant/
[vagrant@localhost vagrant]$ pwd
/vagrant
[vagrant@localhost vagrant]$ exit
logout
Connection to 127.0.0.1 closed.
matsuda-no-MacBook-Pro:electron root # vagrant reload

仮想マシンにもフォルダを作ったら一度sshをログアウトして、vagrant reloadすればOK.
仮想マシンとホストマシンとのフォルダの階層がVagrantfileに設定したものと正しくあっていなければエラーが出てしまうので注意。

npm initdでプロジェクトの初期化をする

再度vagrant sshで仮想サーバーにログインし、npm initでプロジェクトの初期化をする

[vagrant@localhost ~]$ npm init

色々聞かれるけど、ひとまずここは全部enterでいいかも。
出来上がるファイルが以下。

上記のようなファイルがnode_modulesと同じ階層に自働で作成される

手順まとめ

1.vagrantをインスト
2.CentOS7のvagrantのboxを追加
3.追加したvagrant boxで vagrant init CentOS7.0
4.NVMを追加
5.visudo 設定変更
6.vagrantの作業フォルダの設定 Vagrantfileを変更してvagrant reload
7.npm initでnodeのプロジェクトの初期化を行う。

以上の作業でるvagrantによるCentOS7環境でのnode環境が出来上がりました。

Socket.io×jQuery最小勉強コストでチャットを作る

Socket.io×jQuery最小勉強コストでチャットを作る

socket.io
※この記事は2014年9月7日に開催された秋のJavascript祭りのITかあさんのセッションネタをちょっと詳しく解説します。

画像は自主規制しました。意味がわかり難いかもしれませんが、Socket.ioを理解する上では全く必要ありません。

懇親会の最中に、「このセッションのために僕は来ました!」と何人かのお兄さんに声をかけられました。
ありがとうございます、Nodeをやると、若いお兄さんと知り合えるのですね、お母さんはこれからもNodeがんばって勉強します。

Socket.ioは1.0以上がリリースされているよ

セッション中も何度も繰り返しましたが Socket.ioは5月末にSocket.io1.0がリリースされております。
世の中に出ているSocket.ioの情報の多くは0.9以前のため、最新のSocket.ioをインストールした場合は、ほとんどの場合動きません。
Socket.ioのバージョンには十分注意してください。

今回のかあさんのセッション内容は1.0以上で動作します。

Socket.io 1.0以降の情報まとめ

Socket.IO 1.0の紹介 (翻訳)
http://yosuke-furukawa.hatenablog.com/entry/2014/05/30/093103Socket.IO 1.0 (本家)
http://socket.io/blog/introducing-socket-io-1-0/Socket.io1.0使い方と変更点)
http://qiita.com/nkzawa@github/items/1e526feb6c9e3b96c089

Get Started: Chat application (今回のスライドの元ネタ)
http://socket.io/get-started/chat/

Socket.ioは1.0チャットで必要なもの

・Nodeサーバー
・socket.io ver1.0(2014.5末に公開されたよ!)
・jQuery

Nodeサーバーのインストール方法

過去に記事を書いておりますので、こちらを参照ください。
※remiリポジトリがあればCentOSではyumコマンド一発だと書いておりますが、
正しくはepelリポジトリの間違いでした。

nodeとモジュール管理のnpmをインストールしたら今回のsocket.ioをインストールすると、何もしなければ最新のsocket.ioがインストールされます。

npm install socket.io

シンプルチャットの元ネタの解説

今回は一切私でオリジナルのコードを書いておりません。すべてはこちらを参照してください。

Get Started: Chat application (今回のスライドの元ネタ)
http://socket.io/get-started/chat/

ですが、一切Node未経験ですと、意味がわからない、動かないということになりかねないのでいくつか補足説明します。

スクリプトを自分の環境に設置する

Nodeのインストールされている環境であればどこでもかまいません。
スクリプトを設置したら、設置したスクリプトと同じ階層にnpmコマンドでモジュールを設置します。

ファイルのパスを設定する

index.jsがサーバー用のjavascriptファイルです。
res.sendfileの中身だけ書き換えてください。
res.sendfile(‘出力させるページのサーバーの絶対パス’);

例 res.sendfile(‘/var/www/html/node/index.html’);

クライアント側のhtmlファイルにsocket.ioのファイルのパスを正しくつなぐ

クライアント側のファイルとは、ユーザーが見る画面を作っているhtmlファイルのことです。
サンプルでは以下のようになっております。

/socket.io/socket.io.js

しかし、npmコマンドでモジュールをインストールしている場合はもう少し複雑な階層になっているはずです。私の場合は以下のようになりました

http://192.168.33.41/node_modules/socket.io/node_modules/socket.io-client/socket.io.js

サーバー用ファイルであるスクリプトを実行する

サーバー用javascriptをnodeコマンドで実行します

$ node index.js

URLにアクセスする

http://192.168.33.41:3000

割り当てたポートに対して、クライアントファイルがincludeされて読み込まれているようなイメージなので、クライアントファイルをURLでたたいても意味がありません。
割り当てたポートで確認しましょう。

基本的には、ファイルパスを指定して、スクリプトを実行して、URLにアクセスするだけです。

これ以外に何もしなくても動きます。

それでも動かない場合は3000のポートが開いているかのチェックと、
Chrome→要素検証→Console またはNetworkでエラーが出ていないかチェックしてください。
Socket.ioのファイル自体正しく読み込まれていない可能性があります。

理解しなければならないことは、onとemitだけ。

emit→送信する
on→メッセージを受け取った時の処理

ただし、ちょっとだけ覚えておいてもらいたいのはNode.jsはサーバーサイドJavascriptです。
サーバーを間に挟みますので当たり前といえば当たり前ですが構造はこうなります。

×送信者→受信者
○送信者→Nodeサーバー(受信)→受信者(サーバーからメッセージを受け取る)
1.送信者socket.emit()
2.Nodeサーバーsocket.on() メッセージ受信
3.Nodeサーバーsocket.emit() メッセージを送信
4.受信者socket.on() メッセージ受信

メッセージは送信者から受け取るのではなく、Nodeサーバーから受信していることを忘れないでください。
そこだけ初めてのNodeだとつまずくと思うので、頭の片隅に入れて、ソースコードを読んでいくとSocket.ioが理解しやすいと思います。

まとめ

Socket.ioは1.0からより簡単になった
socket.emitとsocket.onだけを頭に入れる
メッセージは送信者→Nodeサーバー→受信者

あとはとにかくやってみるべしです!

今回は「すぐできる」ことをテーマに作ってみたのでデータベースにinsertすることもしていなければ、
チャットルームも作っていません。
つまりNodeの環境にいる人すべてにメッセージを送ってしまうので、
今度はチャットルームについても触れたいと思います。

どうもありがとうございました。