リアルタイム性が求められる通知やモニタリング系のWebアプリにおいて、クライアントからサーバーへ一方通行で継続的にデータを送信できるSSE（Server-Sent Events）は、実装がシンプルかつ高パフォーマンスな選択肢です。この記事では、Vue.jsでSSEを使ってリアルタイム通知を表示する方法を解説します。
SSEとは
SSEは、HTTP接続を通じてサーバーからクライアントに継続的にデータを送信する仕組みであり、次のような特徴があります：
- クライアントからのリクエストは最初の1回のみ
- WebSocketより簡易でHTTPベース
- ブラウザ標準API
EventSourceを使用
バックエンド（例：Node.js / Express）側のSSEエンドポイント
const express = require('express')
const app = express()
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream')
res.setHeader('Cache-Control', 'no-cache')
res.setHeader('Connection', 'keep-alive')
const sendEvent = () => {
const timestamp = new Date().toLocaleTimeString()
res.write(`data: 通知を受信しました（${timestamp}）\n\n`)
}
const interval = setInterval(sendEvent, 5000)
req.on('close', () => {
clearInterval(interval)
res.end()
})
})
app.listen(3000, () => {
console.log('SSEサーバー起動中 http://localhost:3000/events')
})
Vue側でEventSourceを使って接続
<template>
<div>
<h2>リアルタイム通知</h2>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const messages = ref([])
let eventSource = null
onMounted(() => {
eventSource = new EventSource('http://localhost:3000/events')
eventSource.onmessage = (event) => {
messages.value.unshift(event.data)
}
eventSource.onerror = () => {
console.error('SSE 接続エラー')
eventSource.close()
}
})
onUnmounted(() => {
if (eventSource) eventSource.close()
})
</script>
実行結果の例
5秒おきにサーバーから送信された通知が一覧としてVueコンポーネントに追加され、リアルタイムで画面が更新されます。
SSEのメリットと注意点
- HTTP/1.1で動作し、WebSocketほどの初期設定が不要
- 双方向通信は不可（クライアント → サーバー通信が必要なら別途実装）
- プロキシ環境や古いブラウザ（IE）での対応に注意
まとめ
Vue.jsとSSEを組み合わせれば、簡単にリアルタイム通知機能を実現できます。シンプルな構成でサーバーからの継続的な情報配信が可能なため、ダッシュボードや監視ツール、チャット通知などさまざまな用途に活用できます。WebSocketほどの柔軟性が不要なケースでは、まずはSSEから導入を検討してみましょう。
