vue3.0中使用websocket,封装到公共方法的实现

接下来我将详细讲解如何在vue3.0中使用websocket，并将其封装成公共方法。同时，我会提供两条示例来说明具体的实现过程。

前置知识

在继续阅读本文之前，你需要掌握以下技能：

• 了解 Vue3.0 的基本语法；
• 知道如何使用 WebSocket；
• 理解 JavaScript 中的 Promise。

如果你尚未掌握上述知识，建议你先花费一定时间学习这些基础内容。

实现步骤

下面是使用 WebSocket 封装为公共方法的主要步骤：

步骤一：创建 WebSocket 实例

在使用 WebSocket 时，首先需要创建 WebSocket 实例。在 Vue3.0 中可以使用 provide 和 inject 提供器来创建 WebSocket 实例。首先在 main.js 中创建 WebSocket 实例，并将其注入到 Vue3.0 的实例中：

import createWebSocket from './utils/webSocket'

const app = createApp(App)

const ws = createWebSocket('ws://localhost:8080')
app.provide('websocket', ws)

app.mount('#app')

其中 createWebSocket 函数用于创建 WebSocket 实例。这个函数的具体实现可以在 ./utils/webSocket.js 中定义，稍后将会介绍。

步骤二：封装 WebSocket 方法

在 ./utils/webSocket.js 文件中，我们可以先定义一个 createWebSocket 函数用于创建 WebSocket 实例，具体实现如下：

export default function createWebSocket(url) {
  const ws = new WebSocket(url)

  return {
    ws,
    send: (data) => {
      return new Promise((resolve, reject) => {
        ws.send(JSON.stringify(data))
        resolve()
      })
    },
    onClose: () => {
      return new Promise((resolve, reject) => {
        ws.onclose = () => {
          resolve()
        }
      })
    },
    onMessage: () => {
      return new Promise((resolve, reject) => {
        ws.onmessage = (event) => {
          try {
            const data = JSON.parse(event.data)
            resolve(data)
          } catch (error) {
            reject(error)
          }
        }
      })
    }
  }
}

在这个函数中，我们使用 new WebSocket 创建了一个 WebSocket 实例，通过 return 返回了一个包含 send、onClose 和 onMessage 方法的对象。这三个方法用于向 WebSocket 发送消息、监听 WebSocket 关闭事件以及监听消息事件。

步骤三：使用 WebSocket 方法

在 Vue3.0 中，我们可以使用 inject 来获取 WebSocket 实例。在组件中，我们可以通过注入 WebSocket 实例来调用其方法，示例代码如下：

export default {
  name: 'WebSocketDemo',
  inject: ['websocket'],
  data() {
    return {
      message: '',
      messages: []
    }
  },
  mounted() {
    this.websocket.onMessage().then(data => {
      this.messages.push(data)
    }).catch(error => {
      console.log('error: ', error)
    })
  },
  methods: {
    sendMessage() {
      this.websocket.send({ message: this.message }).then(() => {
        this.message = ''
      }).catch(() => {
        console.log('send message failed')
      })
    },
    close() {
      this.websocket.onClose().then(() => {
        console.log('websocket closed')
      }).catch(() => {
        console.log('websocket close error')
      })
    }
  }
}

在这个组件中，我们通过 inject 获取了 websocket 实例，并使用 onMessage 方法监听了 WebSocket 发送过来的消息。同时，我们还使用了 send 方法向 WebSocket 发送消息，使用 onClose 方法监听 WebSocket 关闭事件。

示例说明

示例一：简单的聊天室应用

下面是一个简单的聊天室应用，使用 WebSocket 实现前后端通信，代码如下：

// App.vue
<template>
  <div>
    <div>
      <div v-for="msg in messages">{{ msg }}</div>
    </div>
    <div>
      <input v-model="message"/>
      <button @click="sendMessage()">Send</button>
      <button @click="close()">Close</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WebSocketDemo',
  inject: ['websocket'],
  data() {
    return {
      message: '',
      messages: []
    }
  },
  mounted() {
    this.websocket.onMessage().then(data => {
      this.messages.push(data.message)
    })
  },
  methods: {
    sendMessage() {
      this.websocket.send({ message: this.message }).then(() => {
        this.message = ''
      }).catch(() => {
        console.log('send message failed')
      })
    },
    close() {
      this.websocket.onClose().then(() => {
        console.log('websocket closed')
      }).catch(() => {
        console.log('websocket close error')
      })
    }
  }
}
</script>

示例二：展示实时股票价格

下面是一个展示股票价格的应用，使用 WebSocket 实现实时更新股票价格，代码如下：

<!-- StockPrice.vue -->
<template>
  <div>
    <div>
      <p>{{ stocks.name }}</p>
      <p>Price: {{ stocks.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StockPrice',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  inject: ['websocket'],
  data() {
    return {
      stocks: {
        name: '',
        price: ''
      }
    }
  },
  mounted() {
    this.websocket.onMessage().then(data => {
      if (data.name === this.name) {
        this.stocks = data
      }
    })
  }
}
</script>

在这个组件中，我们使用 WebSockets 监听来自服务器的消息。如果收到一个与所需股票的名称相同的股票消息，我们就会相应地更新股票价格。