La combinaison du langage Vue.js et Elixir réalise des applications de chat et de communication en temps réel

La combinaison du langage Vue.js et Elixir pour implémenter des applications de chat et de communication en temps réel

Avec la popularité de l'Internet mobile, les applications de chat et de communication en temps réel deviennent de plus en plus populaires. Vue.js et Elixir sont deux technologies qui ont beaucoup retenu l'attention ces dernières années. Elles sont respectivement leaders dans les domaines front-end et back-end. Cet article expliquera comment créer une application de chat et de communication en temps réel en combinant Vue.js et Elixir.

Tout d'abord, nous devons créer un backend de communication de base et utiliser Elixir pour le mettre en œuvre. Elixir est un langage de programmation fonctionnel basé sur la machine virtuelle Erlang avec de fortes capacités de concurrence et de tolérance aux pannes. Nous pouvons utiliser le framework Phoenix pour créer rapidement une application Web efficace.

1. Tout d’abord, installez le framework Elixir et Phoenix. Exécutez la commande suivante dans la ligne de commande :

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

   Copier après la connexion

2. Allez dans le répertoire du projet et créez une partie principale de la fonction de chat :

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

   Copier après la connexion

La commande ci-dessus générera les modèles, contrôleurs et vues liés au chat, et effectuer des migrations de bases de données.

3. Démarrez le serveur backend Elixir :

   $ mix phx.server

   Copier après la connexion

   Maintenant, nous avons terminé la configuration du backend Elixir.

Ensuite, nous utiliserons Vue.js pour construire l'interface front-end et communiquer avec le backend en temps réel. Vue.js est un framework JavaScript léger axé sur la création d'interfaces utilisateur.

1. Créez un projet Vue.js et installez certaines dépendances nécessaires.

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

   Copier après la connexion

2. Ouvrez le fichier src/main.js et ajoutez le code suivant :

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

   Copier après la connexion

Le code ci-dessus configurera les instances axios et Echo pour communiquer avec l'arrière-plan.

3. Créez un composant Chat dans le répertoire src/components et ajoutez le code suivant :

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

   Copier après la connexion

Le code ci-dessus affichera le contenu de la salle de discussion et implémentera la fonction d'envoi et de réception de messages.

4. Modifiez le fichier src/App.vue, importez et ajoutez le composant Chat au modèle :

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

   Copier après la connexion

À ce stade, le code front-end est terminé.

Enfin, nous devons fournir une interface API dans le backend Elixir pour gérer les requêtes front-end :

1. Ouvrez le fichier chat_app/lib/chat_web/router.ex et ajoutez le code suivant :

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

   Copier après la connexion

Le Le code ci-dessus générera une interface API liée au message.

2. Créez le fichier chat_app/lib/chat_web/controllers/message_controller.ex et ajoutez le code suivant :

   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

   Copier après la connexion

Le code ci-dessus gérera la requête POST pour que le front-end envoie le message et diffuse le message. contenu à toutes les connexions au canal client « chat ».

À ce stade, nous avons finalisé la combinaison de Vue.js et Elixir pour implémenter des applications de chat et de communication en temps réel. En utilisant Vue.js comme framework front-end, vous pouvez afficher le contenu du chat et envoyer des messages en temps réel ; en utilisant Elixir comme framework back-end, vous pouvez gérer efficacement la réception et la diffusion des messages. En combinant Vue.js et Elixir, nous pouvons créer des applications de chat et de messagerie en temps réel puissantes et performantes.

J'espère que cet article sera utile aux lecteurs qui souhaitent comprendre et utiliser Vue.js et Elixir pour le développement d'applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!