Comment utiliser Vue pour implémenter la fonction de chat en ligne ?-Voir.js-php.cn

Avec le développement continu d'Internet, la fonction de chat est progressivement devenue l'une des fonctions nécessaires à de nombreux sites Web et applications. Si vous souhaitez ajouter une fonctionnalité de chat en ligne à votre site Web, Vue peut être un bon choix.

Vue est un framework progressif permettant de créer des interfaces utilisateur faciles à utiliser, flexibles et puissantes. Dans cet article, nous expliquerons comment utiliser Vue pour implémenter une fonction de chat en ligne. Nous espérons que cela vous sera utile.

Étape 1 : Créer un projet Vue

Tout d'abord, nous devons créer un nouveau projet Vue pour pouvoir commencer à développer notre application de chat. Vous pouvez utiliser Vue CLI pour créer un nouveau projet Vue.

Ouvrez un terminal et entrez la commande suivante :

vue create chat-app

Copier après la connexion

Cela créera un nouveau projet Vue nommé chat-app et installera automatiquement les dépendances requises. Une fois terminé, entrez dans le répertoire du projet et démarrez le serveur de développement : chat-app 的新的 Vue 项目，并自动安装所需的依赖项。完成后，进入项目目录并启动开发服务器：

cd chat-app
npm run serve

Copier après la connexion

现在，你应该可以在浏览器中访问 http://localhost:8080 ，看到一个欢迎界面了。

步骤 2：建立聊天界面

接下来，我们将添加一个简单的聊天界面。我们将使用 Materialize CSS 框架来帮助我们构建界面。

首先，在项目根目录的 index.html 文件中，将以下代码添加到 <head> 标签中：

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

Copier après la connexion

然后，在 App.vue 组件中，将以下代码添加到 <template> 标签中：

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

Copier après la connexion

这会在页面上呈现一个具有两条消息和一个文本输入框的聊天界面。

步骤 3：添加聊天逻辑

现在，我们需要添加逻辑来允许我们在聊天中发送新消息。我们将使用 Socket.IO 来处理实时通信。

首先，我们需要安装 Socket.IO。使用终端，运行以下命令：

npm install socket.io-client

Copier après la connexion

然后，在 App.vue 组件中的 <script> 标签中添加以下代码：

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 = '';
      }
    },
  },
};

Copier après la connexion

这个代码段会创建一个名为 socket 的 Socket.IO 客户端实例并使用它来连接到服务器。当客户端成功连接到服务器时，connect 事件将被触发。同样，当客户端从服务器断开连接时，disconnect 事件也会被触发。

我们还将定义一个名为 sendMessage 的方法，用于发送新消息。当 sendMessage 被调用时，它会使用 emit 函数将新消息发送到服务器，并在本地添加一个新的消息记录。

最后，在聊天输入框下方的 input 元素中，如下所示：

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

Copier après la connexion

我们将使用 v-model 指令将输入框的值绑定到该组件的 message 数据属性上，并使用 @keyup.enter 监听回车键，以便在用户按下回车键时调用我们的 sendMessage 方法。

步骤 4：启动服务器

现在，我们还需要创建一个服务器来处理实时通信。我们将使用 Express 和 Socket.IO 搭建一个简单的服务器。

首先，使用终端，运行以下命令来安装所需的依赖项：

npm install express socket.io

Copier après la connexion

