Vue を使用してリアルタイム チャットおよびインスタント メッセージング アプリケーションを構築するにはどうすればよいですか?

近年、リアルタイム チャットとインスタント メッセージングは​​人々の日常生活や仕事に不可欠な部分になっています。ソーシャル メディア、チーム コラボレーション、カスタマー サービスのいずれであっても、それをサポートするにはリアルタイムのコミュニケーションが必要です。 Vue.js は、リアルタイム チャットおよびインスタント メッセージング アプリケーションの構築に適した JavaScript フレームワークです。この記事では、Vue を使用してリアルタイム チャットおよびインスタント メッセージング アプリケーションを構築する方法を紹介します。

1. Vue と Socket の概要.io

Vue は人気のある JavaScript フレームワークであり、開発者が DOM 操作とデータ バインディングをより簡単に処理できるようにする応答性の高いフレームワークです。 MVC フレームワークとして、Vue は非常に高い適応性、効率性、パワーを備えているため、シングルページ アプリケーションで非常に優れたパフォーマンスを発揮します。 Socket.io は、WebSocket に基づいてクライアントとサーバーにリアルタイムの双方向のイベント駆動型通信を提供するツールです。

2. Vue と Socket.io の組み合わせ

リアルタイム チャットおよびインスタント メッセージング アプリケーションを構築するには、Vue と Socket.io の組み合わせが必要です。 Vue では、vuex を通じてライブ チャットやインスタント メッセージング アプリケーションのステータスを管理できます。 Vuex を使用して、ユーザー情報、セッション情報、メッセージ、通知、その他の関連データを管理できます。 Socket.io では、これを使用してリアルタイム通信メカニズムを実装できます。

1. Vue と Socket.io のインストール

Vue と Socket.io をインストールするには、コマンド ライン ツールで次のコマンドを入力する必要があります:

npm install --save vue
npm install --save socket.io-client

2. Socket.io を使用して接続を確立する

Socket.io を使用して接続を確立するには、クライアントにソケット.io-client モジュールを導入する必要があります:

import io from 'socket.io-client'
const socket = io('http://localhost:3000')

Inこの例では、という名前のソケットを確立し、ローカル ホスト (localhost) のポート 3000 に接続します。次に、Vue コンポーネントでこのソケットを使用して、イベントをリッスンして発行できます。

3. イベントのリッスンと送信

Vue コンポーネントでは、$socket 変数を使用して、socket.io-client インスタンスを導入できます。以下に示すように:

mounted() {
  this.$socket.on('connect', () => {
    console.log('Connected to server!')
  })
}

この例では、コンポーネントがマウントされた直後に接続イベントをリッスンし、接続が成功するとコンソールにメッセージが表示されます。

ソケットの Emit メソッドを使用してイベントを送信することもできます。以下に示すように:

methods: {
  sendMessage() {
    this.$socket.emit('message', this.message)
  }
}

この例では、sendMessage メソッドを定義し、$socket.emit を使用して message という名前のイベントをサーバーに送信します。

3. Vue と Socket.io を使用したリアルタイム チャットとインスタント メッセージング アプリケーションの構築の実装

Vue と Socket.io を使用してリアルタイム チャットとインスタント メッセージングを構築できます応用。

1. Vuex ストアの作成

Vuex ストアは、ユーザー情報、セッション情報、メッセージ、通知の保存に使用されます。次のコードを使用して Vuex ストアを作成できます:

import Vue from 'vue'
import Vuex from 'vuex'
import io from 'socket.io-client'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      id: null,
      name: null
    },
    rooms: [],
    activeRoomId: null,
    messages: []
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setRooms(state, rooms) {
      state.rooms = rooms
    },
    setActiveRoomId(state, roomId) {
      state.activeRoomId = roomId
    },
    addMessage(state, message) {
      state.messages.push(message)
    },
    clearMessages(state) {
      state.messages = []
    }
  },
  actions: {
    connect({ commit, dispatch }) {
      const socket = io('http://localhost:3000')

      socket.on('connect', () => {
        console.log('Connected to server!')
      })

      socket.on('user', (user) => {
        commit('setUser', user)
      })

      socket.on('rooms', (rooms) => {
        commit('setRooms', rooms)
      })

      socket.on('activeRoomId', (roomId) => {
        commit('setActiveRoomId', roomId)
      })

      socket.on('message', (message) => {
        commit('addMessage', message)
      })

      socket.on('clearMessages', () => {
        commit('clearMessages')
      })

      socket.on('disconnect', () => {
        console.log('Disconnected from server!')
      })
    },
    sendMessage({ state }, message) {
      const socket = io('http://localhost:3000')

      const payload = {
        roomId: state.activeRoomId,
        message
      }

      socket.emit('message', payload)
    }
  },
  modules: {
  }
})

