@dobot-plus/template 1.0.0

package/.dobot/.sftprc

@@ -0,0 +1,3 @@
+username=root
+password=9f128f8d2342a690a435ee0c6cdcf916
+port=22

package/.dobot/components/DobotPlusApp.tsx

@@ -0,0 +1,78 @@
+import { ReactNode, useEffect } from 'react'
+import { MqttWebSocketClient } from '../utils/mqtt'
+import dptConfig from '../../dpt.json'
+import MainConfig from '../../configs/Main.json'
+import { getPluginPort } from '@dobot/http/axios'
+import '@dobot/protocol/methodsHandler'
+import { toolActions } from '@dobot/store/actions/toolActions'
+import store from '@dobot/store'
+import { useSelector } from 'react-redux'
+import { IStoreState } from '@dobot/store/types'
+
+type BasicProps = {
+  children: ReactNode
+}
+
+export type DobotPlusAppProps =
+  | (BasicProps & {
+      useMqtt: true
+      topic?: string
+      onMessage: (data: object | string) => void
+      port?: number
+    })
+  | (BasicProps & {
+      useMqtt?: false
+    })
+
+export function DobotPlusApp(props: DobotPlusAppProps) {
+  const { children, useMqtt } = props
+  const { portData } = useSelector((state: IStoreState) => state.toolReducer)
+  useEffect(() => {
+    const pluginName = MainConfig.name
+    const pluginVersion = MainConfig.version
+
+    if (useMqtt) {
+      const { topic, onMessage, port } = props
+
+      const ip = process.env.NODE_ENV === 'production' ? portData.ip : dptConfig.ip
+
+      if (ip && onMessage) {
+        const serverUrl = `ws://${ip}:${port || 8083}/mqtt`
+        const clientId = `${pluginName}_clientId`
+        const mqttClient = new MqttWebSocketClient(serverUrl, clientId)
+        mqttClient.connect()
+        mqttClient.subscribe(topic || `${pluginName}Status`, (topic, buf) => {
+          let data = {}
+          try {
+            data = JSON.parse(buf.toString())
+          } catch {
+            data = buf.toString()
+          }
+          onMessage(data)
+        })
+      }
+    }
+
+    getPluginPort()
+      .then((res) => {
+        const { data } = res
+        const pluginKey = data[`${pluginName}_v${pluginVersion}`]
+        if (data) {
+          console.log('pluginPorts', data)
+          const pluginPort = data[pluginKey]
+          if (!pluginPort) {
+            setTimeout(() => {
+              getPluginPort()
+            }, 500)
+          } else {
+            store.dispatch(toolActions.setPluginPort(pluginPort))
+          }
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }, [portData.isSync])
+
+  return <>{children}</>
+}

package/.dobot/http/api.json

@@ -0,0 +1,11 @@
+{
+  "demoHttpRequest1": {
+    "url": "demoMethod1"
+  },
+  "demoHttpRequest2": {
+    "url": "demoMethod1"
+  },
+  "demoHttpRequest3": {
+    "url": "demoMethod1"
+  }
+}

package/.dobot/http/api.ts

@@ -0,0 +1,26 @@
+import { AxiosResponse } from 'axios'
+import apiConfig from './api.json'
+import { request } from './axios'
+
+type MethodName = keyof typeof apiConfig
+export const http = {} as {
+  [key in MethodName]: (data?: object) => Promise<AxiosResponse<any, any>>
+}
+
+Object.entries(apiConfig).forEach(([key, value]) => {
+  const { url } = value
+  if (url) {
+    http[key as MethodName] = (data) => {
+      return request({
+        ...value,
+        data
+      })
+    }
+  } else {
+    http[key as MethodName] = (data) => {
+      return new Promise((resolve, reject) => {
+        console.warn('Please check your api config: ', key, data)
+      })
+    }
+  }
+})

package/.dobot/http/api.ts.txt

@@ -0,0 +1,26 @@
+import { AxiosResponse } from 'axios'
+import apiConfig from './api.json'
+import { request } from './axios'
+
+type MethodName = keyof typeof apiConfig
+export const http = {} as {
+  [key in MethodName]: (data?: object) => Promise<AxiosResponse<any, any>>
+}
+
+Object.entries(apiConfig).forEach(([key, value]) => {
+  const { url } = value
+  if (url) {
+    http[key as MethodName] = (data) => {
+      return request({
+        ...value,
+        data
+      })
+    }
+  } else {
+    http[key as MethodName] = (data) => {
+      return new Promise((resolve, reject) => {
+        console.warn('Please check your api config: ', key, data)
+      })
+    }
+  }
+})

package/.dobot/http/axios.ts

@@ -0,0 +1,52 @@
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import dptConfig from '../../dpt.json'
+import pluginConfig from '../../configs/Main.json'
+import store from '@dobot/store'
+
+const instance = axios.create()
+
+instance.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    config.headers.AuthorizationToken = localStorage.getItem('AuthorizationToken') || ''
+    return config
+  },
+  (err: AxiosError) => Promise.reject(err)
+)
+
+instance.interceptors.response.use(
+  (res: AxiosResponse) => {
+    return res
+  },
+  (err: AxiosError) => {
+    return Promise.reject(err)
+  }
+)
+
+export function request(config: AxiosRequestConfig, port?: number) {
+  const { portData } = store.getState().toolReducer
+
+  const options: AxiosRequestConfig = {
+    ...config,
+    withCredentials: true,
+    baseURL: `http://${portData.ip}:${port}/dobotPlus/${pluginConfig.name}_v${pluginConfig.version}`
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    options.baseURL = `/dobotPlus/${pluginConfig.name}_v${pluginConfig.version}`
+  }
+
+  return instance.request({
+    ...options,
+    method: 'post'
+  })
+}
+
+export function getPluginPort() {
+  return instance.request({
+    baseURL: process.env.NODE_ENV !== 'production' ? `` : `http://${dptConfig.ip}:22001`,
+    url: '/dobotPlus/getPorts',
+    method: 'get'
+  })
+}
+
+export default instance

package/.dobot/http/axios.ts.txt

@@ -0,0 +1,52 @@
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import dptConfig from '../../dpt.json'
+import pluginConfig from '../../configs/Main.json'
+import store from '@dobot/store'
+
+const instance = axios.create()
+
+instance.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    config.headers.AuthorizationToken = localStorage.getItem('AuthorizationToken') || ''
+    return config
+  },
+  (err: AxiosError) => Promise.reject(err)
+)
+
+instance.interceptors.response.use(
+  (res: AxiosResponse) => {
+    return res
+  },
+  (err: AxiosError) => {
+    return Promise.reject(err)
+  }
+)
+
+export function request(config: AxiosRequestConfig, port?: number) {
+  const { portData } = store.getState().toolReducer
+
+  const options: AxiosRequestConfig = {
+    ...config,
+    withCredentials: true,
+    baseURL: `http://${portData.ip}:${port}/dobotPlus/${pluginConfig.name}_v${pluginConfig.version}`
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    options.baseURL = `/dobotPlus/${pluginConfig.name}_v${pluginConfig.version}`
+  }
+
+  return instance.request({
+    ...options,
+    method: 'post'
+  })
+}
+
+export function getPluginPort() {
+  return instance.request({
+    baseURL: process.env.NODE_ENV !== 'production' ? `` : `http://${dptConfig.ip}:22001`,
+    url: '/dobotPlus/getPorts',
+    method: 'get'
+  })
+}
+
+export default instance

