rabbit-slide-znz-rubykansai87-chat 2019.07.13

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e3502a838bc6b0fab641a72b2d7a2d5ab4a074f499ab331b5e5b07d7de65bbb6
+  data.tar.gz: fa4d4557b748fde5b79e8edcca4dc13984e7c3780caebfe645faf55c948610d6
+SHA512:
+  metadata.gz: '0822cc4fd79333d3d25e2806ea78c25c831d6e37d593b7533cf7099d99a479a85523bcdd45289c82cb9f6871359919123e2ad0b0d4ef0d122f3e8237b7a6b24c'
+  data.tar.gz: d1a9e4519e5ab20a56815f9ae980e11e459666dfed58fb1beaf148179a18a91094327eef7ffa1621fc519e8b8040aedf6d86f5aacc4527b70b922381a3652728

data/.rabbit

@@ -0,0 +1 @@
+actioncable-chat.md

data/README.md

@@ -0,0 +1,23 @@
+# Action Cableで簡易チャットを作ってみた
+
+第87回 Ruby関西 勉強会での発表資料です。
+
+## For author
+
+### Show
+
+    rake
+
+### Publish
+
+    rake publish
+
+## For viewers
+
+### Install
+
+    gem install rabbit-slide-znz-rubykansai87-chat
+
+### Show
+
+    rabbit rabbit-slide-znz-rubykansai87-chat.gem

data/README.md~

@@ -0,0 +1,24 @@
+# Action Cableで簡易チャットを作ってみた
+
+TODO: SLIDE DESCRIPTION
+
+## For author
+
+### Show
+
+    rake
+
+### Publish
+
+    rake publish
+
+## For viewers
+
+### Install
+
+    gem install rabbit-slide-znz-rubykansai87-chat
+
+### Show
+
+    rabbit rabbit-slide-znz-rubykansai87-chat.gem
+

data/Rakefile

@@ -0,0 +1,17 @@
+require "rabbit/task/slide"
+
+# Edit ./config.yaml to customize meta data
+
+spec = nil
+Rabbit::Task::Slide.new do |task|
+  spec = task.spec
+  # spec.files += Dir.glob("doc/**/*.*")
+  # spec.files -= Dir.glob("private/**/*.*")
+  # spec.add_runtime_dependency("YOUR THEME")
+end
+
+desc "Tag #{spec.version}"
+task :tag do
+  sh("git", "tag", "-a", spec.version.to_s, "-m", "Publish #{spec.version}")
+  sh("git", "push", "--tags")
+end

data/actioncable-chat.md

