Nuxt.jsのUniversalモードでSocket.IOを使ってみる #Nuxt

こんにちは。今年もこの季節がやってきました。
今年もNuxt.jsの話を書いてみます。

作成アプリケーションの概要

Twitter APIを利用したTweets取得APIの結果を画面にリアルタイム反映してくれるアプリです。
こんな感じです。 ※ GIFではIDとツイート内容は非表示にしています。

元々自動的にツイート取得しゴニョゴニョできないものかと思って試してみたものの一部を今回簡易的にまとめてみました。

環境

Nuxt.js 2.14.9
Socket.io 2.3.0
socket.io-client 2.3.1

前置

Socket.IO v3がリリースされていますが、この構成では動かなかったのでv2の場合の構成です。
本来の使い方ではない気がするのでネタだと思ってください。
試してみた上でまだ検証が必要な内容だと思いましたのでその点はご理解ください。

実装編

クライアント

pages/index.vue

<script>
import io from 'socket.io-client'
const socket = io(process.env.SOCKET)
export default {
  data() {
    return {
      tweets: []
    }
  },
  mounted() {
    socket.on('new-tweets', tweets => {
      this.tweets = tweets
    })
  }
}
</script>

イベント'new-tweets'を受け取れるようにします。これにより'new-tweets'が実行される度に画面がリアルタイムに更新されます。

Socket.IO

socket/index.js

const http = require('http')
const app = require('express')()
const server = http.createServer(app)
const io = require('socket.io')(server)

io.on('connection', socket => {
  console.log(`Socket ID: ${socket.id}を接続しました。`)

  socket.on('post-tweets', tweets => {
    socket.broadcast.emit('new-tweets', tweets)
    console.log(`新しいTweetsをクライアントへ送信しました。`)
  })
})

server.listen(4000)

'post-tweets'が実行された場合、送信元以外の接続済の全クライアントに対して'new-tweets'を実行するようにします。

Tweets取得API

リクエストの例

http://localhost:3000/api/tweets?query="クリスマス"

api/controllers/tweets.ts

import io from 'socket.io-client'
import services from '../services'
import config from '../../nuxt.config.js'

export default {
  async search(req: any, res: any) {
    const socket = io(config.env.SOCKET)
    const query: string = req.query.query
    const result = await services.tweets.search(query)
    socket.emit('post-tweets', result)
    res.status(200).json(result)
  }
}

Tweets取得APIの機能は２点です。
・Tweetsの返却（今回は使ってないです。）
・'post-tweets'を実行

主な実装は以上です。
リクエスト例を参考にAPIを実行することで画面がリアルタイム更新されると思います。
これにより目的の動作をすることを確認できました。

まとめ

動き自体は意図したものとなったものの正直怪しいためもう少し試してみたいと思います。

ソースコード

※もし試す場合は以下が必要となりますのでご注意ください。
・Twitter APIの利用申請
・.env.example -> .envへの変更