この例では、初期状態、ユーザー情報、セッション情報、メッセージと通知などを定義します。ユーザー情報、セッション情報、メッセージ、通知、その他の関連状態を操作するための一連のミューテーションとアクションを定義しました。

2. Vue コンポーネントの作成

Vue.js と Vuex Store を使用して Chat コンポーネントを作成できます。

<template>
  <div class="chat">
    <div class="chat__user">
      <h2>{{ user.name }}</h2>
    </div>
    <div class="chat__rooms">
      <ul>
        <li v-for="room in rooms" :key="room.id" @click="selectRoom(room.id)">
          {{ room.name }}
        </li>
      </ul>
    </div>
    <div class="chat__messages">
      <ul>
        <li v-for="message in messages" :key="message.id">
          {{ message.text }}
        </li>
      </ul>
    </div>
    <div class="chat__input">
      <input type="text" v-model="message">
      <button @click="sendMessage()">Send</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Chat',
  computed: {
    ...mapState(['user', 'rooms', 'activeRoomId', 'messages']),
  },
  methods: {
    ...mapActions(['connect', 'sendMessage', 'selectRoom']),
  },
  mounted() {
    this.connect()
  }
}
</script>

このコンポーネントでは、v-for コマンドを使用してループ内のルームとメッセージをバインドし、v-model コマンドを使用して入力ボックスをバインドし、@click コマンドを使用して送信ボタンをバインドします。また、mapState 関数と mapActions 関数を使用して、ストア内の状態とアクションをコンポーネントの計算されたプロパティとメソッドにマップします。コンポーネントをマウントするときに、connect メソッドを呼び出して Socket.io 接続を初期化します。

3. サーバー側での Socket.io の実装

Vue アプリケーションで使用するために、サーバー側で Socket.io を実装する必要もあります。次のコードを使用してサーバーを作成します。

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

const PORT = 3000

http.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`)
})

let users = []
let rooms = []

io.on('connection', (socket) => {
  console.log('Client connected!', socket.id)

  socket.on('verifyUser', (user) => {
    console.log('Verifying user', user)

    const authenticatedUser = {
      id: socket.id,
      name: 'Mike'
    }

    socket.emit('user', authenticatedUser)
  })

  socket.on('getRooms', () => {
    socket.emit('rooms', rooms)
  })

  socket.on('selectRoom', (roomId) => {
    socket.join(roomId)
    socket.emit('activeRoomId', roomId)
    socket.emit('clearMessages')

    const room = rooms.find(room => room.id === roomId)
    socket.emit('messages', room.messages)
  })

  socket.on('message', (payload) => {
    const room = rooms.find(room => room.id === payload.roomId)

    const message = {
      id: Date.now(),
      text: payload.message
    }

    room.messages.push(message)

    io.in(payload.roomId).emit('message', message)
  })

  socket.on('disconnect', () => {
    console.log('Client disconnected!', socket.id)
  })
})

rooms.push({
  id: '1',
  name: 'Room 1',
  messages: []
})

rooms.push({
  id: '2',
  name: 'Room 2',
  messages: []
})

この例では、Socket.io を使用して HTTP サーバーを作成し、サーバー上の接続イベントをリッスンします。 verifyUser、getRooms、selectRoom、message などのさまざまな Socket.io イベントを定義しました。

初期ルームとユーザーもいくつか追加しました。サーバーに接続するクライアントごとに接続メッセージが出力され、クライアントの切断イベントごとにメッセージが記録されます。 selectRoom イベントでは、socket.join メソッドを使用して、メッセージを送信するルームにクライアントを追加します。最後に、Rooms 配列を使用してすべてのルームのデータを保存し、コンポーネントの selectRoom メソッドを使用して参加するルームを選択します。

4. 結論

Vue と Socket.io を組み合わせて使用​​すると、高パフォーマンスでリアルタイムに接続されたチャットおよびインスタント メッセージング アプリケーションを簡単に構築できます。データの時間的性質が大幅に向上し、ユーザー エクスペリエンスとデータ処理効率が向上します。 Vue と Socket.io の最適化により、開発をより迅速に開始し、バージョンを迅速に反復できるようになり、データのリアルタイム性と安定性がより確実に保証されます。

以上がVue を使用してリアルタイム チャットおよびインスタント メッセージング アプリケーションを構築するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。