みてさわって動かして(自作チャット)

AWS Ec2で自作のチャット

いろいろな情報を元にNode.js +Socket.io+ bootstrap で構築してみました。結構前に試してはいたのですが、アウトプットとして発信できていなかったので再度行いました。

 

最終的な成果は、以下で確認して下さい。めっちゃ簡単で、機能不足もありますが、チャットです。

 

ログインボタンを押して初めて下さい。(ブラウザがsafariだとダメでした。。。)

 

//ここをクリック(中止してます) yos-chat

 

複数ブラウザか複数タブでアクセスすると、通信が双方向に走るのがわかります。
片方でのメッセージを送ると、それが送られるとか、あとは現在チャットに接続している人数も出ます。ちょこちょこっといじってみて下さい。動作してなかったら、予期せぬエラーなので、コメント欄に書いて下さい・・)

 

今後もどこかで随時機能追加できたらなーと思ってます。 今回やったことをまとめると以下になります。

  • 環境構築
    • Node.jsのinstall
  • 機能追加とデザイン調整しながら試行錯誤
    • サーバーサイドのJSの作成
    • クライアント側のIndex.htmlの作成
    • クライアント側のCSSの作成
    • デザイン調整
  • AWSサーバーで動かす
    • サーバーへのNode.jsのインストール
    • サーバーへのデプロイ
    • 動作検証
  • ブログ記事更新
    • 参考にしたリンクの整理と文章化

 

機能追加とデザイン調整 実際のソース

 

サーバーサイドのJS

 

クライアント側のIndex.html

クライアント側のJS/CSSの作成

 

AWSで動かす

今回はすでにブログのサイトがあったので、そこにつけくわえる形で対応しています。

参考にしたサイト群

メインで参考にした記事

参考Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005

 

Node.js のexpress というMVCフレームワークに気付いた時に参考にしたサイト

参考Node.jsのMVCフレームワーク「Express」の基礎知識

参考Node.js、Express.js入門

参考ExpressとSocket.IOを使ったカウンターのサンプル

 

途中で自分をモチベートした記事

参考ブログを三ヶ月毎日続けるためにやったこと

 

サーバーへのNode.jsのインストール

参考Amazon Linuxに Node.js と npm を入れる

 

サーバーへのデプロイ

FileZillaを使ってやりました。まぁ、転送するだけですが。
アクセス権とかでファイルの転送ができなかったら、ここを参考に修正

参考チュートリアル: Amazon Linux への LAMP ウェブサーバーのインストール

 

突然だけど、心に響いた言葉

行動を伴わない想像は何の意味もない Imagination means nothing without doing. by Charlie Chaplin(チャーリー・チャップリン)

 

そう、アウトプットが大事、それでは、また。

あわせて読みたい

3件のフィードバック

  1. 良い荷物。 より:

    コメント、嬉しいでしょ。それがわかってるからコメントしちゃう。
    やるやるとは思っていたけど、まぢ天才だわ兄貴。
    引き続き購読してるからね(^ ^)

  1. 2017年3月7日

    […] 前回記事では、AWSを利用して自作チャット作成しましたが、   […]

コメントを残す

メールアドレスが公開されることはありません。