Bagaimana untuk membina aplikasi sembang masa nyata dan pemesejan segera menggunakan Vue?

Dalam beberapa tahun kebelakangan ini, sembang masa nyata dan pemesejan segera telah menjadi bahagian penting dalam kehidupan dan kerja harian orang ramai. Sama ada media sosial, kerjasama pasukan atau perkhidmatan pelanggan, semuanya memerlukan komunikasi masa nyata untuk menyokongnya. Vue.js ialah rangka kerja JavaScript yang sesuai untuk membina aplikasi sembang masa nyata dan pemesejan segera. Artikel ini akan memperkenalkan cara menggunakan Vue untuk membina aplikasi sembang masa nyata dan pemesejan segera.

1. Pengenalan kepada Vue dan Socket.io

Vue ialah rangka kerja JavaScript yang popular Ia adalah rangka kerja responsif yang boleh membantu pembangun mengendalikan operasi DOM dan logik mengikat data dengan lebih mudah. Sebagai rangka kerja MVC, Vue berprestasi sangat baik dalam aplikasi satu halaman, terima kasih kepada kebolehsuaian, kecekapan dan kuasa Vue yang sangat tinggi. Socket.io ialah alat yang boleh menyediakan komunikasi masa nyata, dua hala, dipacu peristiwa kepada pelanggan dan pelayan berdasarkan WebSocket.

2. Gabungan Vue dan Socket.io

Membina aplikasi sembang masa nyata dan pemesejan segera memerlukan gabungan Vue dan Socket.io. Dalam Vue, kami boleh mengurus status dalam sembang langsung dan aplikasi pemesejan segera melalui vuex. Kami boleh menggunakan Vuex untuk mengurus maklumat pengguna, maklumat sesi, mesej, pemberitahuan dan data lain yang berkaitan. Dalam Socket.io, kita boleh menggunakannya untuk melaksanakan mekanisme komunikasi masa nyata.

1. Pasang Vue dan Socket.io

Memasang Vue dan Socket.io memerlukan memasukkan arahan berikut dalam alat baris arahan:

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

2. Menggunakan Socket.io untuk mewujudkan sambungan

untuk menggunakan Socket.io sambungan memerlukan klien Perkenalkan modul socket.io-client ke dalam terminal:

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

Dalam contoh ini, kami mewujudkan soket bernama soket yang disambungkan ke port 3000 hos tempatan (localhost). Seterusnya, kita boleh menggunakan soket ini dalam komponen Vue untuk mendengar dan memancarkan peristiwa.

Mendengar dan menghantar acara

Dalam komponen Vue, kita boleh menggunakan pembolehubah $socket untuk memperkenalkan contoh socket.io-client. Seperti yang ditunjukkan di bawah:

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

Dalam contoh ini, kami sedang mendengar acara sambungan sejurus selepas komponen dipasang, dan apabila sambungan berjaya, kami akan melihat mesej dalam konsol.

Kita juga boleh menggunakan kaedah emit soket untuk menghantar acara. Seperti yang ditunjukkan di bawah:

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

Dalam contoh ini, kami mentakrifkan kaedah sendMessage dan kami menggunakan $socket.emit untuk memancarkan peristiwa bernama mesej kepada pelayan.

3. Pelaksanaan membina aplikasi sembang masa nyata dan pemesejan segera menggunakan Vue dan Socket.io

Kami boleh menggunakan Vue dan Socket.io untuk membina aplikasi sembang masa nyata dan pemesejan segera.

Buat Vuex Store

Vuex Store digunakan untuk menyimpan maklumat pengguna, maklumat sesi, mesej dan pemberitahuan Kami boleh menggunakan kod berikut untuk mencipta Kedai Vuex:

rreee

Dalam contoh ini, kami mentakrifkan keadaan awal. Maklumat pengguna, maklumat sesi, mesej dan pemberitahuan, dsb. Kami telah menentukan satu siri mutasi dan tindakan untuk mengendalikan maklumat pengguna, maklumat sesi, mesej, pemberitahuan dan keadaan lain yang berkaitan.

Buat komponen Vue

Kita boleh menggunakan Vue.js dan Kedai Vuex untuk mencipta komponen Sembang.

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: {
  }
})

Dalam komponen ini, kami menggunakan perintah v-for untuk menggelungkan untuk mengikat bilik dan mesej, menggunakan arahan model v untuk mengikat kotak input dan menggunakan arahan @click untuk mengikat butang hantar. Kami juga menggunakan fungsi mapState dan mapActions untuk memetakan keadaan dan tindakan dalam stor kepada sifat dan kaedah yang dikira komponen. Apabila memasang komponen, kami memanggil kaedah sambungan untuk memulakan sambungan Socket.io.

Melaksanakan Socket.io di bahagian pelayan

Kami juga perlu melaksanakan Socket.io di bahagian pelayan untuk digunakan dalam aplikasi Vue. Cipta pelayan menggunakan kod di bawah:

<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>

Dalam contoh ini, kami mencipta pelayan HTTP menggunakan Socket.io dan mendengar acara sambungan pada pelayan. Kami telah menentukan pelbagai acara Socket.io seperti verifyUser, getRooms, selectRoom, mesej, dll.

Kami juga menambah beberapa bilik dan pengguna awal. Untuk setiap pelanggan yang menyambung ke pelayan, kami mengeluarkan mesej sambungan untuk setiap acara putus sambungan pelanggan, kami log mesej. Dalam acara selectRoom, kami menggunakan kaedah socket.join untuk menambahkan klien ke bilik yang kami mahu menghantar mesej. Akhir sekali, kami menggunakan tatasusunan Bilik untuk menyimpan data semua bilik dan menggunakan kaedah SelectRoom komponen untuk memilih bilik untuk disertai.

IV. Kesimpulan

Dengan menggunakan gabungan Vue dan Socket.io, anda boleh membina aplikasi sembang bersambung masa nyata dan pemesejan berprestasi tinggi dengan mudah, yang boleh memastikan sifat data masa nyata dan meningkatkan pengguna dengan ketara pengalaman dan kecekapan pemprosesan data. Melalui pengoptimuman Vue dan Socket.io, kami boleh memulakan pembangunan dengan lebih cepat, mengubah versi dengan cepat, dan masa nyata dan kestabilan data lebih terjamin.

Atas ialah kandungan terperinci Bagaimana untuk membina aplikasi sembang masa nyata dan pemesejan segera menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!