Durch die Kombination von Vue.js und der Elixir-Sprache werden Echtzeit-Chat- und Kommunikationsanwendungen realisiert

Die Kombination von Vue.js und der Elixir-Sprache zur Implementierung von Echtzeit-Chat- und Kommunikationsanwendungen

Mit der Popularität des mobilen Internets werden Echtzeit-Chat- und Kommunikationsanwendungen immer beliebter. Vue.js und Elixir sind zwei Technologien, die in den letzten Jahren viel Aufmerksamkeit erregt haben. Sie sind jeweils führend im Front-End- und Backend-Bereich. In diesem Artikel wird erläutert, wie Sie durch die Kombination von Vue.js und Elixir eine Echtzeit-Chat- und Kommunikationsanwendung erstellen.

Zuerst müssen wir mit Elixir ein grundlegendes Kommunikations-Backend erstellen. Elixir ist eine funktionale Programmiersprache, die auf der virtuellen Erlang-Maschine mit starken Parallelitätsfähigkeiten und Fehlertoleranz basiert. Mit dem Phoenix-Framework können wir schnell eine effiziente Webanwendung erstellen.

1. Zuerst installieren Sie das Elixir- und Phoenix-Framework. Führen Sie den folgenden Befehl in der Befehlszeile aus:

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

   Nach dem Login kopieren

2. Gehen Sie in das Projektverzeichnis und erstellen Sie einen Hauptteil der Chat-Funktion:

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

   Nach dem Login kopieren

Der obige Befehl generiert die chatbezogenen Modelle, Controller und Ansichten und Datenbankmigrationen durchführen.

3. Starten Sie den Elixir-Backend-Server:

   $ mix phx.server

   Nach dem Login kopieren

   Jetzt haben wir die Einrichtung des Elixir-Backends abgeschlossen.

Als nächstes werden wir Vue.js verwenden, um die Front-End-Schnittstelle zu erstellen und in Echtzeit mit dem Backend zu kommunizieren. Vue.js ist ein leichtes JavaScript-Framework, das sich auf die Erstellung von Benutzeroberflächen konzentriert.

1. Erstellen Sie ein Vue.js-Projekt und installieren Sie einige notwendige Abhängigkeiten.

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

   Nach dem Login kopieren

2. Öffnen Sie die Datei src/main.js und fügen Sie den folgenden Code hinzu:

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

   Nach dem Login kopieren

Der obige Code richtet Axios- und Echo-Instanzen für die Kommunikation mit dem Hintergrund ein.

3. Erstellen Sie eine Chat-Komponente im Verzeichnis src/components und fügen Sie den folgenden Code hinzu:

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

   Nach dem Login kopieren

Der obige Code zeigt den Inhalt des Chatrooms an und implementiert die Funktion zum Senden und Empfangen von Nachrichten.

4. Bearbeiten Sie die Datei src/App.vue, importieren Sie die Chat-Komponente und fügen Sie sie zur Vorlage hinzu:

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

   Nach dem Login kopieren

An diesem Punkt ist der Front-End-Code fertiggestellt.

Schließlich müssen wir im Elixir-Backend eine API-Schnittstelle bereitstellen, um Frontend-Anfragen zu verarbeiten:

1. Öffnen Sie die Datei chat_app/lib/chat_web/router.ex und fügen Sie den folgenden Code hinzu:

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

   Nach dem Login kopieren

The Der obige Code generiert eine nachrichtenbezogene API-Schnittstelle.

2. Erstellen Sie die Datei chat_app/lib/chat_web/controllers/message_controller.ex und fügen Sie den folgenden Code hinzu:

   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

   Nach dem Login kopieren

Der obige Code verarbeitet die POST-Anfrage für das Front-End, um die Nachricht zu senden und zu senden Inhalte für alle Verbindungen zum „Chat“-Kanal-Client.

Zu diesem Zeitpunkt haben wir die Kombination von Vue.js und Elixir abgeschlossen, um Echtzeit-Chat- und Kommunikationsanwendungen zu implementieren. Mit Vue.js als Front-End-Framework können Sie Chat-Inhalte anzeigen und Nachrichten in Echtzeit senden. Mit Elixir als Back-End-Framework können Sie den Empfang und die Übertragung von Nachrichten effizient verwalten. Durch die Kombination von Vue.js und Elixir können wir leistungsstarke und leistungsstarke Echtzeit-Chat- und Messaging-Anwendungen erstellen.

Ich hoffe, dass dieser Artikel für Leser hilfreich ist, die Vue.js und Elixir für die Anwendungsentwicklung verstehen und verwenden möchten.

Das obige ist der detaillierte Inhalt vonDurch die Kombination von Vue.js und der Elixir-Sprache werden Echtzeit-Chat- und Kommunikationsanwendungen realisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!