Vue.jsとElixir言語の組み合わせでリアルタイムチャット・コミュニケーションアプリケーションを実現

Vue.js と Elixir 言語の組み合わせにより、リアルタイム チャットおよびコミュニケーション アプリケーションが実現

モバイル インターネットの普及に伴い、リアルタイム チャットおよびコミュニケーション アプリケーションの人気が高まっています。 Vue.js と Elixir は近年注目を集めている 2 つのテクノロジーであり、それぞれフロントエンドとバックエンドの分野をリードしています。この記事では、Vue.js と Elixir を組み合わせてリアルタイム チャットおよびコミュニケーション アプリケーションを構築する方法を紹介します。

まず、基本的な通信バックエンドを構築し、Elixir を使用して実装する必要があります。 Elixir は、強力な同時実行機能と耐障害性を備えた Erlang 仮想マシンに基づく関数型プログラミング言語です。 Phoenix フレームワークを使用すると、効率的な Web アプリケーションを迅速に構築できます。

1. まず、Elixir と Phoenix フレームワークをインストールします。コマンド ラインで次のコマンドを実行します:

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

2. プロジェクト ディレクトリに移動し、チャット機能の主要部分を作成します:

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

上記のコマンドは、チャット関連のモデル、コントローラー、ビューを生成し、データベースの移行を実行します。

3. Elixir バックエンド サーバーを起動します:

   $ mix phx.server

   これで、Elixir バックエンドのセットアップが完了しました。

次に、Vue.js を使用してフロントエンド インターフェイスを構築し、バックエンドとリアルタイムで通信します。 Vue.js は、ユーザー インターフェイスの構築に重点を置いた軽量の JavaScript フレームワークです。

1. Vue.js プロジェクトを作成し、必要な依存関係をいくつかインストールします。

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

2. src/main.js ファイルを開き、次のコードを追加します:

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

上記のコードは、axios と Echo インスタンスをセットアップします。バックグラウンドでの通信で使用します。

3. Chat コンポーネントを src/components ディレクトリに作成し、次のコードを追加します:

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

上記のコードは、チャット ルームのコンテンツを表示します。メッセージの送受信機能を実装します。

4. src/App.vue ファイルを編集し、Chat コンポーネントをインポートしてテンプレートに追加します。

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

この時点で、前面-終了コードは終了しました。

最後に、フロントエンドリクエストを処理するために、ElixirバックエンドにAPIインターフェースを提供する必要があります:

1. chat_app/lib/chat_web/router.exファイルを開きます。次のコードを追加します。

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

上記のコードは、メッセージに関連する API インターフェイスを生成します。

2. chat_app/lib/chat_web/controllers/message_controller.ex ファイルを作成し、次のコードを追加します。

   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

上記のコードは、フロントエンドはメッセージの POST リクエストを送信し、「チャット」チャネルに接続されているすべてのクライアントにメッセージの内容をブロードキャストします。

これまでに、Vue.js と Elixir を組み合わせて、リアルタイム チャットおよびコミュニケーション アプリケーションを実装することが完了しました。 Vue.js をフロントエンド フレームワークとして使用すると、チャット コンテンツの表示とメッセージのリアルタイム送信が可能になり、Elixir をバックエンド フレームワークとして使用すると、メッセージの受信とブロードキャストを効率的に処理できます。 Vue.js と Elixir を組み合わせることで、強力でパフォーマンスの高いリアルタイム チャットおよびメッセージング アプリケーションを構築できます。

この記事が、アプリケーション開発で Vue.js と Elixir を理解して使用したいと考えている読者に役立つことを願っています。

以上がVue.jsとElixir言語の組み合わせでリアルタイムチャット・コミュニケーションアプリケーションを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。