Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

C598a4646a587f7a93fa088d6fd3ada4?s=128

Takamichi Aso

October 16, 2019
Tweet

More Decks by Takamichi Aso

Other Decks in Programming

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