Vue.js + socket.io で簡単に実装できるリアルタイム更新処理 / Coral Developers Night #1

Transcript

1. Credit Engine, Inc. 2019/10/16 Vue.js + socket.io で
 簡単に実装できる
 リアルタイム更新処理
 麻生隆道
 1
2. Credit Engine, Inc. 2019/10/16 2 今日話す内容（言いたいこと）
 • 便利なライブラリを使って素早く開発しよう
 
 • ムチャ振りされたらチャンスですよ！
 
 • 後々のためにしっかりと設計しよう

3. Credit Engine, Inc. 2019/10/16 3 自己紹介
 クレジットエンジン株式会社
 麻生 隆道（あそう たかみち）
 
 たぶんフルスタックエンジニアやってます
 趣味はプログラミングで、
 最近はFlutter（iOS/Androidのアプリを同時に かけるやつ）にハマってます！
 
 前職は12年ほど組み込みエンジニアやってま したー

4. Credit Engine, Inc. 2019/10/16 • 日々メモリ破壊と戦う人たち
 
 • ログ・メモリダンプとお友達
 
 • デバッグに強い（たまにログ無しでデバッグとかも）
 
 モダンなライブラリとか使えない環境でツラい
 デバッグスキルだけが高くなっていったような気が・・・
 4 組み込みエンジニアってどんな人たち？（偏見含む）

5. Credit Engine, Inc. 2019/10/16 Credit Engine の紹介
 5 “かす”をかえる。“かりる”をかえる。
 ミッション
 中小事業者が融資を受ける際には
 様々な紙ベースの書類が必要であった
 
 オンラインで完結するので簡単に使え
 空いた時間で本来の事業に集中できる

6. Credit Engine, Inc. 2019/10/16 Credit Engine Platformの紹介
 6 ミッション実現のためLENDYで培ってきたノウハウを金融機関などに提供
 三菱UFJ銀行
 『Biz LENDING』
 みずほ銀行
 『みずほスマートビジネスローン』

7. Credit Engine, Inc. 2019/10/16 Credit Engine Platformをバージョンアップ
 提供先に合わせて簡単にカスタマイズし
 素早くサービスを提供できるように構成を見直した
 7
8. Credit Engine, Inc. 2019/10/16 アプリケーション構成
 8 サーバ エンド
 ユーザー画面
 オペレーター
 画面

9. Credit Engine, Inc. 2019/10/16 複数ユーザーで編集するんでロック機能がほしいよね！ ロック機能なんでリアルタイム更新でよろしくー 
 
 やったことないけどやっちゃいますかー！ （マジか！ムチャ振りが来たよ！でもチャンスだしやるかー）
 9 9 要求もいろいろとでてきますよね・・・

10. Credit Engine, Inc. 2019/10/16 ロック機構の話
 オペレーターが編集しているときに、他のオペレーターに編集中の通知を出してさわれ ないようにする機能です！（あたりまえ？）
 10 自分が編集中
 他人が編集中

11. Credit Engine, Inc. 2019/10/16 どうやって実現するか？
 最初は Django Channels で WebSocketやろうかと思ったけど
 
 socket.ioの方が以下のようなことができて良さげでした！
 • WebSocket と LongPolling を自動で切り替えてくれるので WebSocketに制限のある環境でも使える
 • 再接続などもライブラリ側でやってくれるので簡単に使える
 
 11
12. Credit Engine, Inc. 2019/10/16 ちなみにsocket.ioの表記はどれが正しいだろう？
 12 ロゴ：
 トップページ表記：
 ドキュメント：
 これが一番多そう？

13. Credit Engine, Inc. 2019/10/16 まずやったこと
 公式ページの Get Started を見て徐に git pull してサンプルを動かしてみる
 約1時間位でサンプル動作確認＆ドキュメント内容を理解する
 
 13
