コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > Vue.js > 本文

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

WBOY
リリース： 2023-06-27 17:44:51
オリジナル
1450 人が閲覧しました

近年、リアルタイム チャットとインスタント メッセージングは​​人々の日常生活や仕事に不可欠な部分になっています。ソーシャル メディア、チーム コラボレーション、カスタマー サービスのいずれであっても、それをサポートするにはリアルタイムのコミュニケーションが必要です。 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
ログイン後にコピー
  1. Socket.io を使用して接続を確立する

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

import io from 'socket.io-client'
const socket = io('http://localhost:3000')
ログイン後にコピー

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

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

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: {
  }
})
ログイン後にコピー

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

  1. 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 接続を初期化します。

  1. サーバー側での 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 サイトの他の関連記事を参照してください。

関連ラベル：
vue インスタントメッセージング ライブチャット
ソース：php.cn
前の記事：Vue でテーマの切り替えとスタイルのテーマ管理を実装するにはどうすればよいですか? 次の記事：Vue を使用して多言語化と国際化を実現するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テンプレートのメソッドで定義された変数の使用 Vue (v3 ではなく v2) を使用するのは初めてで、テンプレート内 (メソッド内で定義された) で変数を使用しようとしています。私の簡略化されたコード: <templa...
から 2024-04-06 18:10:25
0
2
513
ログインせずに Firebase を使用して Vue でユーザーを作成する ユーザープロフィールを作成するフォームを作成しました。しかし、ユーザーを作成するたびに問題が発生します。ログインおよびログアウトしたユーザー。この問題の解決にご協力ください。 co...
から 2024-04-06 14:20:12
0
1
514
Vue3 Webコンポーネントのプロダクションビルドの問題を解決する vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...
から 2024-04-06 12:43:37
0
1
473
vue vee-validate は日付ピッカーの選択の問題をキャプチャします datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...
から 2024-04-06 11:38:56
0
1
510
Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...
から 2024-04-06 11:35:59
0
1
456
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート