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

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

WBOY

リリース： 2023-07-30 09:12:41

オリジナル

869 人が閲覧しました

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

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

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

まず、Elixir と Phoenix フレームワークをインストールします。コマンドラインで次のコマンドを実行します:
```
$ mix archive.install hex phx_new 1.5.8
$ mix phx.new chat_app
```
ログイン後にコピー
プロジェクトディレクトリに移動し、チャット機能の主要部分を作成します:
```
$ cd chat_app
$ mix phx.gen.live Chat Room rooms name:string
$ mix ecto.migrate
```
ログイン後にコピー

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

Elixir バックエンドサーバーを起動します:
```
$ mix phx.server
```
ログイン後にコピー
これで、Elixir バックエンドのセットアップが完了しました。

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

Vue.js プロジェクトを作成し、必要な依存関係をいくつかインストールします。
```
$ vue create chat_app_frontend
$ cd chat_app_frontend
$ npm install axios vue-axios pusher-js laravel-echo
```
ログイン後にコピー

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 インスタンスをセットアップします。バックグラウンドでの通信で使用します。

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>

ログイン後にコピー

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

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インターフェースを提供する必要があります:

chat_app/lib/chat_web/router.exファイルを開きます。次のコードを追加します。
```
scope "/api", ChatWeb do
  pipe_through :api

  resources "/messages", MessageController, except: [:new, :edit]
end
```
ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。