はじめに
Firebaseを利用してHTML,Javascript,CSSだけで超簡単にLINE風チャットアプリを作る
をやってみて、Firebaseを使えば超簡単に作れることはわかった。
でもFirebase依存の作り方だと応用効かないのでスクラッチでの作成方法を
ということで、今度は Node.js のライブラリ「Socket.IO」を利用して作ってみる。
事前インストール
事前にNode.jsをインストールしておく。
Node.jsインストール（Nodebrew経由の場合）
# Nodebrewをインストール
brew install nodebrew
mkdir -p ~/.nodebrew/src
# 利用可能なバージョン番号確認する場合は
# nodebrew ls-remote
# を実行
# Node.jsインストール
nodebrew install-binary v6.5.0
nodebrew use v6.5.0
プロジェクトセットアップ
npm init -y
npm install --save socket.io
プログラム作成
ローカルでHTML、JS、CSSを作る。
http://socket.io/docs/ を参考に。
今回のディレクトリ構成は以下。
<プロジェクトルート>
├── css
│ ├── common.css ・・・ クライアント画面CSS
│ └── index.css
├── index.html ・・・ クライアント画面HTML
├── js
│ └── client.js ・・・ クライアント画面用JS
├── node_modules
├── package.json
└── server.js ・・・ サーバ側でNode.jsで実行するJS
ソースはGitHubで公開しているので割愛。
起動
以下のコマンドでサーバ側プログラムを起動後、
http://localhost:8080/index.html で画面を起動。
node server.js
今回作成したのはこんなイメージ。
| ユーザ1 | ユーザ2 | |
|---|---|---|
| ログイン画面 |  |
|
| ユーザ1ログイン |  |
 |
| ユーザ2ログイン |  |
|
| メッセージやりとり |  |
 |
さいごに
Socket.IOを利用した場合もわりと簡単に作れる。
でもやっぱりFirebaseを使って作るほうがだいぶコードサイズは減るなぁ。
Firebaseのサーバ側みたいな機能を持ったフレームワークとかライブラリないかなぁ。