Vue + ElementUI + Websockets 实现 消息通知

实现消息通知，可以借助Vue、ElementUI和Websockets，以下是基本的实现步骤：

1. 安装Vue和ElementUI

使用命令行工具，进入项目目录，执行以下命令：

npm install vue
npm install element-ui

2. 引入ElementUI组件

在Vue的入口文件中，引入需要使用的ElementUI组件，例如Notification、MessageBox等。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建WebSocket连接

在Vue组件中通过Websockets连接后端服务器，建立WebSocket连接，接收服务器推送的消息。

// 建立WebSocket连接
const webSocket = new WebSocket('ws://localhost:8080')

// 监听WebSocket连接打开事件
webSocket.onopen = function () {
  console.log('WebSocket连接已打开')
}

// 监听WebSocket接收到消息事件
webSocket.onmessage = function (event) {
  console.log('WebSocket接收到消息：' + event.data)
  // 处理接收到的消息
}

// 监听WebSocket连接关闭事件
webSocket.onclose = function () {
  console.log('WebSocket连接已关闭')
}

4. 处理接收到的消息

在WebSocket监听到有消息时，可以使用ElementUI的Notification组件弹出通知框，提醒用户有新消息。

// 处理WebSocket接收到的消息
webSocket.onmessage = function (event) {
  console.log('WebSocket接收到消息：' + event.data)

  // 弹出通知框
  const msg = JSON.parse(event.data)
  Notification({
    title: '新消息',
    message: msg.content
  })

  // 弹出确认框
  MessageBox.confirm(msg.content, '新消息', {
    confirmButtonText: '查看详情',
    cancelButtonText: '忽略',
    type: 'info'
  }).then(() => {
    // 用户点击了查看详情按钮
    // 处理跳转逻辑
  }).catch(() => {
    // 用户点击了忽略按钮
    // 不做任何处理
  })
}

以上就是使用Vue、ElementUI和Websockets实现消息通知的基本步骤。需要注意的是，WebSocket连接的建立和关闭需要在组件的mounted和beforeDestroy生命周期函数中分别进行。