NativeScript Yoonit 摄像头

使用 NativeScript 和 WebSocket 在 Android 和 iOS 中构建现代应用程序

• 稳定的 WebSocket 连接
• 现代 JS 代码 (ESNext)
• 在模拟器和真实设备上运行
• 超时配置
• 自动重连
• 代理选项
• 自定义头信息
• VueJS 插件

赞助商

白金级

成为赞助商！

安装

npm i -s @yoonit/nativescript-websocket

用法

所有由 @yoonit/nativescript-websocket 提供的功能都通过 YoonitWebSocket 对象访问。以下是我们提供的基本用法代码，更多详细信息，请参阅 方法 或 Vue 示例。

VueJS 插件

main.js

import Vue from 'nativescript-vue'
import YoonitWebSocket from '@yoonit/nativescript-websocket/vue'

Vue.use(
  YoonitWebSocket,
  'wss://echo.websocket.org/',
  {
    protocol: '',
    timeout: 1000,
    headers: [],
    reconnect: true,
    delay: 1000,
    debug: false,
    proxy: {
      address: '',
      port: ''
    }
  }
)

之后，您可以在整个项目中使用 this.$yoo.socket 访问 socket 对象

Angular、React、Svelte 或任何其他框架

目前我们无法提供除 VueJS 以外的其他框架集成，您可以自由创建并发送 PR 给我们。但这是一个纯 NativeScript 插件，如果您知道如何操作您喜欢的平台，您将能够将其包含到您的项目中。

Vue 组件

使用 Yoonit 样式声明事件

App.vue

<template>
  <Page @loaded="doLoaded"></Page>
</template>

<script>
export default {
  data: () => ({
    interval: null
  }),
  methods: {
    doLoaded () {
      // start the connection
      this.$yoo.socket.open()
    },
    doPing () {
      this.interval = setInterval(() => {
        if (!this.$yoo.socket.getStatus()) {
          return console.log('[YooSocket] Socket closed')
        }

        console.log("[YooSocket] Sending 'echo' message!")

        // add your message/file to queue and call 'send' method
        return this.$yoo.socket.push('echo')
      }, 2000)
    }
  },
  yoo: {
    socket: {
      events: {
        open ($socket) {
          console.log("[YooSocket] Hey! I'm connected!")

          clearInterval(this.interval)
          return this.doPing()
        },
        message ($socket, message) {
          if (!message) {
            console.log("[YooSocket] Message is empty")
          }

          console.log(`[YooSocket] Received Message: '${message}'!`)
        },
        close () {
          console.log("[YooSocket] Socket was closed")
        },
        error () {
          console.log("[YooSocket] Socket had an error")
        }
      }
    }
  }
}
</script>

或使用您已创建的自定义方法声明事件

App.vue

<template>
  <Page @loaded="doLoaded"></Page>
</template>

<script>
export default {
  data: () => ({
    interval: null
  }),
  methods: {
    doLoaded () {
      // start the connection
      this.$yoo.socket.open()

      // declare all callback events
      this.$yoo.socket.events({
        open: this.doSocketOpen,
        message: this.doReceivedMessage,
        close: this.doSocketClose,
        error: this.doSocketError
      })
    },

    doPing () {
      this.interval = setInterval(() => {
        if (!this.$yoo.socket.getStatus()) {
          return console.log('[YooSocket] Socket closed')
        }

        console.log("[YooSocket] Sending 'echo' message!")

        // add your message/file to queue and call 'send' method
        return this.$yoo.socket.push('echo')
      }, 2000)
    },

    doSocketOpen ($socket) {
      console.log("[YooSocket] Hey! I'm connected!")

      clearInterval(this.interval)

      // onOpen event calls your function
      return this.doPing()
    },

    doSocketClose () {
      // onClose event
      return console.log('[YooSocket] Socket was closed')
    },

    doSocketError () {
      // onError event
      return console.log('[YooSocket] Socket had an error')
    },

    doReceivedMessage ($socket, message) {
      // onMessage event
      return console.log(`[YooSocket] Received Message: '${message}'!`)
    },
  }
}
</script>

API

方法

属性

参与贡献并使其变得更好

克隆仓库，修改您需要的内容并提交PR。对于提交信息，我们使用常规提交规范。

贡献总是受欢迎的！

由Yoonit团队用❤编写代码