Vueを使ってオンラインチャット機能を実装するにはどうすればよいですか?

インターネットの継続的な発展に伴い、チャット機能は徐々に多くの Web サイトやアプリケーションに必要な機能の 1 つになってきました。 Web サイトにオンライン チャット機能を追加したい場合は、Vue が良い選択肢となります。

Vue は、使いやすく、柔軟で強力なユーザー インターフェイスを構築するための進歩的なフレームワークです。今回はVueを使ってオンラインチャット機能を実装する方法を紹介しますので、ご参考になれば幸いです。

ステップ 1: Vue プロジェクトを作成する

まず、チャット アプリケーションの開発を開始できるように、新しい Vue プロジェクトを作成する必要があります。 Vue CLI を使用して、新しい Vue プロジェクトを作成できます。

ターミナルを開いて次のコマンドを入力します:

vue create chat-app

これにより、chat-app という名前の新しい Vue プロジェクトが作成され、必要な依存関係が自動的にインストールされます。完了したら、プロジェクト ディレクトリに入り、開発サーバーを起動します。

cd chat-app
npm run serve

これで、ブラウザで http://localhost:8080 にアクセスでき、ようこそインターフェイスが表示されるはずです。

ステップ 2: チャット インターフェイスを構築する

次に、単純なチャット インターフェイスを追加します。インターフェースの構築には、Materialize CSS フレームワークを使用します。

まず、プロジェクトのルート ディレクトリにある index.html ファイルの 93f0f5c25f18dab9d176bd4f6de5d30e タグに次のコードを追加します:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

次に、App.vue コンポーネントで、次のコードを d477f9ce7bf77f53fbcf36bec1b69b7a タグに追加します。

<div class="container">
  <div class="row">
    <div class="col s12">
      <ul class="collection">
        <li class="collection-item avatar">
          <i class="material-icons circle blue">person</i>
          <p class="title">John Doe</p>
          <p class="message">Hello</p>
        </li>
        <li class="collection-item avatar">
          <i class="material-icons circle green">person</i>
          <p class="title">Jane Doe</p>
          <p class="message">Hi</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input type="text" id="message">
      <label for="message">Message</label>
    </div>
  </div>
</div>

これにより、2 つのページがレンダリングされます。メッセージとテキスト入力ボックスを備えたチャット インターフェイス。

ステップ 3: チャット ロジックを追加する

次に、チャットで新しいメッセージを送信できるようにするロジックを追加する必要があります。 Socket.IO を使用してリアルタイム通信を処理します。

まず、Socket.IO をインストールする必要があります。ターミナルを使用して、次のコマンドを実行します:

npm install socket.io-client

次に、App.vue コンポーネントの 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに次のコードを追加します。 #

import io from 'socket.io-client';

export default {
  name: 'App',
  data() {
    return {
      username: 'User',
      messages: [],
      message: '',
      socket: null,
    };
  },
  mounted() {
    this.socket = io('http://localhost:3000');

    this.socket.on('connect', () => {
      console.log('Connected to server');
    });

    this.socket.on('disconnect', () => {
      console.log('Disconnected from server');
    });

    this.socket.on('message', (data) => {
      this.messages.push(data);
    });
  },
  methods: {
    sendMessage() {
      if (this.message.trim() !== '') {
        const data = {
          username: this.username,
          message: this.message.trim(),
        };
        this.socket.emit('message', data);
        this.messages.push(data);
        this.message = '';
      }
    },
  },
};

このコード スニペットは、

socket という名前の Socket.IO クライアント インスタンスを作成し、それを使用してサーバーに接続します。クライアントがサーバーに正常に接続すると、connect イベントが発生します。同様に、クライアントがサーバーから切断されると、disconnect イベントもトリガーされます。

新しいメッセージを送信するための

sendMessage というメソッドも定義します。 sendMessage が呼び出されると、emit 関数を使用して新しいメッセージをサーバーに送信し、新しいメッセージ レコードをローカルに追加します。

最後に、以下に示すように、チャット入力ボックスの下の

input 要素で:

<input type="text" id="message" v-model="message" @keyup.enter="sendMessage">

v-model コマンドを使用して、 enter ボックスの値はコンポーネントの message データ プロパティにバインドされており、@keyup.enter を使用して Enter キーをリッスンするため、 sendMessage方法。

ステップ 4: サーバーを起動する

次に、リアルタイム通信を処理するサーバーを作成する必要もあります。 ExpressとSocket.IOを使って簡単なサーバーを構築していきます。

まず、ターミナルを使用して次のコマンドを実行して、必要な依存関係をインストールします:

npm install express socket.io

次に、プロジェクトのルート ディレクトリ new に

server.js という名前のファイルを作成します。ファイルを作成し、次のコードを追加します。

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

const PORT = process.env.PORT || 3000;

let messages = [];

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('message', (data) => {
    messages.push(data);
    socket.broadcast.emit('message', data);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  socket.emit('messages', messages);
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

このコード スニペットは、

server という名前の Express アプリケーション インスタンスを作成し、http モジュール HTTP サーバーを使用してラップします。また、Socket.IO を使用して新しい Socket.IO サーバーを作成し、それを HTTP サーバーにバインドします。

すべてのチャット レコードを保存するために、

messages という名前の配列を定義します。新しいメッセージがサーバーに到着すると、それを messages 配列に追加し、broadcast.emit 関数を使用してすべてのクライアントにブロードキャストします。

最後に、サーバーの

listen 関数を呼び出して、クライアントからの接続リクエストの待機を開始します。

ステップ 5: アプリケーションを実行する

これで、アプリケーション全体の構築が完了しました。 2 つの異なるコマンド ライン ウィンドウからアプリケーションとサーバーを起動する必要があります。

最初のコマンド ライン ウィンドウで、次のコマンドを入力します。

npm run serve

これにより、Vue アプリケーションが起動し、ブラウザで開きます。

次に、別のコマンド ライン ウィンドウで次のコマンドを入力します。

node server.js

これにより、サーバーが起動し、クライアント接続リクエストのリッスンが開始されます。

これで、チャット インターフェイスに新しいメッセージを入力し、Enter キーを押して送信できます。新しいメッセージはインターフェイスに表示され、ユーザーのブラウザに定期的に送信されます。

結論

この記事では、Vue と Socket.IO を使用してリアルタイム チャット アプリケーションを構築する方法を学びました。 Vue プロジェクトのセットアップからチャット ロジックの追加、サーバーの起動までのプロセス全体をカバーします。この例が、Vue を使用してリアルタイム アプリケーションを構築する方法を理解するのに役立つことを願っています。

以上がVueを使ってオンラインチャット機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。