vue项目里面 WebSocket全局封装使用

很高兴回答您的问题。在 Vue 项目中，可以通过在 main.js 中使用 Vue.prototype 创建全局 WebSocket 对象，以便在整个项目中共享：

import Vue from 'vue';
import WebSocket from 'vue-native-websocket';

Vue.use(WebSocket, 'ws://localhost:8080', { reconnection: true });

// 在组件中使用全局 WebSocket 对象
this.$socket.send('Hello World!');

通过这种方式，你可以很方便地在 Vue 组件中使用 WebSocket 进行数据通讯。如有疑问，请随时和我交流哦！

相关问题

uniapp websocket 全局封装 并使用例子

Uniapp 提供了使用 WebSocket 的 API，我们可以在全局封装一层 WebSocket 的封装，方便调用。

下面是一个 WebSocket 封装的例子：

// websocket.js
const wsUrl = 'ws://localhost:8080'

export default {
  ws: null,
  isInit: false,
  initWebSocket() {
    this.ws = uni.connectSocket({
      url: wsUrl,
      complete: () => {
        console.log('WebSocket连接已打开！')
      }
    })
    this.isInit = true
    this.ws.onOpen(() => {
      console.log('WebSocket连接已打开！')
    })
    this.ws.onMessage((res) => {
      console.log('收到服务器消息', res)
    })
    this.ws.onError((err) => {
      console.log('WebSocket连接打开失败，请检查！', err)
    })
    this.ws.onClose(() => {
      console.log('WebSocket连接已关闭！')
      this.isInit = false
    })
  },
  sendMsg(msg) {
    if (!this.isInit) {
      this.initWebSocket()
    }
    this.ws.send({
      data: msg,
      success: () => {
        console.log('发送成功')
      },
      fail: (err) => {
        console.log('发送失败', err)
      }
    })
  },
  closeWebSocket() {
    if (this.isInit) {
      this.ws.close()
    }
  }
}

在 `main.js` 中引入并挂载：

// main.js
import websocket from './websocket.js'

Vue.prototype.$websocket = websocket

调用：

// 发送消息
this.$websocket.sendMsg('Hello World!')

// 关闭连接
this.$websocket.closeWebSocket()

uniapp websocket 全局封装了，在页面中 怎么接收消息

在 uniapp 中使用 WebSocket 的步骤如下：

1. 在 `main.js` 中引入并初始化 WebSocket：

import { createSocket } from '@/utils/socket.js'

Vue.prototype.$socket = createSocket()

其中 `createSocket` 是一个自定义的函数，用于创建 WebSocket 实例。具体实现可以参考下面的代码。

2. 在页面中监听 WebSocket 消息：

onLoad() {
  this.$socket.onMessage((event) => {
    console.log('接收到消息：', event.data)
  })
}

其中 `onMessage` 方法用于监听 WebSocket 的消息事件，当有消息到达时会触发回调函数。

3. 发送消息：

this.$socket.send('Hello, WebSocket!')

上述代码会向服务器发送一条消息。

下面是一个完整的 `socket.js` 文件示例：

const SOCKET_URL = 'ws://localhost:8080/ws'

export function createSocket() {
  const socket = new WebSocket(SOCKET_URL)

  socket.onopen = () => {
    console.log('WebSocket 已连接')
  }

  socket.onclose = () => {
    console.log('WebSocket 已关闭')
  }

  socket.onerror = (error) => {
    console.error('WebSocket 错误：', error)
  }

  return {
    send(data) {
      socket.send(data)
    },
    onMessage(callback) {
      socket.onmessage = callback
    },
    close() {
      socket.close()
    }
  }
}

该文件导出了一个 `createSocket` 函数，用于创建 WebSocket 实例。在该函数中，我们监听了 WebSocket 的各种事件，并返回了一个对象，包含了 `send`、`onMessage` 和 `close` 方法，分别用于发送消息、监听消息和关闭连接。