如何使用 Vue 實現線上聊天功能？-Vue.js-PHP中文網

隨著網路的不斷發展，聊天功能逐漸成為了許多網站和應用程式必備的功能之一。如果你想為自己的網站添加一個線上聊天功能，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 檔案中，將以下程式碼加入<head> 標籤中：

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

登入後複製

然後，在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>

登入後複製

這會在頁面上呈現一個具有兩條訊息和一個文字輸入框的聊天介面。

步驟 3：新增聊天邏輯

現在，我們需要新增邏輯來允許我們在聊天中發送新訊息。我們將使用 Socket.IO 來處理即時通訊。

首先，我們需要安裝 Socket.IO。使用終端，執行以下命令：

npm install socket.io-client

登入後複製

然後，在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 = '';
      }
    },
  },
};

登入後複製

這個程式碼片段會建立一個名為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 函數，開始監聽來自客戶端的連線請求。

步驟 5：運行應用程式

現在，我們已經完成了整個應用程式的建置。我們需要從兩個不同的命令列視窗啟動應用程式和伺服器。

在第一個命令列視窗中，輸入以下命令：