package/.dobot/http/http.ts

@@ -0,0 +1,22 @@
+import { request } from './axios'
+
+export const demoMethod1 = (data: any) => {
+  return request({
+    url: 'demoMethod1',
+    data
+  })
+}
+
+export const demoMethod2 = (data: any) => {
+  return request({
+    url: 'demoMethod2',
+    data
+  })
+}
+
+export const demoMethod3 = (data: any) => {
+  return request({
+    url: 'demoMethod3',
+    data
+  })
+}

package/.dobot/http/http.ts.txt

@@ -0,0 +1,22 @@
+import { request } from './axios'
+
+export const demoMethod1 = (data: any) => {
+  return request({
+    url: 'demoMethod1',
+    data
+  })
+}
+
+export const demoMethod2 = (data: any) => {
+  return request({
+    url: 'demoMethod2',
+    data
+  })
+}
+
+export const demoMethod3 = (data: any) => {
+  return request({
+    url: 'demoMethod3',
+    data
+  })
+}

package/.dobot/index.ts

@@ -0,0 +1,2 @@
+export * as http from './http/http'
+export { DobotPlusApp } from './components/DobotPlusApp'

package/.dobot/index.txt

@@ -0,0 +1,2 @@
+export * as http from './http/http'
+export { DobotPlusApp } from './components/DobotPlusApp'

package/.dobot/protocol/keyBoard.ts

@@ -0,0 +1,18 @@
+import { isInIframe } from '@dobot/utils/tool'
+import keyboardLink from 'keyboard-link'
+if (!isInIframe) {
+  const ws = new WebSocket('ws:127.0.0.1:10086')
+  ws.onopen = () => {
+    console.log('链接成功')
+    ws.close()
+
+    new keyboardLink({
+      host: 'ws:127.0.0.1',
+      port: 10086
+    })
+  }
+
+  ws.onerror = () => {
+    console.log('链接失败')
+  }
+}

package/.dobot/protocol/keyBoard.ts.txt

