uniapp使用websocket

一、uniapp使用websocket proto

WebSocket是HTML5的一个新协议，它实现了客户端与服务器端通过一个长久的连接通道来进行双向数据传输。WebSocket协议目前主要应用于HTML5的游戏开发、IM即时消息等领域。在uniapp中使用原生WebSocket API比较麻烦，需要手动实现一些封装和处理，而使用websocket proto插件可以使WebSocket的使用变得简单和方便。

代码如下：

import { WebSocketProto } from 'websocket-proto'

export default {
  data () {
    return {
      socket: null
    }
  },
  created () {
    this.socket = new WebSocketProto('ws://localhost:3000')
    this.socket.onopen = () => {
      console.log('WebSocket connected!')
    }
    this.socket.onmessage = (event) => {
      console.log(event.data)
    }
    this.socket.onclose = () => {
      console.log('WebSocket closed!')
    }
    this.socket.onerror = () => {
      console.error('WebSocket error!')
    }
  },

  methods: {
    sendMsg () {
      let msg = {
        action: 'xxx',
        data: {
          ...
        }
      }
      this.socket.sendMessage(msg)
    }
  }
}

二、uniapp使用socket

在uniapp中使用WebSocket不是唯一的选择，我们还可以使用uni-app自带的socket模块。使用socket模块可以方便地进行数据传输和处理，提高开发效率。

代码如下：

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

let socket = new Socket({
  url: 'ws://localhost:3000'
})

socket.on('open', () => {
  console.log('WebSocket connected!')
})

socket.on('message', (data) => {
  console.log(data)
})

socket.on('close', () => {
  console.log('WebSocket closed!')
})

socket.on('error', () => {
  console.error('WebSocket error!')
})

socket.send('xxx')

三、uniapp使用websocket和webapi通信

在uniapp中，我们可以使用uni.request方法和WebSocket配合进行通信。在WebSocket的onmessage事件中，我们把获取到的数据使用uni.request方法发送到后台，后台处理完成后再把结果返回给前端。

代码如下：

import { WebSocketProto } from 'websocket-proto'

export default {
  created () {
    this.socket = new WebSocketProto('ws://localhost:3000')
    this.socket.onmessage = (event) => {
      uni.request({
        url: 'url',
        data: event.data,
        success: (res) => {
          console.log(res.data)
        },
        fail: (err) => {
          console.log(err)
        }
      })
    }
  },
  methods: {
    sendMsg () {
      let msg = {
        action: 'xxx',
        data: {
          ...
        }
      }
      this.socket.sendMessage(msg)
    }
  }
}

四、uniapp使用vue3

uniapp在2.0版本中升级到了Vue3，Vue3相比于Vue2主要有性能优化和Composition API等方面的改进。在使用WebSocket时，Vue3中提供了reactive和ref等更方便的数据响应式处理方式，使得开发体验更加流畅。

代码如下：

import { reactive } from 'vue'
import { WebSocketProto } from 'websocket-proto'

export default {
  setup() {
    const state = reactive({
      socket: new WebSocketProto('ws://localhost:3000')
    })

    state.socket.onopen = () => {
      console.log('WebSocket connected!')
    }
    state.socket.onmessage = (event) => {
      console.log(event.data)
    }
    state.socket.onclose = () => {
      console.log('WebSocket closed!')
    }
    state.socket.onerror = () => {
      console.error('WebSocket error!')
    }

    const sendMsg = () => {
      let msg = {
        action: 'xxx',
        data: {
          ...
        }
      }
      state.socket.sendMessage(msg)
    }

    return {
      state,
      sendMsg
    }
  }
}

五、uniapp使用sass

uniapp中可以使用Sass预编译样式，这使得我们在Css编写中更加方便，也能够更好地保持代码整洁。在WebSocket的UI展示中，我们可以使用Sass实现更丰富的样式和更好的可读性。

六、uniapp使用mqtt教程

mqtt是一种轻量级的协议，它适用于IoT、M2M和移动通信等场景。在uniapp中，我们可以使用mqtt.js插件开发mqtt客户端，并实现与服务器的通信。

代码如下：

import mqtt from 'mqtt'
let client = mqtt.connect('mqtt://localhost:1883')

client.on('connect', () => {
  console.log('MQTT client connected!')
})

client.on('message', (topic, message) => {
  console.log(message.toString())
})

client.subscribe('test')

client.publish('test', 'hello mqtt')

七、uniapp使用vuex

在uniapp中，我们可以使用Vuex与WebSocket配合实现状态管理和数据传输，以更好地管理和展示数据。

代码如下：

import { WebSocketProto } from 'websocket-proto'
import store from '@/store/index'

export default {
  created () {
    this.socket = new WebSocketProto('ws://localhost:3000')
    this.socket.onmessage = (event) => {
      store.commit('updateData', event.data)
    }
  },
  methods: {
    sendMsg () {
      let msg = {
        action: 'xxx',
        data: {
          ...
        }
      }
      this.socket.sendMessage(msg)
    }
  }
}

八、uniapp使用icon

在uniapp中，我们可以使用iconfont和SvgIcon组件实现更美观的图标展示。在WebSocket的UI界面中，我们可以使用icon来更好地呈现数据和状态。

九、uniapp使用echart

ECharts是一套基于JavaScript的开源图表库，可以适用于各种场景中的数据可视化。在uniapp中，我们可以使用ECharts插件来展示WebSocket产生的数据。

代码如下：

  

<script>
import * as echarts from 'echarts'

export default {
  mounted () {
    this.initChart()
  },

  methods: {
    initChart () {
      const canvas = this.$refs.canvas
      const echartObj = this.$echarts.init(canvas, null, {
        width: uni.upx2px(1000),
        height: uni.upx2px(750),
        devicePixelRatio: uni.getSystemInfoSync().pixelRatio
      })
      echartObj.setOption({
        ...
      })
    }
  }
}
</script>