然后，在项目根目录中创建一个名为 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}`);
});

Copier après la connexion

这个代码段会创建一个名为 server 的 Express 应用程序实例，并使用 http 模块将其包装为一个 HTTP 服务器。它还会使用 Socket.IO 创建了一个新的 Socket.IO 服务器，并将其绑定到 HTTP 服务器上。

我们定义了一个名为 messages 的数组来储存所有聊天记录。当新消息到达服务器时，我们将其添加到 messages 数组中，并使用 broadcast.emit 函数将其广播给所有客户端。

最后，我们调用服务器的 listen

npm run serve

Copier après la connexion

Maintenant, vous devriez pouvoir accéder à http://localhost:8080 dans le navigateur et voir un écran de bienvenue.

Étape 2 : Créer une interface de chat

Ensuite, nous ajouterons une interface de chat simple. Nous utiliserons le framework CSS Materialise pour nous aider à créer notre interface.

Tout d'abord, dans le fichier index.html du répertoire racine du projet, ajoutez le code suivant à la balise <head> :

node server.js

Copier après la connexion

Ensuite, dans le App.vue, ajoutez le code suivant à la balise <template> :

rrreee

Cela affichera une discussion avec deux messages et une zone de saisie de texte sur l'interface de la page. .

Étape 3 : Ajouter une logique de chat

Maintenant, nous devons ajouter une logique pour nous permettre d'envoyer de nouveaux messages dans le chat. Nous utiliserons Socket.IO pour gérer la communication en temps réel.

Tout d’abord, nous devons installer Socket.IO. A l'aide du terminal, exécutez la commande suivante :

rrreee

Ensuite, ajoutez le code suivant dans la balise <script> du composant App.vue : 🎜rrreee🎜This l'extrait de code créera une instance client Socket.IO nommée socket et l'utilisera pour se connecter au serveur. Lorsque le client se connecte avec succès au serveur, l'événement connect sera déclenché. De même, l'événement disconnect est déclenché lorsque le client se déconnecte du serveur. 🎜🎜Nous définirons également une méthode appelée sendMessage pour envoyer de nouveaux messages. Lorsque sendMessage est appelé, il envoie un nouveau message au serveur à l'aide de la fonction emit et ajoute un nouvel enregistrement de message localement. 🎜🎜Enfin, dans l'élément input sous la zone de saisie du chat, comme indiqué ci-dessous : 🎜rrreee🎜Nous utiliserons la directive v-model pour lier la valeur de l'entrée sur l'attribut de données message de ce composant, et utilisez @keyup.enter pour écouter la touche Entrée, afin que notre

sendMessage de la touche Entrée. 🎜🎜Étape 4 : Démarrez le serveur🎜🎜Maintenant, nous devons également créer un serveur pour gérer la communication en temps réel. Nous allons construire un serveur simple en utilisant Express et Socket.IO. 🎜🎜Tout d'abord, à l'aide de Terminal, exécutez la commande suivante pour installer les dépendances requises : 🎜rrreee🎜 Ensuite, créez un nouveau fichier nommé <code>server.js

dans le répertoire racine du projet et ajoutez le code suivant :🎜rrreee 🎜Cet extrait de code crée une instance d'application Express nommée server et l'enveloppe en tant que serveur HTTP à l'aide du module http. Il crée également un nouveau serveur Socket.IO à l'aide de Socket.IO et le lie au serveur HTTP. 🎜🎜Nous définissons un tableau nommé messages pour stocker tous les enregistrements de discussion. Lorsqu'un nouveau message arrive sur le serveur, nous l'ajoutons au tableau messages et le diffusons à tous les clients en utilisant la fonction broadcast.emit. 🎜🎜Enfin, nous appelons la fonction listen du serveur pour commencer à écouter les demandes de connexion du client. 🎜🎜Étape 5 : Exécutez l'application🎜🎜Maintenant, nous avons terminé la création de l'intégralité de l'application. Nous devons démarrer l'application et le serveur à partir de deux fenêtres de ligne de commande différentes. 🎜🎜Dans la première fenêtre de ligne de commande, entrez la commande suivante : 🎜rrreee🎜Cela lancera notre application Vue et l'ouvrira dans le navigateur. 🎜🎜Ensuite, dans une autre fenêtre de ligne de commande, entrez la commande suivante : 🎜rrreee🎜Cela démarrera notre serveur et commencera à écouter les demandes de connexion des clients. 🎜🎜Maintenant, vous pouvez saisir un nouveau message dans l'interface de chat et appuyer sur la touche Entrée pour l'envoyer. Le nouveau message sera affiché sur l'interface et envoyé périodiquement au navigateur de l'utilisateur. 🎜🎜Conclusion🎜🎜Dans cet article, nous avons appris à créer une application de chat en temps réel à l'aide de Vue et Socket.IO. Nous couvrons l'ensemble du processus, depuis la configuration d'un projet Vue jusqu'à l'ajout d'une logique de discussion et le démarrage du serveur. Espérons que cet exemple vous aide à comprendre comment utiliser Vue pour créer des applications 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!