@@ -0,0 +1,18 @@
+import { isInIframe } from '@dobot/utils/tool'
+import keyboardLink from 'keyboard-link'
+if (!isInIframe) {
+  const ws = new WebSocket('ws:127.0.0.1:10086')
+  ws.onopen = () => {
+    console.log('链接成功')
+    ws.close()
+
+    new keyboardLink({
+      host: 'ws:127.0.0.1',
+      port: 10086
+    })
+  }
+
+  ws.onerror = () => {
+    console.log('链接失败')
+  }
+}

package/.dobot/protocol/methodsHandler.ts

@@ -0,0 +1,15 @@
+import { PostMessageHandler } from './postMessageHandler'
+import { WebSocketHandler } from './websocketHandler'
+import './keyBoard'
+import { isInIframe } from '@dobot/utils/tool'
+
+let methodsHandler: any = undefined
+const postMessageHandler = new PostMessageHandler()
+// 根据环境判断
+if (isInIframe) {
+  methodsHandler = postMessageHandler
+} else {
+  methodsHandler = new WebSocketHandler()
+}
+
+export { methodsHandler, postMessageHandler }

package/.dobot/protocol/methodsHandler.ts.txt

@@ -0,0 +1,15 @@
+import { PostMessageHandler } from './postMessageHandler'
+import { WebSocketHandler } from './websocketHandler'
+import './keyBoard'
+import { isInIframe } from '@dobot/utils/tool'
+
+let methodsHandler: any = undefined
+const postMessageHandler = new PostMessageHandler()
+// 根据环境判断
+if (isInIframe) {
+  methodsHandler = postMessageHandler
+} else {
+  methodsHandler = new WebSocketHandler()
+}
+
+export { methodsHandler, postMessageHandler }

package/.dobot/protocol/postMessageCenter.ts

@@ -0,0 +1,50 @@
+import { jsonSafeParse } from "@dobot/utils/tool"
+
+export class PostMessageCenter {
+  dest: { [iframeName: string]: any }
+  constructor() {
+    this.dest = {}
+  }
+  send(message: any) {
+    if (!message.iframeName) return
+    const iframe = this.dest[message.to || message.iframeName]
+    const origin = this.dest[`${message.to || message.iframeName}Origin`]
+    if (!iframe || !origin) {
+      throw 'please register source and origin firstly'
+    }
+    iframe.postMessage(message, origin)
+  }
+  listen(cb: Function) {
+    window.addEventListener('message', event => {
+
+      const data = jsonSafeParse(event.data)
+
+      const iframeName = data.from || data.iframeName
+      if (
+        iframeName &&
+        [
+          'blockly',
+          'DobotStudio2020',
+          'dobotPlus',
+          'dobotplusApp',
+          'palleting3D'
+        ].includes(iframeName)
+      ) {
+        cb(event)
+      }
+    })
+  }
+  public addDest = (
+    iframeName: string,
+    source: HTMLIFrameElement,
+    iframeOrigin: string,
+    origin: string
+  ) => {
+    this.dest[iframeName] = source
+    this.dest[iframeOrigin] = origin
+  }
+  registerSource(iframeName: string, source: any, origin: string) {
+    this.addDest(iframeName, source, `${iframeName}Origin`, origin)
+  }
+}
+export const communicator = new PostMessageCenter()

package/.dobot/protocol/postMessageCenter.ts.txt

@@ -0,0 +1,38 @@
+import { jsonSafeParse } from '@dobot/utils/tool'
+
+export class PostMessageCenter {
+  dest: { [iframeName: string]: any }
+  constructor() {
+    this.dest = {}
+  }
+  send(message: any) {
+    if (!message.iframeName) return
+    const iframe = this.dest[message.to || message.iframeName]
+    const origin = this.dest[`${message.to || message.iframeName}Origin`]
+    if (!iframe || !origin) {
+      throw 'please register source and origin firstly'
+    }
+    iframe.postMessage(message, origin)
+  }
+  listen(cb: Function) {
+    window.addEventListener('message', (event) => {
+      const data = jsonSafeParse(event.data)
+
+      const iframeName = data.from || data.iframeName
+      if (
+        iframeName &&
+        ['blockly', 'DobotStudio2020', 'dobotPlus', 'dobotplusApp', 'palleting3D'].includes(iframeName)
+      ) {
+        cb(event)
+      }
+    })
+  }
+  public addDest = (iframeName: string, source: HTMLIFrameElement, iframeOrigin: string, origin: string) => {
+    this.dest[iframeName] = source
+    this.dest[iframeOrigin] = origin
+  }
+  registerSource(iframeName: string, source: any, origin: string) {
+    this.addDest(iframeName, source, `${iframeName}Origin`, origin)
+  }
+}
+export const communicator = new PostMessageCenter()