Vue.jsでのリアルタイムデータを扱うためのWebSocketの活用

作成日 2025.02.14
Vue.js
Vue.js

Vue.jsとWebSocketを組み合わせることで、リアルタイムデータの双方向通信が可能になり、動的でインタラクティブなアプリケーションを構築できます。この記事では、WebSocketをVue.jsに統合し、効率的にリアルタイムデータを管理する方法を詳細に解説します。

1. WebSocketとは何か
2. WebSocketとVue.jsの連携
3. WebSocket接続の管理
4. データのリアルタイム更新
5. エラーハンドリング
6. 再接続の実装
7. Vuexとの統合
8. コンポーネント間のデータ共有
9. サーバーへのメッセージ送信
10. Vue 3のComposition APIとの連携
11. リアルタイムチャットアプリの構築
12. セキュリティの考慮
13. デバッグとパフォーマンスチューニング
14. まとめ

WebSocketとは何か

WebSocketは双方向通信を可能にするプロトコルで、HTTPとは異なり接続が維持され、リアルタイムにデータを送受信できます。

WebSocketとVue.jsの連携

Vue.jsでWebSocketを使用するには、ブラウザのWebSocketオブジェクトを活用します。

const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
  console.log('WebSocket接続が確立されました');
};
socket.onmessage = (event) => {
  console.log('受信データ:', event.data);
};

WebSocket接続の管理

WebSocketの接続状態をVue.jsのライフサイクルフックで管理します。

export default {
  data() {
    return { socket: null };
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:8080');
  },
  beforeUnmount() {
    if (this.socket) {
      this.socket.close();
    }
  }
};

データのリアルタイム更新

サーバーから受信したデータをリアルタイムに画面に反映させます。

data() {
  return {
    messages: []
  };
},
mounted() {
  this.socket = new WebSocket('ws://localhost:8080');
  this.socket.onmessage = (event) => {
    this.messages.push(event.data);
  };
}

エラーハンドリング

WebSocket通信中にエラーが発生した場合の処理を追加します。

this.socket.onerror = (error) => {
  console.error('WebSocketエラー:', error);
};

再接続の実装

WebSocket接続が切れた場合、自動的に再接続する機能を追加します。

methods: {
  connect() {
    this.socket = new WebSocket('ws://localhost:8080');
    this.socket.onclose = () => {
      setTimeout(() => {
        this.connect();
      }, 3000);
    };
  }
},
mounted() {
  this.connect();
}

Vuexとの統合

WebSocketデータをVuexストアで管理し、全体の状態を一元化します。

// store.js
state: {
  messages: []
},
mutations: {
  ADD_MESSAGE(state, message) {
    state.messages.push(message);
  }
}

コンポーネント間のデータ共有

WebSocketデータを複数のコンポーネント間で共有します。

computed: {
  messages() {
    return this.$store.state.messages;
  }
}

サーバーへのメッセージ送信

クライアント側からサーバーへデータを送信する方法です。

methods: {
  sendMessage() {
    this.socket.send('Hello, Server!');
  }
}

Vue 3のComposition APIとの連携

Composition APIを使用してWebSocket機能を再利用可能な関数にまとめます。

import { ref, onMounted, onUnmounted } from 'vue';

export function useWebSocket(url) {
  const socket = ref(null);
  const messages = ref([]);

  onMounted(() => {
    socket.value = new WebSocket(url);
    socket.value.onmessage = (event) => {
      messages.value.push(event.data);
    };
  });

  onUnmounted(() => {
    if (socket.value) {
      socket.value.close();
    }
  });

  return { socket, messages };
}

リアルタイムチャットアプリの構築

WebSocketを使ったシンプルなチャットアプリを作成します。

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message">{{ message }}</li>
    </ul>
    <input v-model="newMessage" @keyup.enter="sendMessage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      messages: [],
      newMessage: ''
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:8080');
    this.socket.onmessage = (event) => {
      this.messages.push(event.data);
    };
  },
  methods: {
    sendMessage() {
      this.socket.send(this.newMessage);
      this.newMessage = '';
    }
  }
};
</script>