14. Credit Engine, Inc. 2019/10/16 あとは実装するだけ（こんな感じです）
 クライアント側（16行）
 14 var app = require('express')() var http = require('http').Server(app) var io = require('socket.io')(http, { path: '/pathto/socket.io' }) var axios = require('axios') const SERVER_PORT = process.env.SERVER_PORT io.on('connection', socket => { socket.on('event', msg => { console.log('event: ' + msg) io.emit('event', msg) }) }) http.listen(SERVER_PORT, () => { console.log('Socket.IO on *:' + SERVER_PORT) }) import io from 'socket.io-client' var socket = io({ path: '/pathto/socket.io', query: { token: token } }) socket.on('event', message => { let event = JSON.parse(message) switch (event.name) { case 'lock': // ロック時の処理 break case 'unlock': // ロック開放時の処理 break } }) function sendEvent (payload) { socket.emit('event', JSON.stringify(payload)) } サーバ側（14行） ※socket.io部分以外は省略しました

15. Credit Engine, Inc. 2019/10/16 APIサーバと分かれてしまうので認証がない・・・
 認証用のミドルウェアをサーバ側に追加
 15 const AUTH_URL = process.env.AUTH_URL io.use((socket, next) => { let token = socket.handshake.query.token; console.log('token: ' + token) axios.post(AUTH_URL, { token: token }, { withCredentials: true }).then(() => { console.log('Authentication success') next() }).catch(() => { console.log('Authentication error') next(new Error('Authentication error')) }) }) API サーバ オペレーター画 面
 socket.io

16. Credit Engine, Inc. 2019/10/16 エンドポイントの場所を変えたいなー
 サンプルだとポートは指定できるが、エンドポ イントがルートに置かれてしまう
 
 
 ドキュメントを読んだら、path 指定ができそう だったので、やってみたらできた（先程のコード には反映済み）
 https://socket.io/docs/server-api/
 16
17. Credit Engine, Inc. 2019/10/16 socket.ioが死んでも大丈夫
 17 API サーバ オペレーター画 面
 socket.io
 socket.io のサーバは通知の機能だけに専念
 API サーバ オペレーター画 面
 socket.io
 止まってもロック機能自体は問題なく動く

18. Credit Engine, Inc. 2019/10/16 アトミックデザインなのでUIの実装も簡単でした
 ロック表示の部分がテンプレートになっていて実装して元のデザインに追加するだけ
 
 
 リスト表示の作業者アバターも実装しています
 18
19. Credit Engine, Inc. 2019/10/16 リアルタイム更新よりもムズいロック解除
 実は実装した後に地獄が待っていた！
 19 ロック解除のパターン
 • 更新ボタン
 • キャンセルボタン
 • ページ遷移
 • ログアウト
 • ウィンドウクローズ
 

20. Credit Engine, Inc. 2019/10/16 これから実装する機能
 チャット機能　→　マジでがんばる！
 
 各種通知　→　仕組みはできたので、仕様が決まれば簡単
 
 Multi-AZ対応　→　socket.io-redisを使えば良いらしい
 20
21. Credit Engine, Inc. 2019/10/16 21 今日話した内容（言いたかったこと）
 • 便利なライブラリを使って素早く開発しよう
 
 • ムチャ振りされたらチャンスですよ！
 
 • 後々のためにしっかりと設計しよう

22. Credit Engine, Inc. 2019/10/16 フロントエンドエンジニア募集中です
 私達と一緒にオンラインレンディングのスタンダードとなるような仕 組みを作ってくれる、フロントエンドエンジニアを募集しています！
 22
23. Credit Engine, Inc. 2019/10/16 Vue.jsもくもく会やります
 フロントエンドエンジニア同士が、ゆるく繋がれる場を用意したいなー と思いまして、Vue.jsもくもく会をやってみることになりました！
 経験がないので至らない部分も
 ありますがぜひご参加くださいー
 23 https://cucchaberiengine.connpass.com/event/151502/
24. Credit Engine, Inc. 2019/10/16 appendix : Flutterやろうぜ！
 FlutterはGoogleが作ったモバイルアプリケーションフレームワーク で、iOS/Androidのアプリを同時に作れます！
 最近はWebアプリも作れるらしい。
 言語はDart、ライブラリは基本的に公式のものが多い。
 
 24
25. Credit Engine, Inc. 2019/10/16 ここが良いよね！Flutter
 • ホットリロードが便利でめちゃ早い
 • ネイティブにコンパイルした後の動作が早い（らしい）
 • UIもDartで書くのでプログラマ的には書きやすい
 
 Dart言語はスクリプト言語としても動くのでホットリロードもできる が、コンパイル言語の側面もあるのでネイティブにすると早いらしい
 25
26. Credit Engine, Inc. 2019/10/16 こんなの作ってます
 先程紹介したCredit Engine Platformのアプリ版をひっそりと作っ ています
 26