98hira / chat-space Goto Github PK

Sumary

以下のコミット、でサーバーがDBから取り出したレコードをjson形式に変換し、ユーザー側のブラウザ上で動作しているJavaScriptに渡す処理を実装ている。
a268ca6
この時、コードの読みやすさを重視して、DBのカラム名とjsonのキー名は同じにしている。
しかし、これだとブラウザ側でDBのカラム名が把握できてしまうがセキュリティー上の問題はないのか？

TODO

• 作業項目のあげだし

Sumary

サイドバーにログインユーザーが所属しているチャットグループの一覧を表示する処理について、
現状だとユーザーが所属しているグループの数だけSQL文を実行している。
所属グループが増えることによりレスポンス速度低下の懸念があるため、SQL文の実行回数を減らすことができないかの検討が必要。

  Group Load (0.4ms)  SELECT `groups`.* FROM `groups` INNER JOIN `group_users` ON `groups`.`id` = `group_users`.`group_id` WHERE `group_users`.`user_id` = 1
  ↳ app/views/messages/_side-bar.haml:13
  Message Load (0.4ms)  SELECT  `messages`.* FROM `messages` WHERE `messages`.`group_id` = 16 ORDER BY `messages`.`id` DESC LIMIT 1
  ↳ app/models/group.rb:8
  Message Load (0.3ms)  SELECT  `messages`.* FROM `messages` WHERE `messages`.`group_id` = 17 ORDER BY `messages`.`id` DESC LIMIT 1
  ↳ app/models/group.rb:8
  Message Load (0.5ms)  SELECT  `messages`.* FROM `messages` WHERE `messages`.`group_id` = 18 ORDER BY `messages`.`id` DESC LIMIT 1

TODO

• includeメソッドを使えばSQL文の実行回数を減らせないかしらべる。

Sumary

問題点
自動更新機能を実装してみたのですが、
現在の実装だと、全ページで一定間隔でサーバーへ要求を投げてしまいます。

以下のページにいる時だけ自動更新処理を行うにはどのように実装すればいいでしょうか？
loocalhost:3000/groups/:group_id/messages

試したこと
試しに以下のように実装してみたのですが、これだと

1. ブラウザにURLを入力してアクセスした時
2. ブラウザの更新ボタンを押した時

の2つのトリガーでしか呼ばれません。
よって、リンククリックによる画面遷移では自動更新処理の開始・停止を制御できませんでした。

//ファイル名：chat-space/app/assets/javascripts/message.js
$(function() {
  if (window.location.href.match(/\/groups\/\d+\/messages/)) { /* test_add*/
    setInterval(update, 1000);　/*update()で自動更新処理を行っている*/
  } /* test_add */
});

TODO

• 作業項目のあげだし

Sumary

コントローラのcreateアクションにbinding.pry仕込んだ状態での同期通信と非同期通信の動作が異なるため原因を調査する。

• 同期通信の場合→binding.pryを仕込んだ箇所で止まり、paramsで受信データ見れる。
• 非同期通信の場合→association.rbで止まり、paramsで受信データが見れない。
  (binding.pry実行時にナゾ動作するがDBへデータは保存されている。)

本来の目的である、Ajaxによる非同期通信でDBへ保存する処理自体は実装できているが、
chat-spaseはすでにあるソースのコピペで実装しているだけで処理の本質は理解できていない。
今後、自分で何かを作る際にDBへの保存がうまく行かないケースに限らず、非同期通信実装のデバッグ方法を確立するために調査する必要があると考える。

TODO

• 現象が再現する状況を残しておきメンターへ質問する。

Sumary

OB&OGのソースを見ていると、次の２点の問題があると考える。
ひとまず、OB&OGソースをコピペすることでカリキュラムは終わらせる。

• 問題1：同じHTMLファイルが.hamlと.jsの2箇所に記述されている。
  ブラウザに.jsファイルを渡す際に、.hamlで書いた.jsを埋め込むようにすれば.js側にはHTMLの記載は不要になる。
  ただし、この実装を行うには.jsではなく.js.erbで記述する必要がある。
  .js.erbで記述する場合�.jbuilderとの互換性は内容なので、.jbuider以外の記述方法で記載する必要があるらしい。(メンター情報）

• 問題2：ブラウザからサーバーに送ったデータのと同じデータを再度サーバーから送り返すのは無駄。
  テキストデータや画像データはサーバーに送ったのと同じデータをブラウザで保持しておけば、サーバーからはメッセージIDとタイムスタンプだけ送ればよくなるので、通信量の削減になると考える。
  　メンターに相談したところ、「実装方法としてはクッキー、セッション、jQueryのDataメソッドを使う方法が考えられる」とのこと。

TODO

• 作業項目のあげだし

Sumary

現状では、ユーザーが所属しているグループ選択時はページの先頭を表示している。
これだと、最新メッセージを見るには下にスクロールしないといけなくて面倒である。
よって、デフォルトでは下にスクロールするようにした方がいいと考える。

メッセージ送信時の自動スクロールは以下で追加。
これを参考にすれば実装は簡単なはず。
f0195b9

TODO

• 作業項目のあげだし

Sumary

以下項目を自動でテストできないか検討する。

• localhost:3000でアクセスして、問題なく表示がされる
• ビュー崩れがない
• ユーザー新規登録/ログイン/ログアウトができる
• グループ新規作成ができる
• グループ新規作成時にユーザー名のインクリメンタルサーチができる
• メッセージの非同期投稿ができる
• テキストのみ/画像のみ/テキスト＋画像の非同期投稿ができる
• テキストのみ/画像のみ/テキスト＋画像の投稿時に、自動更新がされる
• グループの編集ができる

TODO

• 作業項目のあげだし

Sumary

jQueryで非同期通信機能を実装するには、application.jsに以下の記述が必要だと習った。

//= require jquery
//= require jquery_ujs

しかし、ググってみると以下のような記事を見つけた。

rails-ujsとjquery_ujsで2回リクエストが送られる
→Rails5.1系からjQuery依存が無くなっているため、jquery_ujsの方を外しても良いでしょう。

どちらの情報が正しいか現状では分からないため判明するまで記録として残しておく。

TODO

特になし。

Sumary

#21
グループ作成時のメンバー追加UIの改善

上記で行なった「DBへは反映されていないがユーザー操作によって、チャットメンバーに追加されているユーザーを検索結果に表示しない処理(こちら参照)」について、レビュー指摘を受けて改善検討の必要があると判断したため、別途issueを立てました。

現状の実装

　JS側でユーザーが入力したテキストデータのみをサーバーへ送信し、該当するレコードを取得する。その後、結果を表示する際にチャットメンバー追加に表示されている名前は除外するようにしている。

　問題点：
　サーバーから受け取る必要のないレコードも受信している。
　JS側の処理が複雑になっている。

　利点：
　チャットメンバーが少ないケースでは、通信量が少なくて済む。

改善案

　ユーザーが入力したテキストデータとチャットメンバーに追加されているuser_idをサーバーへ送信し、サーバー側でテキストに一致するレコードからuser_idを除外した結果をJSへ返す。
　JS側ではサーバーから受信したレコードを表示するだけでいい。

　利点：
　　JS側の処理が単純になる。
　　サーバーから返す検索レコード削減により通信効率が改善される。

　問題点：
　　既にチャットメンバーに100人いるケースではユーザーがキー入力するたびに、100人分のIDをサーバーに送る必要があり、通信効率が改善されるか疑問点が残る。

TODO

• 作業項目のあげだし