2022-08-01 09:38:19 +12:00
|
|
|
|
# neko-client
|
|
|
|
|
Connect to [demodesk/neko](https://github.com/demodesk/neko) backend with self contained vue component.
|
|
|
|
|
|
|
|
|
|
For **community edition** neko with GUI and _plug & play_ deployment visit [m1k1o/neko](https://github.com/m1k1o/neko).
|
|
|
|
|
|
|
|
|
|
## Installation
|
2023-02-27 10:02:47 +13:00
|
|
|
|
Code is published to public NPM registry and GitHub npm repository.
|
2022-08-01 09:38:19 +12:00
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# npm command
|
|
|
|
|
npm i @demodesk/neko
|
|
|
|
|
# yarn command
|
|
|
|
|
yarn add @demodesk/neko
|
|
|
|
|
```
|
|
|
|
|
|
2022-10-05 07:28:07 +13:00
|
|
|
|
### Build
|
|
|
|
|
|
|
|
|
|
You can set keyboard provider at build time, either `novnc` or the default `guacamole`.
|
|
|
|
|
|
|
|
|
|
```bash
|
2023-01-28 07:21:42 +13:00
|
|
|
|
# by default uses guacamole keyboard
|
2022-10-05 07:28:07 +13:00
|
|
|
|
npm run build
|
2023-01-28 07:21:42 +13:00
|
|
|
|
# uses novnc keyboard
|
2022-10-05 07:28:07 +13:00
|
|
|
|
KEYBOARD=novnc npm run build
|
|
|
|
|
```
|
2022-08-01 09:38:19 +12:00
|
|
|
|
|
|
|
|
|
### Example
|
|
|
|
|
API consists of accessing Vue reactive state, calling various methods and subscribing to events. Simple usage:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!-- import vue -->
|
|
|
|
|
<script src="https://unpkg.com/vue"></script>
|
|
|
|
|
|
|
|
|
|
<!-- import neko -->
|
|
|
|
|
<script src="./neko.umd.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="./neko.css">
|
|
|
|
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
<neko ref="neko" server="http://127.0.0.1:3000/api" autologin autoplay />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
new Vue({
|
|
|
|
|
components: { neko },
|
|
|
|
|
mounted() {
|
|
|
|
|
// access state
|
|
|
|
|
// this.$refs.neko.state.session_id
|
|
|
|
|
|
|
|
|
|
// call methods
|
|
|
|
|
// this.$refs.neko.setUrl('http://127.0.0.1:3000/api')
|
|
|
|
|
// this.$refs.neko.login('username', 'password')
|
|
|
|
|
// this.$refs.neko.logout()
|
|
|
|
|
|
|
|
|
|
// subscribe to events
|
|
|
|
|
// this.$refs.neko.events.on('room.control.host', (id) => { })
|
|
|
|
|
},
|
|
|
|
|
}).$mount('#app')
|
|
|
|
|
</script>
|
|
|
|
|
```
|