nodejsアプリ開発「（私の）socket.ioハンズオン」

最近javascriptの学習をはじめました。

ので、今回は socket.io のハンズオンを勝手にやってみました。

メモ程度の情報になりますがご容赦ください。。

ソースはこちら＞＞ Socket-Server

ローカルで実行して頂ければ、挙動のご確認ができると思います。

作成元情報

• Node.js + Express + Socket.io で簡易チャットを作ってみる

  • https://qiita.com/riku-shiru/items/ffba3448f3aff152b6c1

• Bootstrap テンプレート

  • https://techacademy.jp/magazine/6270

環境構築

デプロイ環境として、AWS EC2 Amazon Linux2を選択しました。

• AWS EC2インスタンス Amazon Linux2
• Nodejsのインストール

// nodejsインストール
sudo yum install -y gcc-c++ make
curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -
sudo yum install -y nodejs

// gitインストール
sudo yum install git

// node-modulesインストール
cd socketServer
sudo npm install

// forever インストール
sudo npm install forever -g

// 実行
sudo forever start -a -d app.js

// メモ
// 権限がない場合適宜 `sudo` を付与してコマンドを実行すること

装飾関連めも

• Bootstrap4に用意されているクラス

  • https://webnetamemo.com/coding/bootstrap4/201710065870

• Bootstrapのフォーム組の基本テンプレ

  • https://qiita.com/zaburo/items/8983993d173c51cb3827

• CSSで右寄せ

  • https://www.sejuku.net/blog/72034

実装したこと

• 上部がタイトル領域（保存ファイル名になるので拡張子まで入れること）
• 下部が本文領域
• タイトル、本文を入力して登録ボタンを押下すると、アプリの中の data ディレクトリにファイルが保存される

理解したことリスト

• nodejs で socket.io を使用する方法がわかった
  • 仕組みとしては、on と emit で送受信しているだけ
• 別ブラウザで同一URLを開くと、内容が同期される挙動が確認できた。
• Bootstrapを少し触ることができた
  • Bootstrap4から、ブロックレベル要素のセンタリングは
  • Bootstrap3までのcenter-block を使用するのではなく mx-autoクラスを使用するよう変更されていることがわかった

このアプリの展望...

• 議事録アプリ

本文領域に議事内容をみんなで打ち込んでいけば、違う違う、ここはこうだよ！みたいなことがすぐできる！

タイトルに議題名を打ち込んで保存して、メールで送る機能を付けたり。。

なかなか便利そう。だけどこれだけならGoogleスプレッドシートやドキュメントでいいかも。

まとめ

今回は socket.io について理解するために、（私の）ハンズオンをしてみました。

この記事が少しでもご参考になれば幸いです。