Gabungan bahasa Vue.js dan Elixir merealisasikan aplikasi sembang dan komunikasi masa nyata

Gabungan bahasa Vue.js dan Elixir untuk melaksanakan aplikasi sembang dan komunikasi masa nyata

Dengan populariti Internet mudah alih, aplikasi sembang dan komunikasi masa nyata menjadi semakin popular. Vue.js dan Elixir ialah dua teknologi yang telah menarik perhatian ramai dalam beberapa tahun kebelakangan ini, masing-masing merupakan peneraju dalam bidang bahagian hadapan dan bahagian belakang. Artikel ini akan memperkenalkan cara membina aplikasi sembang dan komunikasi masa nyata dengan menggabungkan Vue.js dan Elixir.

Pertama sekali, kita perlu membina bahagian belakang komunikasi asas dan menggunakan Elixir untuk melaksanakannya. Elixir ialah bahasa pengaturcaraan berfungsi berdasarkan mesin maya Erlang dengan keupayaan konkurensi yang kuat dan toleransi kesalahan. Kita boleh menggunakan rangka kerja Phoenix untuk membina aplikasi web yang cekap dengan cepat.

1. Mula-mula, pasang rangka kerja Elixir dan Phoenix. Jalankan arahan berikut dalam baris arahan:

   $ mix archive.install hex phx_new 1.5.8
   $ mix phx.new chat_app

   Salin selepas log masuk

2. Pergi ke dalam direktori projek dan buat bahagian utama fungsi sembang:

   $ cd chat_app
   $ mix phx.gen.live Chat Room rooms name:string
   $ mix ecto.migrate

   Salin selepas log masuk

Arahan di atas akan menjana model, pengawal dan pandangan yang berkaitan dengan sembang, dan melakukan migrasi pangkalan data.

3. Mulakan pelayan bahagian belakang Elixir:

   $ mix phx.server

   Salin selepas log masuk

   Kini, kami telah menyelesaikan persediaan bahagian belakang Elixir.

Seterusnya, kami akan menggunakan Vue.js untuk membina antara muka bahagian hadapan dan berkomunikasi dengan bahagian belakang dalam masa nyata. Vue.js ialah rangka kerja JavaScript ringan yang memfokuskan pada membina antara muka pengguna.

1. Buat projek Vue.js dan pasang beberapa kebergantungan yang diperlukan.

   $ vue create chat_app_frontend
   $ cd chat_app_frontend
   $ npm install axios vue-axios pusher-js laravel-echo

   Salin selepas log masuk

2. Buka fail src/main.js dan tambah kod berikut:

   import Vue from 'vue'
   import App from './App.vue'
   import axios from 'axios'
   import VueAxios from 'vue-axios'
   import Echo from 'laravel-echo'
   
   Vue.config.productionTip = false
   
   Vue.use(VueAxios, axios)
   
   window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'YOUR_PUSHER_KEY',
    cluster: 'YOUR_PUSHER_CLUSTER',
    encrypted: true
   });
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')

   Salin selepas log masuk

Kod di atas akan menyediakan kejadian axios dan Echo untuk berkomunikasi dengan latar belakang.

3. Buat komponen Sembang dalam direktori src/komponen dan tambah kod berikut:

   <template>
     <div>
    <h2>Chat Room</h2>
    <div v-for="message in messages" :key="message.id">
      <strong>{{ message.username }}</strong>: {{ message.content }}
    </div>
    <form @submit.prevent="sendMessage">
      <input type="text" v-model="newMessage" placeholder="Enter message">
      <button type="submit">Send</button>
    </form>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      messages: [],
      newMessage: ''
    }
     },
     created() {
    window.Echo.join('chat')
      .here((users) => {
        console.log(users);
      })
      .joining((user) => {
        console.log(user);
      })
      .leaving((user) => {
        console.log(user);
      })
      .listen('NewMessage', (message) => {
        this.messages.push(message);
      });
     },
     methods: {
    sendMessage() {
      axios.post('/api/messages', { content: this.newMessage })
        .then(() => {
          this.newMessage = '';
        })
        .catch((error) => {
          console.error(error);
        });
    }
     }
   }
   </script>

   Salin selepas log masuk

Kod di atas akan memaparkan kandungan bilik sembang dan melaksanakan fungsi menghantar dan menerima mesej.

4. Edit fail src/App.vue, import dan tambah komponen Sembang pada templat:

   <template>
     <div id="app">
    <Chat />
     </div>
   </template>
   
   <script>
   import Chat from './components/Chat.vue'
   
   export default {
     name: 'App',
     components: {
    Chat
     }
   }
   </script>

   Salin selepas log masuk

Pada ketika ini, kod bahagian hadapan telah selesai.

Akhir sekali, kami perlu menyediakan antara muka API di bahagian belakang Elixir untuk mengendalikan permintaan bahagian hadapan:

1. Buka fail chat_app/lib/chat_web/router.ex dan tambah kod berikut:

   scope "/api", ChatWeb do
     pipe_through :api
   
     resources "/messages", MessageController, except: [:new, :edit]
   end

   Salin selepas log masuk

The kod di atas akan menjana antara muka API berkaitan Mesej.

2. Buat fail chat_app/lib/chat_web/controllers/message_controller.ex dan tambahkan kod berikut:

   defmodule ChatWeb.MessageController do
     use ChatWeb, :controller
   
     alias ChatWeb.Message
   
     def create(conn, %{"content" => content}) do
    changeset = Message.changeset(%Message{}, %{content: content})
    
    case Repo.insert(changeset) do
      {:ok, message} ->
        ChatWeb.Endpoint.broadcast("chat", "new_message", %{id: message.id, content: message.content, username: "Anonymous"})
        conn |> json(%{status: "ok"})
      _ ->
        conn |> json(%{status: "error"})
    end
     end
   end

   Salin selepas log masuk

Kod di atas akan mengendalikan permintaan POST untuk bahagian hadapan menghantar mesej dan menyiarkan mesej kandungan kepada semua sambungan ke "sembang" Pelanggan saluran.

Pada ketika ini, kami telah melengkapkan gabungan Vue.js dan Elixir untuk melaksanakan aplikasi sembang dan komunikasi masa nyata. Menggunakan Vue.js sebagai rangka kerja bahagian hadapan, anda boleh memaparkan kandungan sembang dan menghantar mesej dalam masa nyata menggunakan Elixir sebagai rangka kerja bahagian belakang, anda boleh mengendalikan penerimaan dan penyiaran mesej dengan cekap. Dengan menggabungkan Vue.js dan Elixir, kami boleh membina aplikasi sembang dan pemesejan masa nyata yang berkuasa dan berprestasi.

Saya harap artikel ini dapat membantu pembaca yang ingin memahami dan menggunakan Vue.js dan Elixir untuk pembangunan aplikasi.

Atas ialah kandungan terperinci Gabungan bahasa Vue.js dan Elixir merealisasikan aplikasi sembang dan komunikasi masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!