3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

North DetailAdvent Calendar 2020

Day 11

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

Last updated at Posted at 2020-12-10

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

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

Twitter APIを利用したTweets取得APIの結果を画面にリアルタイム反映してくれるアプリです。
こんな感じです。 ※ GIFではIDとツイート内容は非表示にしています。
画面収録-2020-12-06-22.53.10.gif
元々自動的にツイート取得しゴニョゴニョできないものかと思って試してみたものの一部を今回簡易的にまとめてみました。

環境

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の機能は2点です。
・Tweetsの返却(今回は使ってないです。)
・'post-tweets'を実行

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

まとめ

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

ソースコード

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?