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

La combinaison du langage Vue.js et Elixir réalise la méthode de mise en œuvre d'applications de chat et de communication en temps réel

Introduction :
À l'ère d'Internet d'aujourd'hui, le chat et la communication en temps réel sont devenus un élément indispensable de la vie et du travail des gens. Afin de réaliser des applications de communication en temps réel performantes et fiables, nous pouvons combiner les langages Vue.js et Elixir et profiter des avantages des deux. Cet article expliquera comment utiliser le framework frontal Vue.js et le framework Phoenix d'Elixir pour développer une application de chat et de communication en temps réel, et fournira des exemples de code correspondants.

Première partie : Présentation du projet
Avant de commencer, comprenons les fonctionnalités et l'architecture de base de l'application de chat et de messagerie en temps réel que nous souhaitons implémenter.

1. Fonctions de base :
2. Inscription et connexion de l'utilisateur
3. Envoyer et recevoir des messages de discussion en temps réel
4. Afficher l'historique des discussions
5. Architecture :
   Nous utilisons Vue.js comme framework frontal, responsable de la gestion des interactions des utilisateurs et affichage des données et Elixir Le framework Phoenix est responsable de la gestion de la logique back-end et de la communication en temps réel.

Partie 2 : Implémentation front-end
Dans la partie front-end, nous utiliserons Vue.js pour implémenter l'interaction utilisateur et l'affichage des données. Tout d’abord, nous devons installer Vue.js et ses plug-ins associés.

1. Installez Vue.js :
   Ouvrez le terminal et exécutez la commande suivante pour installer Vue.js :

   $ npm install vue

   Copier après la connexion

2. Créez une application Vue.js :
   Entrez la commande suivante dans le terminal pour créer une nouvelle Vue. js :

   $ vue create realtime-chat

   Copier après la connexion

3. Ecrire le composant Vue (Chat.vue) :
   Ouvrez le fichier Chat.vue dans le répertoire src/components et écrivez le code suivant : src/components目录下的Chat.vue文件，并编写以下代码：

   <template>
     <div>
    <h1>实时聊天</h1>
    <div v-for="(message, index) in messages" :key="index">
      {{ message }}
    </div>
    <div>
      <input v-model="inputMessage" type="text" />
      <button @click="sendMessage">发送</button>
    </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      messages: [],
      inputMessage: "",
    };
     },
     methods: {
    sendMessage() {
      // 调用后端API发送消息
    },
     },
   };
   </script>

   Copier après la connexion

第三部分：后端实现
在后端部分，我们将使用Elixir的Phoenix框架来处理实时通讯和后端逻辑。

1. 安装Elixir和Phoenix：
   打开终端，执行以下命令安装Elixir和Phoenix：

   $ brew install elixir
   $ mix archive.install hex phx_new

   Copier après la connexion

2. 创建Phoenix应用：
   在终端输入以下命令创建一个新的Phoenix应用：

   $ mix phx.new realtime_chat

   Copier après la connexion

3. 编写Elixir模块（Chat.ex）：
   打开lib/realtime_chat_web/channels目录下的chat.ex文件，并编写以下代码：

   defmodule RealtimeChatWeb.ChatChannel do
     use Phoenix.Channel
   
     def join("chat:lobby", _params, socket) do
    {:ok, socket}
     end
     
     def handle_in("new_message", %{"message" => message}, socket) do
    broadcast(socket, "new_message", %{message: message})
    {:noreply, socket}
     end
   end

   Copier après la connexion

4. 更新路由（router.ex）：
   打开lib/realtime_chat_web/router目录下的router.ex文件，然后添加以下代码：

   defmodule RealtimeChatWeb.Router do
     use RealtimeChatWeb, :router
   
     # ...
   
     channel "chat:*", RealtimeChatWeb.ChatChannel
   end

   Copier après la connexion

第四部分：前后端通讯
现在我们已经完成了前后端的基本代码。接下来，我们需要实现前后端的通讯来实现实时聊天功能。

1. 连接后端服务器（main.js）：
   打开src/main.js文件，并添加以下代码：

   import Vue from "vue";
   import App from "./App.vue";
   import Phoenix from "phoenix";
   
   Vue.config.productionTip = false;
   
   const socket = new Phoenix.Socket("/socket", {});
   socket.connect();
   
   Vue.prototype.$socket = socket;
   
   new Vue({
     render: (h) => h(App),
   }).$mount("#app");

   Copier après la connexion

