Edited at

Socket.IOを利用してHTML,Javascript,CSSだけでわりと簡単にLINE風チャットアプリを作る

More than 3 years have passed since last update.


はじめに

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.png
1.png

ユーザ1ログイン
2.png
2-2.png

ユーザ2ログイン
3.png
2.png

メッセージやりとり
4-1.png
4-2.png


さいごに

Socket.IOを利用した場合もわりと簡単に作れる。

でもやっぱりFirebaseを使って作るほうがだいぶコードサイズは減るなぁ。

Firebaseのサーバ側みたいな機能を持ったフレームワークとかライブラリないかなぁ。


参考