Building Chat Application using MEAN Stack (Angular 4) and Socket.io
上のリンクに順を追って書かれているけれど、色々抜けているのでForkしたほうがよい。
MEANスタックは、Mongo DB, Express, Angular, Node.js で構成される。
ExpressがDBアクセスとJSONのAPI, Socket.ioのサーバなどのバックエンドを担当して、Angularは表示などフロントエンドをする。
ルーティングはexpressで行う。angularへのルーティングはng buildによって生成されたdist/index.htmlをrender()することになる。よって、起動コマンドはng serveではなくnode なんたらになる。好みでpackage.jsonのnpm startをnodeなんたらに変える。
Socket.ioのサーバはroutes/chat.jsで動いている。他のサンプルではbin/wwwに書いてあるものもあった。見通しが悪くなってしまうので専用のファイルを作ったほうが良いかもしれない。もしくは別プロセスで動かすのも吉かもしれない。
チャット入室時
- Angularが発言履歴をhttp://localhost:3000/chat/Javascript (Express)からJSONで読み込む
- AngularがLocalStorageにユーザ名、部屋名を書き込む
入室後
- http://localhost:4000のSocket.ioで発言を送受信
-
Angularがhttp://localhost:3000/chat (Express)に発言をDBにも反映するためにPOSTしている
二度手間になるのでサーバのSocket.ioの受信イベントにまとめるべきでは？
socket.ioのメッセージがブロードキャストされていて、localStorageにあるroomと一致する時表示するという方法を取っている。セキュリティ的にもトラフィック的にもSocket.ioのroom機能を利用して不必要なところには送らないようにすべき。
JSではthisが関数の実行時のオブジェクトとなるので、.bind(this)によって宣言時のthisになるようにしている。io.onでbind()しているのはon内の関数のthisがSocket.ioとなってしまうためにangularがもつchatsにpushできないため。宣言時にはangularなのでbindしていれば問題なくpushできる。
JSON.stringify()とは、JSONをJSON形式の文字列にするメソッド。逆の働きをするのがparse()。
