在小程序中如何实现实时拍卖功能

最新推荐文章于 2024-07-08 10:10:06 发布

胖者是谁

最新推荐文章于 2024-07-08 10:10:06 发布

阅读量1.3k

点赞数 1

分类专栏： uni-app vue 文章标签： uni-app 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_72383454/article/details/129238859

版权

vue 同时被 2 个专栏收录

23 篇文章 2 订阅

订阅专栏

uni-app

2 篇文章 0 订阅

订阅专栏

实时拍卖功能的实现可以分为以下几个步骤：

实现商品展示：在小程序中，可以通过列表、轮播图等方式展示拍卖的商品信息，包括商品名称、图片、起拍价、拍卖时间等。

实现出价功能：用户可以通过小程序界面输入自己的出价，系统需要记录用户出价和出价时间。

实时更新出价情况：在拍卖过程中，系统需要实时更新当前商品的出价情况，包括当前最高出价、出价次数、出价用户等信息。

实现拍卖结束逻辑：当拍卖时间到期或出价次数达到设定值时，系统需要自动结束拍卖，并确定最终的出价者。

实现付款和交付流程：在最终确定出价者后，系统需要通知该用户付款，并提供商品交付方式。

针对以上几个步骤，可以考虑使用小程序框架中提供的一些组件和API实现，如列表、轮播图、模态框、表单、计时器等。同时，需要使用小程序后台技术实现数据的存储和更新，可以使用小程序提供的云开发服务，也可以使用自己的服务器。

需要注意的是，拍卖功能的实现需要考虑到并发访问、数据安全、用户体验等多个方面，因此需要进行充分的测试和优化，确保系统稳定可靠。

如何通过 Websocket实现实时更新出价呢？

1.在小程序端，创建 WebSocket 连接：使用小程序提供的 wx.connectSocket 方法创建一个 WebSocket 连接，指定连接地址。

2.在服务器端，监听 WebSocket 连接请求：使用服务器端的 WebSocket 库监听连接请求，建立连接成功后，保存该连接的 WebSocket 对象。

3.在服务器端，监听出价消息：当有用户出价时，服务器端需要将该消息广播给所有连接的客户端。可以在服务器端使用 WebSocket 库的广播方法将消息发送给所有连接的客户端。

4.在小程序端，监听 WebSocket 消息：使用 wx.onSocketMessage 方法监听服务器端发送的消息，在收到消息后，更新出价信息。

5.在小程序端，关闭 WebSocket 连接：当拍卖结束或用户离开页面时，使用 wx.closeSocket 方法关闭 WebSocket 连接。

使用 WebSocket 实现实时更新出价的优点是能够实现低延迟、高并发的实时通信，但需要注意的是，需要在服务器端进行一定的优化，避免因连接数过多而导致服务器压力过大。同时，为了确保数据的安全性，还需要在 WebSocket 连接的建立和数据传输过程中进行必要的加密和鉴权操作。

以下是一个简单的示例代码：

小程序端代码：

// 建立 WebSocket 连接
wx.connectSocket({
  url: 'wss://example.com/auction'
})

// 监听 WebSocket 连接打开事件
wx.onSocketOpen(() => {
  console.log('WebSocket 连接已打开')
})

// 监听 WebSocket 接收到服务器消息的事件
wx.onSocketMessage((res) => {
  console.log('收到服务器消息：', res.data)
  // 更新出价信息
  updateBidInfo(res.data)
})

// 关闭 WebSocket 连接
wx.onUnload(() => {
  wx.closeSocket()
})

服务器端代码：

const WebSocket = require('ws')

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 })

// 保存所有连接的 WebSocket 对象
const sockets = new Set()

// 监听连接事件
wss.on('connection', (ws) => {
  console.log('WebSocket 连接已建立')
  // 将 WebSocket 对象加入 sockets 集合中
  sockets.add(ws)

  // 监听 WebSocket 消息事件
  ws.on('message', (data) => {
    console.log(`收到客户端消息：${data}`)
    // 广播消息给所有连接的客户端
    sockets.forEach((socket) => {
      if (socket.readyState === WebSocket.OPEN) {
        socket.send(data)
      }
    })
  })

  // 监听 WebSocket 关闭事件
  ws.on('close', () => {
    console.log('WebSocket 连接已关闭')
    // 将 WebSocket 对象从 sockets 集合中删除
    sockets.delete(ws)
  })
})

以上示例代码仅为演示用途，具体实现方式可能会因场景而异。在实际应用中，还需要根据需求进行更加详细的开发和测试。

那么，我们如何写出在uni-app中使用websocket实现对数据的更新呢？

先引入一个概念—— 心跳算法。
在使用 WebSocket 连接时，为了保持连接的稳定性和可靠性，常常会使用心跳算法。心跳算法的原理是在一定时间间隔内发送一个心跳包，如果在一定时间内没有收到服务器的响应，则判定连接已经断开。

以下是一个简单的示例代码：

// 定义心跳时间间隔，单位：ms
const heartbeatInterval = 10000

// 定义心跳包内容
const heartbeatMsg = {
  type: 'heartbeat',
  data: 'ping',
}

// 定义心跳计时器
let heartbeatTimer = null

// 建立 WebSocket 连接
let socketTask = uni.connectSocket({
  url: 'wss://example.com/auction',
})

// 监听 WebSocket 连接打开事件
socketTask.onOpen(() => {
  console.log('WebSocket 连接已打开')
  // 启动心跳计时器
  startHeartbeat()
})

// 监听 WebSocket 接收到服务器消息的事件
socketTask.onMessage((res) => {
  console.log('收到服务器消息：', res.data)
  // 更新出价信息
  updateBidInfo(res.data)
  // 收到服务器消息后，重置心跳计时器
  resetHeartbeat()
})

