Slide 1
Slide 1 text
Credit Engine, Inc.
2019/10/16
Vue.js + socket.io で
簡単に実装できる
リアルタイム更新処理
麻生隆道
1
Slide 2
Slide 2 text
Credit Engine, Inc.
2019/10/16 2
今日話す内容（言いたいこと）
• 便利なライブラリを使って素早く開発しよう
• ムチャ振りされたらチャンスですよ！
• 後々のためにしっかりと設計しよう
Slide 3
Slide 3 text
Credit Engine, Inc.
2019/10/16 3
自己紹介
クレジットエンジン株式会社
麻生 隆道（あそう たかみち）
たぶんフルスタックエンジニアやってます
趣味はプログラミングで、
最近はFlutter（iOS/Androidのアプリを同時に
かけるやつ）にハマってます！
前職は12年ほど組み込みエンジニアやってま
したー
Slide 4
Slide 4 text
Credit Engine, Inc.
2019/10/16
• 日々メモリ破壊と戦う人たち
• ログ・メモリダンプとお友達
• デバッグに強い（たまにログ無しでデバッグとかも）
モダンなライブラリとか使えない環境でツラい
デバッグスキルだけが高くなっていったような気が・・・
4
組み込みエンジニアってどんな人たち？（偏見含む）
Slide 5
Slide 5 text
Credit Engine, Inc.
2019/10/16
Credit Engine の紹介
5
“かす”をかえる。“かりる”をかえる。
ミッション
中小事業者が融資を受ける際には
様々な紙ベースの書類が必要であった
オンラインで完結するので簡単に使え
空いた時間で本来の事業に集中できる
Slide 6
Slide 6 text
Credit Engine, Inc.
2019/10/16
Credit Engine Platformの紹介
6
ミッション実現のためLENDYで培ってきたノウハウを金融機関などに提供
三菱UFJ銀行
『Biz LENDING』
みずほ銀行
『みずほスマートビジネスローン』
Slide 7
Slide 7 text
Credit Engine, Inc.
2019/10/16
Credit Engine Platformをバージョンアップ
提供先に合わせて簡単にカスタマイズし
素早くサービスを提供できるように構成を見直した
7
Slide 8
Slide 8 text
Credit Engine, Inc.
2019/10/16
アプリケーション構成
8
サーバ
エンド
ユーザー画面
オペレーター
画面
Slide 9
Slide 9 text
Credit Engine, Inc.
2019/10/16
複数ユーザーで編集するんでロック機能がほしいよね！
ロック機能なんでリアルタイム更新でよろしくー
やったことないけどやっちゃいますかー！
（マジか！ムチャ振りが来たよ！でもチャンスだしやるかー）
9
9
要求もいろいろとでてきますよね・・・
Slide 10
Slide 10 text
Credit Engine, Inc.
2019/10/16
ロック機構の話
オペレーターが編集しているときに、他のオペレーターに編集中の通知を出してさわれ
ないようにする機能です！（あたりまえ？）
10
自分が編集中
他人が編集中
Slide 11
Slide 11 text
Credit Engine, Inc.
2019/10/16
どうやって実現するか？
最初は Django Channels で WebSocketやろうかと思ったけど
socket.ioの方が以下のようなことができて良さげでした！
• WebSocket と LongPolling を自動で切り替えてくれるので
WebSocketに制限のある環境でも使える
• 再接続などもライブラリ側でやってくれるので簡単に使える
11
Slide 12
Slide 12 text
Credit Engine, Inc.
2019/10/16
ちなみにsocket.ioの表記はどれが正しいだろう？
12
ロゴ：
トップページ表記：
ドキュメント：
これが一番多そう？
Slide 13
Slide 13 text
Credit Engine, Inc.
2019/10/16
まずやったこと
公式ページの Get Started を見て徐に git pull してサンプルを動かしてみる
約1時間位でサンプル動作確認＆ドキュメント内容を理解する
13
Slide 14
Slide 14 text
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部分以外は省略しました
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
Credit Engine, Inc.
2019/10/16
エンドポイントの場所を変えたいなー
サンプルだとポートは指定できるが、エンドポ
イントがルートに置かれてしまう
ドキュメントを読んだら、path 指定ができそう
だったので、やってみたらできた（先程のコード
には反映済み）
https://socket.io/docs/server-api/
16
Slide 17
Slide 17 text
Credit Engine, Inc.
2019/10/16
socket.ioが死んでも大丈夫
17
API
サーバ
オペレーター画
面
socket.io
socket.io のサーバは通知の機能だけに専念
API
サーバ
オペレーター画
面
socket.io
止まってもロック機能自体は問題なく動く
Slide 18
Slide 18 text
Credit Engine, Inc.
2019/10/16
アトミックデザインなのでUIの実装も簡単でした
ロック表示の部分がテンプレートになっていて実装して元のデザインに追加するだけ
リスト表示の作業者アバターも実装しています
18
Slide 19
Slide 19 text
Credit Engine, Inc.
2019/10/16
リアルタイム更新よりもムズいロック解除
実は実装した後に地獄が待っていた！
19
ロック解除のパターン
• 更新ボタン
• キャンセルボタン
• ページ遷移
• ログアウト
• ウィンドウクローズ
Slide 20
Slide 20 text
Credit Engine, Inc.
2019/10/16
これから実装する機能
チャット機能 → マジでがんばる！
各種通知 → 仕組みはできたので、仕様が決まれば簡単
Multi-AZ対応 → socket.io-redisを使えば良いらしい
20
Slide 21
Slide 21 text
Credit Engine, Inc.
2019/10/16 21
今日話した内容（言いたかったこと）
• 便利なライブラリを使って素早く開発しよう
• ムチャ振りされたらチャンスですよ！
• 後々のためにしっかりと設計しよう
Slide 22
Slide 22 text
Credit Engine, Inc.
2019/10/16
フロントエンドエンジニア募集中です
私達と一緒にオンラインレンディングのスタンダードとなるような仕
組みを作ってくれる、フロントエンドエンジニアを募集しています！
22
Slide 23
Slide 23 text
Credit Engine, Inc.
2019/10/16
Vue.jsもくもく会やります
フロントエンドエンジニア同士が、ゆるく繋がれる場を用意したいなー
と思いまして、Vue.jsもくもく会をやってみることになりました！
経験がないので至らない部分も
ありますがぜひご参加くださいー
23
https://cucchaberiengine.connpass.com/event/151502/
Slide 24
Slide 24 text
Credit Engine, Inc.
2019/10/16
appendix : Flutterやろうぜ！
FlutterはGoogleが作ったモバイルアプリケーションフレームワーク
で、iOS/Androidのアプリを同時に作れます！
最近はWebアプリも作れるらしい。
言語はDart、ライブラリは基本的に公式のものが多い。
24
Slide 25
Slide 25 text
Credit Engine, Inc.
2019/10/16
ここが良いよね！Flutter
• ホットリロードが便利でめちゃ早い
• ネイティブにコンパイルした後の動作が早い（らしい）
• UIもDartで書くのでプログラマ的には書きやすい
Dart言語はスクリプト言語としても動くのでホットリロードもできる
が、コンパイル言語の側面もあるのでネイティブにすると早いらしい
25
Slide 26
Slide 26 text
Credit Engine, Inc.
2019/10/16
こんなの作ってます
先程紹介したCredit Engine Platformのアプリ版をひっそりと作っ
ています
26