uniapp中使用uni.connectSocket与websocket完成连接后如何获取到websocket中的数据并且渲染到组件内

在使用uni.connectSocket与websocket完成连接后，可以使用uni.onSocketMessage方法监听websocket接收到的数据，然后将数据渲染到组件内。

具体步骤如下：

1. 在组件的created或mounted生命周期中使用uni.connectSocket与websocket建立连接。

2. 使用uni.onSocketMessage方法监听websocket接收到的数据，并将数据存储到组件内的变量中。

3. 在组件内使用数据绑定将变量中的数据渲染到对应的组件中。

示例代码如下：

<template>
  <view>{{message}}</view>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 存储websocket接收到的数据
    }
  },
  created() {
    // 建立websocket连接
    uni.connectSocket({
      url: 'ws://localhost:8080'
    })

    // 监听websocket接收到的数据
    uni.onSocketMessage((res) => {
      this.message = res.data // 将数据存储到变量中
    })
  }
}
</script>

需要注意的是，uni.connectSocket与websocket建立连接后，如果需要发送数据，可以使用uni.sendSocketMessage方法。同时，建立连接后如果需要关闭连接，可以使用uni.closeSocket方法。