@@ -0,0 +1,222 @@
+# Action Cableで簡易チャットを作ってみた
+
+author
+:   Kazuhiro NISHIYAMA
+
+content-source
+:   第87回 Ruby関西 勉強会
+
+date
+:   2019/07/13
+
+institution
+:   株式会社Ruby開発
+
+allotted-time
+:   30m
+
+theme
+:   lightning-simple
+
+# 自己紹介
+
+- 西山 和広
+- Ruby のコミッター
+- twitter, github など: @znz
+- 株式会社Ruby開発 www.ruby-dev.jp
+
+# 目的
+
+- Ruby 関西中継が止まっていた
+  - USTREAM も終了
+- 外部サーバーに保存せずにユーザー登録などなく視聴可能なライブ配信のみしたい
+- できればチャットもあると良いかも
+  → Ruby 勉強会なので Rails で
+
+# ライブ配信
+
+- YouTube Live
+  - 必ず保存されそう (公開するかどうかは選べそう)
+  - スマホからの配信はチャンネル登録ユーザー数が増えないとできない
+- その他のサービス
+  - 視聴にアカウントが必要だったり
+  - サービスの主な用途がゲーム配信だったり
+
+# nginx-rtmp-module
+
+- 自前ライブ配信サーバが作成可能
+- 録画を残すかどうかも設定次第
+- HLS + video.js で視聴可能
+  - 試したブラウザー全てで視聴可能
+  - Windows, macOS, iOS, Android
+  - (Linux は未確認)
+
+# チャット
+
+- ライブ配信へのコメント機能
+- 何を使っても良いのなら Firebase が楽そうだった
+- Ruby 勉強会なので Action Cable を使ってみることに
+
+# なぜ Rails 6?
+
+- 6.0.0.rc1 なので正式リリースとあまり変わらないはず
+- サンプル的にできるだけデフォルト構成でシンプルに作りたい
+- デフォルトが CoffeeScript ではない
+  - 新規で採用する理由はあまりない
+
+# View の選択
+
+使ってみたかったから
+
+- React (redux なし)
+- material-ui 4
+
+# 環境構築
+
+- `gem install rails --pre`
+- `yarn` も入れておく
+
+# rails new
+
+- `rails new chat-$(date +%Y%m%d) --webpack=react`
+- または `rails new` の後で `bin/rails webpacker:install:react`
+  - `yarn` を入れ忘れていたら、後から `webpacker:install`
+
+# 埋め込むページ作成
+
+- `rails g controller pages index`
+- routes 変更:
+  `root to: 'pages#index'`
+- `app/views/pages/index.html.erb`
+  に React の呼び出し埋め込み
+  `<%= javascript_pack_tag 'hello_react' %>`
+
+# channel 作成
+
+- `rails g channel chat`
+- `ChatChannel` クラスができる
+- `rails g controller` と同様に
+  `rails g channel chat speak`
+  などでメソッドも生成可能
+
+# 送受信テスト準備 (Rails 側)
+
+- `ChatChannel` に `def receive(data)` を追加
+  `ActionCable.server.broadcast('chat_channel', data)`
+- `subscribed` で
+  `stream_from 'chat_channel'`
+
+# 送受信テスト準備 (JS 側)
+
+- `chat_channel.js` の `received(data)` に `console.log(data);`
+- JavaScript console から `send` で送信して確認
+
+# 微調整
+
+- 送信時刻追加
+- ダミーの id 追加 (あとで Active Record の id に置き換え)
+- material-ui で入力欄追加
+- faker を使ってランダムなデフォルトの名前を設定
+
+# アイコン表示
+
+- gravatar でアイコン表示
+- サーバー側でしかわからない送信元 IP アドレスも使って、同じ名前でも同じアイコンにならないように
+
+# モデルなどを作成
+
+- `rails g model message name body sent_at:timestamp`
+- `rails g job MessageBroadcast`
+- broadcast を job 経由に
+  - はっきりとした説明を見つけられなかったが、アプリケーションサーバーが複数台になった時に received で broadcast せずに job を経由する必要がありそう
+
+# 最近のメッセージ表示
+
+- `hidden_field_tag` で `to_json` した文字列を埋め込み
+   - `JSON.parse(document.getElementById('recent_messages').value)` で取り出し
+- ちゃんとエスケープされる方法を選択
+- あまり良い方法ではないが、開発速度重視
+
+# 最近の基準
+
+- 1時間以内
+- 50件まで
+- リロードするとここまでになる
+- 開きっぱなしなら無制限に追加していく
+
+# 送信中メッセージ表示
+
+- 空欄アイコンで表示
+- 空欄じゃないアイコンに変わったら受信完了
+
+# 微調整
+
+- 入力欄が空欄の時は送信ボタンを無効化
+- IP アドレスとリクエスト ID も保存 → アイコンに反映
+
+# デプロイ
+
+- VPS のサーバーにデプロイ
+
+# production で動かない
+
+- `Uncaught TypeError: r is not a function`
+  で動かない
+- https://github.com/rails/rails/issues/35501
+  に同じ現象が書いてあったが未解決
+- 動かすことを優先して development で動かすことに
+
+# 動画埋め込み
+
+- 単独 HTML ファイルで試していた video.js 埋め込み
+
+# config.hosts 設定
+
+- development 環境を localhost 以外で使うため `config.hosts` 設定
+
+# nginx 設定
+
+- 普通の reverse proxy 設定
+- WebSocket も proxy するように設定
+- dehydrated で letsencrypt の証明書を発行して https 設定
+- 本題ではないので詳細は省略
+
+# Cloudflare 設定
+
+- Full (Strict)
+  - チャットは完全暗号化
+  - ライブ配信の視聴も完全暗号化
+- wss (暗号化ありの WebSocket) も問題なく通る
+
+# trusted_proxies 設定
+
+- Cloudflare 経由にすると `remote_ip` が取れなくなったので
+  `config.action_dispatch.trusted_proxies`
+  を設定
+- https://www.cloudflare.com/ips/
+  - https://www.cloudflare.com/ips-v4
+  - https://www.cloudflare.com/ips-v6
+
+# 微調整
+
+- favicon 設定
+- title 設定
+
+# WireGuard
+
+- WireGuard とは
+  - 高速軽量な VPN
+  - まだ本番運用には適さない
+- ライブ配信の送信側を暗号化するのに利用
+- 本題ではないので詳細は省略
+
+# さらに機能追加
+
+- 接続しているユーザー一覧アイコン表示
+- reload video ボタン追加
+
+# まとめ
+
+- Action Cable で簡単にリアルタイム通信が作成可能
+- 環境構築はちょっと面倒 (yarn が必須など)
+- 本番環境で使うには WebSocket が必須などちょっと制限あり

data/config.yaml

@@ -0,0 +1,20 @@
+---
+id: rubykansai87-chat
+base_name: actioncable-chat
+tags:
+- ruby
+presentation_date: 2019/07/13
+version: 2019.07.13
+licenses: []
+slideshare_id:
+speaker_deck_id:
+ustream_id:
+vimeo_id:
+youtube_id:
+author:
+  markup_language: :markdown
+  name: Kazuhiro NISHIYAMA
+  email: zn@mbf.nifty.com
+  rubygems_user: znz
+  slideshare_user: znzjp
+  speaker_deck_user: znz

metadata

@@ -0,0 +1,63 @@
+--- !ruby/object:Gem::Specification
+name: rabbit-slide-znz-rubykansai87-chat
+version: !ruby/object:Gem::Version
+  version: 2019.07.13
+platform: ruby
+authors:
+- Kazuhiro NISHIYAMA
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-07-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rabbit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.0.2
+description: 第87回 Ruby関西 勉強会での発表資料です。
+email:
+- zn@mbf.nifty.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rabbit"
+- README.md
+- README.md~
+- Rakefile
+- actioncable-chat.md
+- config.yaml
+- pdf/rubykansai87-chat-actioncable-chat.pdf
+homepage: http://slide.rabbit-shocker.org/authors/znz/rubykansai87-chat/
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key: 
+specification_version: 4
+summary: Action Cableで簡易チャットを作ってみた
+test_files: []