如何使用vue和Element-plus实现实时聊天功能

Vue和Element-plus是一对强劲组合，可以用于构建功能强大的Web应用程序。其中，Vue为JavaScript框架，并被称为“渐进式框架”，以其易用性和高性能著称。Element-plus是Vue的UI库，包含了很多不同组件，例如表格、菜单和消息框，可用于快速实现各种功能。在本篇文章中，我们将学习如何使用Vue和Element-plus来实现一个功能齐全的实时聊天应用程序。

1.创建Vue应用程序

要开始使用Vue和Element-plus，首先需要安装Vue的CLI。Vue CLI（命令行界面）是一个提供了一些生成基础的 Vue.js 项目的标准工具。安装命令如下：

npm install -g @vue/cli

之后，你可以通过以下命令创建一个新的Vue应用程序：

vue create my-app

其中my-app为你的项目名称。

1.1安装Element-plus

我们在这里使用el-menu菜单组件、 el-input输入框组件和el-button按钮组件。要使用这些组件，需要安装Element-plus。安装命令如下：

npm install element-plus --save

我们还需要在项目的入口文件main.js中引用Element-plus并加载css文件：

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
createApp(App).use(ElementPlus).mount('#app')

2.实现实时聊天功能

为了实现实时聊天功能，我们将使用socket.io。它是一个用于实现实时数据交互的JavaScript库，可以让Web应用程序实时更新数据而无需刷新页面。安装socket.io：

npm install socket.io --save

接下来，我们需要在Vue组件中使用socket.io。在这里，我将使用两个组件：Chat.vue和LoginForm.vue。首先，我们需要在Chat.vue组件中创建一个socket.io实例，用于发送和接收实时消息。在这里，我将使用setup()钩子函数来实现此操作：

import { ref, reactive, onMounted } from 'vue'

import io from 'socket.io-client'
const Chat = {
  setup() {
    const messages = ref([])
    const socket = io('http://localhost:3000')
    const state = reactive({
      message: ''
    })
    const sendMessage = () => {
      if (state.message) {
        socket.emit('message', state.message)
        state.message = ''
      }
    }
    socket.on('message', (data) => {
      messages.value.push(data)
    })
    onMounted(() => {
        document.title = `Chat Room`
    });
    return {
      messages,
      state,
      sendMessage,
    }
  }
}
export default Chat

在这个代码中，我们使用io函数创建socket.io实例，并将它连接到我们的服务器。当我们发送一个新的消息时，我们使用emit()方法发送它，并在收到新消息时，使用on()函数监听message事件并在messages数组中添加新消息。

在Chat.vue组件的template中添加以下代码：

 <template>

  <div class="chat-room">
    <div class="messages">
      <ul>
        <li v-for="message in messages" :key="message">{{ message }}</li>
      </ul>
    </div>
    <el-input v-model="state.message" placeholder="Type message here">
      <el-button slot="append" @click="sendMessage">Send</el-button>
    </el-input>
  </div>
</template>

在这个模板中，我们使用v-for指令遍历messages数组，然后为用户提供一个输入消息的输入框和发送按钮。

2.1 创建后端API

socket.io 是一个实时数据传输协议，我们需要一个后端API来接收和发送数据。在这里，我将使用Node.js和Express框架来创建API。首先，我们需要在项目的根目录下创建一个名为server.js的文件。之后，我们需要安装Express：

npm install express --save

之后在server.js中添加以下代码：

const express = require('express')

const app = express()
const http = require('http').createServer(app)
const io = require('socket.io')(http)
app.use(express.static(__dirname + '/public'))
io.on('connection', (socket) => {
  console.log('Socket connected')
  socket.on('message', (message) => {
    io.emit('message', message)
  })
  socket.on('disconnect', () => {
    console.log('Socket disconnected')
  })
})
http.listen(3000, () => {
  console.log('Server started')
})

在这个代码中，我们创建了一个名为app的Express实例，并在服务器上创建了一个Socket.io实例。随后，我们使用io.on()函数监听connection事件，当用户连接到Socket.io时，我们使用emit()方法向所有连接的客户端广播消息。在这里，我们还使用了console.log()函数记录每个连接和断开连接的事件。

在完成了这个文件的编写之后，我们可以使用以下命令来启动服务器：

node server.js

2.2 创建登录表单

接下来，我们需要创建一个简单的登录表单，让用户输入用户名并加入聊天室。我们将使用LoginForm.vue组件来实现此操作。我们将使用El-form组件、El-form-item组件、El-button组件和El-input组件来创建登录表单。

在LoginForm.vue中添加以下代码：

 <template>

  <el-form ref="form" :model="form" label-width="70px" class="login-form">
    <el-form-item label="Username:" prop="username">
      <el-input v-model="form.username" clearable allow-expression></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" @click="joinChat">Join Chat</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive } from 'vue'
const LoginForm = {
  setup() {
    const form = reactive({
      username: ''
    })
    const joinChat = () => {
      if (form.username) {
        localStorage.setItem('username', form.username)
        location.href = '/chat'
      }
    }
    return {
      form,
      joinChat,
    }
  }
}
export default LoginForm

在这个代码中，我们使用 reactive() 函数创建了一个名为 form 的响应式对象。当用户点击加入聊天室的按钮时，我们将用户名保存在 localStorage 中，并使用 location.href 跳转到聊天室界面。

在Chat.vue中引用LoginForm组件：

<template>

  <div>
    <login-form />
  </div>
</template>
<script>
import LoginForm from './LoginForm.vue'
const Chat = {
  components: {
    LoginForm
  }
}
export default Chat

3.总结

在本文中，我们学习了如何使用Vue和Element-plus构建实时聊天应用程序。我们使用Socket.io来实现实时通信，使用Express来创建后端API。我们学习了如何使用El-form组件、El-form-item组件、El-button组件和El-input组件来创建表单和输入框，以及如何使用Vue的响应式数据来动态呈现聊天室中的消息。

你现在已经拥有了一个完整的功能实时聊天应用程序，并理解Vue和Element-plus如何一起工作。如果你对本文提供的内容感兴趣，请继续阅读Vue和Element-plus官方文档，以了解它们的所有功能和用法。