2. 发送和接收消息（Chat.vue）：
   修改Chat.vue文件的sendMessage方法和data属性，以实现发送和接收实时消息的功能：

   methods: {
     sendMessage() {
    this.$socket.channel("chat:lobby").push("new_message", { message: this.inputMessage });
    this.inputMessage = "";
     },
   },
   created() {
     const channel = this.$socket.channel("chat:lobby");
   
     channel.on("new_message", (payload) => {
    this.messages.push(payload.message);
     });
   
     channel.join().receive("ok", (response) => {
    console.log("成功加入聊天室");
     });
   },

   Copier après la connexion

第五部分：运行应用
现在我们可以运行我们的实时聊天和通讯应用了。

1. 启动Elixir服务：
   在终端输入以下命令启动Elixir服务：

   $ cd realtime_chat
   $ mix phx.server

   Copier après la connexion

2. 启动Vue.js应用：
   在另一个终端窗口中，导航到Vue.js应用的根目录并执行以下命令：

   $ cd realtime-chat
   $ npm run serve

   Copier après la connexion
3. 打开应用：
   在浏览器中访问http://localhost:8080rrreee

Troisième partie : Implémentation du backend
Dans la partie backend, nous utiliserons le framework Phoenix d'Elixir pour gérer la communication en temps réel et la logique backend.

🎜🎜🎜Installez Elixir et Phoenix : 🎜Ouvrez le terminal et exécutez la commande suivante pour installer Elixir et Phoenix : 🎜rrreee🎜🎜🎜 Créez une application Phoenix : 🎜 Entrez la commande suivante dans le terminal pour créer une nouvelle application Phoenix : 🎜 rrreee🎜🎜🎜 Write Elixir Module (Chat.ex) : 🎜Ouvrez le fichier chat.ex dans le répertoire lib/realtime_chat_web/channels et écrivez le code suivant : 🎜rrreee 🎜🎜🎜Mettre à jour le routage (router .ex) : 🎜Ouvrez le fichier router.ex dans le répertoire lib/realtime_chat_web/router, puis ajoutez le code suivant : 🎜rrreee 🎜🎜🎜Partie 4 : Communication front-end et back-end 🎜Nous avons maintenant terminé le code de base du front-end et du back-end. Ensuite, nous devons mettre en œuvre une communication front-end et back-end pour implémenter la fonction de chat en temps réel. 🎜🎜🎜🎜Connectez-vous au serveur backend (main.js) : 🎜Ouvrez le fichier src/main.js et ajoutez le code suivant : 🎜rrreee🎜🎜🎜Envoyez et recevez des messages (Chat.vue ) : 🎜Modifiez la méthode sendMessage et l'attribut data du fichier Chat.vue pour implémenter la fonction d'envoi et de réception de messages en temps réel : 🎜rrreee🎜🎜🎜 Cinquième partie : Exécuter l'application 🎜 Nous pouvons maintenant exécuter notre application de chat et de messagerie en direct. 🎜🎜🎜🎜Démarrez le service Elixir : 🎜Entrez la commande suivante dans le terminal pour démarrer le service Elixir : 🎜rrreee🎜🎜🎜Démarrez l'application Vue.js : 🎜Dans une autre fenêtre de terminal, accédez au répertoire racine de Vue. js et exécutez la commande suivante :🎜rrreee🎜🎜Ouvrez l'application :🎜Visitez http://localhost:8080 dans votre navigateur, vous devriez pouvoir voir l'interface de chat en direct. 🎜🎜🎜Conclusion : 🎜Cet article présente comment utiliser Vue.js et le framework Phoenix d'Elixir pour développer des applications de chat et de communication en temps réel. Le framework frontal Vue.js réalise l'interaction de l'utilisateur et l'affichage des données, et le langage back-end Elixir et le framework Phoenix réalisent la communication en temps réel et la logique back-end. J'espère que cet article vous a été utile et vous a inspiré des idées pour développer davantage d'applications de messagerie en temps réel. 🎜

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!