Bagaimana untuk menggunakan Vue untuk melaksanakan fungsi sembang dalam talian?

Dengan perkembangan berterusan Internet, fungsi sembang secara beransur-ansur menjadi salah satu fungsi yang diperlukan untuk banyak laman web dan aplikasi. Jika anda ingin menambahkan ciri sembang dalam talian pada tapak web anda, Vue boleh menjadi pilihan yang baik.

Vue ialah rangka kerja progresif untuk membina antara muka pengguna yang mudah digunakan, fleksibel dan berkuasa. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan fungsi sembang dalam talian Kami berharap ia akan membantu anda.

Langkah 1: Cipta Projek Vue

Mula-mula, kami perlu mencipta projek Vue baharu untuk mula membangunkan aplikasi sembang kami. Anda boleh menggunakan Vue CLI untuk mencipta projek Vue baharu.

Buka terminal dan masukkan arahan berikut:

vue create chat-app

Ini akan mencipta projek Vue baharu bernama apl sembang dan memasang kebergantungan yang diperlukan secara automatik. Setelah selesai, masukkan direktori projek dan mulakan pelayan pembangunan: 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>

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

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

步骤 4：启动服务器

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

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

npm install express socket.io

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

npm run serve

Kini, anda sepatutnya boleh mengakses http://localhost:8080 dalam penyemak imbas dan melihat antara muka selamat datang.

Langkah 2: Bina antara muka sembang

Seterusnya, kami akan menambah antara muka sembang yang mudah. Kami akan menggunakan rangka kerja CSS Materialize untuk membantu kami membina antara muka kami.

Mula-mula, dalam fail index.html dalam direktori akar projek, tambahkan kod berikut pada teg 93f0f5c25f18dab9d176bd4f6de5d30e:

node server.js

Kemudian, dalam App.vue, tambahkan kod berikut pada teg d477f9ce7bf77f53fbcf36bec1b69b7a:

rrreee

Ini akan menyebabkan sembang dengan dua mesej dan kotak input teks pada antara muka halaman .

Langkah 3: Tambah Logik Sembang

Kini, kita perlu menambah logik untuk membolehkan kita menghantar mesej baharu dalam sembang. Kami akan menggunakan Socket.IO untuk mengendalikan komunikasi masa nyata.

Pertama, kita perlu memasang Socket.IO. Menggunakan terminal, jalankan arahan berikut:

rrreee

Kemudian, tambah kod berikut dalam teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a dalam komponen App.vue: 🎜rrreee🎜This coretan kod akan Mencipta instance klien Socket.IO bernama socket dan menggunakannya untuk menyambung ke pelayan. Apabila klien berjaya menyambung ke pelayan, acara connect akan dicetuskan. Begitu juga, acara disconnect dicetuskan apabila klien memutuskan sambungan daripada pelayan. 🎜🎜Kami juga akan menentukan kaedah yang dipanggil sendMessage untuk menghantar mesej baharu. Apabila sendMessage dipanggil, ia menghantar mesej baharu kepada pelayan menggunakan fungsi emit dan menambah rekod mesej baharu secara setempat. 🎜🎜Akhir sekali, dalam elemen input di bawah kotak input sembang, seperti yang ditunjukkan di bawah: 🎜rrreee🎜Kami akan menggunakan arahan v-model untuk mengikat nilai input kotak ke Pada atribut data mesej komponen ini, dan gunakan @keyup.enter untuk mendengar kekunci Enter, supaya sendMessageserver.js dalam direktori akar projek dan tambah kod berikut :🎜rrreee 🎜Coretan kod ini mencipta contoh aplikasi Express bernama server dan membungkusnya sebagai pelayan HTTP menggunakan modul http. Ia juga mencipta pelayan Socket.IO baharu menggunakan Socket.IO dan mengikatnya ke pelayan HTTP. 🎜🎜Kami mentakrifkan tatasusunan bernama mesej untuk menyimpan semua rekod sembang. Apabila mesej baharu tiba di pelayan, kami menambahkannya pada tatasusunan mesej dan menyiarkannya kepada semua pelanggan menggunakan fungsi broadcast.emit. 🎜🎜Akhir sekali, kami memanggil fungsi listen pelayan untuk mula mendengar permintaan sambungan daripada klien. 🎜🎜Langkah 5: Jalankan Apl🎜🎜Kini, kami telah menyelesaikan membina keseluruhan aplikasi. Kita perlu memulakan aplikasi dan pelayan daripada dua tetingkap baris arahan yang berbeza. 🎜🎜Dalam tetingkap baris arahan pertama, masukkan arahan berikut: 🎜rrreee🎜Ini akan melancarkan aplikasi Vue kami dan membukanya dalam penyemak imbas. 🎜🎜Kemudian, dalam tetingkap baris arahan lain, masukkan arahan berikut: 🎜rrreee🎜Ini akan memulakan pelayan kami dan mula mendengar permintaan sambungan pelanggan. 🎜🎜Kini, anda boleh memasukkan mesej baharu dalam antara muka sembang dan tekan kekunci Enter untuk menghantar Mesej baharu akan dipaparkan pada antara muka dan dihantar ke penyemak imbas pengguna secara berkala. 🎜🎜Kesimpulan🎜🎜Dalam artikel ini, kami mempelajari cara membina aplikasi sembang masa nyata menggunakan Vue dan Socket.IO. Kami meliputi keseluruhan proses daripada menyediakan projek Vue kepada menambahkan logik sembang dan memulakan pelayan. Semoga contoh ini membantu anda memahami cara menggunakan Vue untuk membina aplikasi masa nyata. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan fungsi sembang dalam talian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!