// 关闭 WebSocket 连接
uni.onUnload(() => {
  socketTask.close()
  // 清除心跳计时器
  clearTimeout(heartbeatTimer)
})

// 启动心跳计时器
function startHeartbeat() {
  heartbeatTimer = setTimeout(() => {
    console.log('发送心跳包')
    socketTask.send(JSON.stringify(heartbeatMsg))
    startHeartbeat()
  }, heartbeatInterval)
}

// 重置心跳计时器
function resetHeartbeat() {
  clearTimeout(heartbeatTimer)
  startHeartbeat()
}

在以上示例代码中，首先定义了心跳时间间隔和心跳包内容。在 WebSocket 连接打开后，启动了心跳计时器，定时发送心跳包。在收到服务器消息后，重置心跳计时器，以避免不必要的断开连接。在页面卸载时，需要清除心跳计时器，避免资源浪费。需要注意的是，在实际应用中，还需要根据需求进行更加详细的开发和测试，以确保心跳算法的稳定性和可靠性。

在使用 uni.connectSocket 方法时，需要将返回值保存到一个变量中，以便在后续操作中使用。与小程序端类似，可以使用 socketTask.onOpen 方法监听 WebSocket 连接打开事件，使用 socketTask.onMessage 方法监听接收到服务器消息的事件。在接收到消息后，使用 updateBidInfo 函数更新出价信息。最后，在页面卸载时使用 socketTask.close 方法关闭 WebSocket 连接。

最后，在uni-app中使用websocket并加入心跳算法后做出封装，实现一个拍卖功能

<!-- Auction.vue -->
<template>
  <div>
    <div>当前最高价：{{ bidInfo.price }} 元</div>
    <div>当前出价人：{{ bidInfo.username }}</div>
    <div>出价次数：{{ bidInfo.count }} 次</div>
    <div>
      <button @click="placeBid">我要出价</button>
      <input type="number" v-model.number="newPrice" :disabled="isDisabled" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    auctionId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      newPrice: 0,
      bidInfo: {
        price: 0,
        username: '',
        count: 0,
      },
      isDisabled: false,
    }
  },
  mounted() {
    this.connectWebSocket()
  },
  beforeUnmount() {
    this.disconnectWebSocket()
  },
  methods: {
    // 建立 WebSocket 连接
    connectWebSocket() {
      const url = `wss://example.com/auction/${this.auctionId}`
      this.socketTask = uni.connectSocket({
        url: url,
      })
      this.socketTask.onOpen(() => {
        console.log(`WebSocket 连接已打开：${url}`)
        // 启动心跳计时器
        this.startHeartbeat()
      })
      this.socketTask.onMessage((res) => {
        console.log('收到服务器消息：', res.data)
        const data = JSON.parse(res.data)
        if (data.type === 'bidInfo') {
          this.bidInfo = data.data
        } else if (data.type === 'bidResult') {
          if (data.data === 'success') {
            uni.showToast({
              title: '出价成功',
              icon: 'success',
            })
          } else if (data.data === 'fail') {
            uni.showToast({
              title: '出价失败',
              icon: 'none',
            })
          }
        }
        // 收到服务器消息后，重置心跳计时器
        this.resetHeartbeat()
      })
    },
    // 关闭 WebSocket 连接
    disconnectWebSocket() {
      if (this.socketTask) {
        this.socketTask.close()
        // 清除心跳计时器
        clearTimeout(this.heartbeatTimer)
      }
    },
    // 发送出价信息
    placeBid() {
      this.isDisabled = true
      const data = {
        type: 'placeBid',
        data: {
          price: this.newPrice,
        },
      }
      this.socketTask.send(JSON.stringify(data))
    },
    // 启动心跳计时器
    startHeartbeat() {
      const heartbeatMsg = {
        type: 'heartbeat',
        data: 'ping',
      }
      const heartbeatInterval = 10000
      this.heartbeatTimer = setTimeout(() => {
        console.log('发送心跳包')
        this.socketTask.send(JSON.stringify(heartbeatMsg))
        this.startHeartbeat()
      }, heartbeatInterval)
    },
    // 重置心跳计时器
    resetHeartbeat() {
      clearTimeout(this.heartbeatTimer)
      this.startHeartbeat()
    },
  },
}
</script>

以上示例代码中，使用了 uni.connectSocket 方法建立 WebSocket 连接，并在组件的生命周期方法 mounted 中调用该方法。

建立连接后，我们需要在 socketTask 实例上注册 onOpen、onMessage、onError、onClose 四个事件的回调函数，以便处理 WebSocket 连接的状态和收到的消息。在本例中，我们只处理了 onOpen 和 onMessage 事件。

在 onOpen 回调函数中，我们打印了连接的 URL，并启动了心跳计时器。

在 onMessage 回调函数中，我们首先解析了收到的消息，然后根据消息类型进行不同的处理。如果收到的是出价信息，则更新当前最高价和出价人等信息；如果收到的是出价结果信息，则根据结果显示相应的提示信息。

除了处理消息外，我们还在 onMessage 回调函数中重置了心跳计时器，以确保在收到服务器消息后能够继续发送心跳包。

在组件的生命周期方法 beforeUnmount 中，我们调用了 socketTask.close 方法关闭 WebSocket 连接，并清除了心跳计时器。

组件中的 placeBid 方法用于向服务器发送出价信息。该方法首先禁用了出价输入框，然后构造了一个包含出价信息的对象，并通过 socketTask.send 方法将其发送给服务器。

最后，我们在组件中封装了一个心跳算法。该算法通过定时器循环发送心跳包，以保持 WebSocket 连接的稳定性。同时，我们在收到服务器消息后重置了心跳计时器，以防止心跳包与服务器的其他消息发生冲突。