You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1106 lines
27 KiB
1106 lines
27 KiB
= IoT server example !
|
|
Apostolos rootApostolos@swarmlab.io
|
|
// Metadata:
|
|
:description: Intro and Install
|
|
:keywords: IoT
|
|
:data-uri:
|
|
:toc: right
|
|
:toc-title: Πίνακας περιεχομένων
|
|
:toclevels: 4
|
|
:source-highlighter: highlight
|
|
:icons: font
|
|
:sectnums:
|
|
|
|
|
|
|
|
{empty} +
|
|
|
|
|
|
== Intro
|
|
|
|
.Intro IoT server
|
|
****
|
|
- software use
|
|
- ti tha kanoume ehre
|
|
- etc
|
|
****
|
|
|
|
|
|
[NOTE]
|
|
====
|
|
|
|
.Imaging a swarm
|
|
image:./Swarming2.png[alt="Swarm"]
|
|
|
|
|
|
.Architecture of swarm communication
|
|
image:./swarmlabn-1.png[alt="Swarm Gateway"]
|
|
|
|
- Red Node: Sensor Node and Gateway Role
|
|
- Black and Red Node: Sensor Node - Client
|
|
====
|
|
|
|
|
|
|
|
|
|
== Prepare installation
|
|
|
|
|
|
=== Install Docker
|
|
|
|
|
|
== Technolofies
|
|
|
|
=== MVC
|
|
|
|
A core principle of the MVC pattern is the view layer's ignorance with respect to the model layer. Views are dumb objects. They only know how to present data to the user. They don't know or understand what they are presenting.
|
|
|
|
MVC: Division across three code components only Model, View, and Controller. ... Microservices: An app is divided into a set of specialized which are not predefined like that in MVC and interact with each other using APIs. This model is being used by companies like Netflix, Spotify, and eBay.
|
|
|
|
|
|
Model: This part manages the data on your site. Its role is to retrieve the raw information from the database, organize, and assemble it so that it can be processed by the controller.
|
|
|
|
View: This part focuses on the display. It is here that the data recovered by the model will be used to present them to the user.
|
|
|
|
Controller: This part manages the logic of the code that makes decisions. When the user interacts with the view, the request is processed by the controller.
|
|
|
|
It waits for the user to interact with the view to retrieve the request. Thus, it is the controller that will define the display logic, and display the next view on the screen.
|
|
|
|
|
|
=== Microservices Architecture
|
|
|
|
Microservices can be defined as an improvement, a kind of refinement, of what we know as service-oriented architecture (SOA).
|
|
|
|
In this architecture, a large application is made in the form of small monofunctional modules. Each microservice is autonomous.
|
|
|
|
Microservices do not share a data layer. Each has its own database and load balancer. So that each of these services can be deployed, adjusted, and redeployed individually without jeopardizing the integrity of an application.
|
|
|
|
As a result, you will only need to change one or more separate services instead of having to redeploy entire applications.
|
|
|
|
|
|
|
|
|
|
|
|
== Software
|
|
|
|
=== Client site (PC)
|
|
|
|
==== Vue
|
|
|
|
.vuejs
|
|
[NOTE]
|
|
====
|
|
Vue.js is an open-source progressive JavaScript framework for building user interfaces (UIs) and single-page applications;
|
|
|
|
====
|
|
|
|
*Library modularization* using a framework is common in frontend development.
|
|
|
|
What differentiates Vue.js from other alternatives is
|
|
|
|
- its *“high decoupling”*, how easy it is to extend functionalities, and how well all parts work once more modules are included.
|
|
|
|
|
|
For example, if we want to organize and render small visual components, all we need is Vue.js’s ‘core’ library;
|
|
it is unnecessary to include additional libraries.
|
|
|
|
As the application grows,
|
|
- we have libraries to manage *routes* such as *‘vue-router’*,
|
|
- libraries to manage the global state such as *‘vuex’*
|
|
- or libraries to build responsive web applications such as *‘bootstrap-vue’*.
|
|
|
|
Additionally, if our application needs to be optimized or needs good SEO, we can include the *‘vue-server-rendering’* library.
|
|
|
|
In the following figure, we can see how the libraries we just mentioned are progressively included, from a small SPA to multi-page applications (MPA).
|
|
|
|
|
|
image::./intro.png[intro]
|
|
|
|
|
|
TIP: The name of the framework – Vue – is the same phonetically in English as view, and it corresponds to the traditional Model-View-Controller (MVC) architecture
|
|
|
|
React and Angular is also Frameworks equal to vuej
|
|
|
|
==== Vuex
|
|
|
|
Vuex is a state management pattern + library for Vue.js applications.
|
|
|
|
- It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
|
|
- It also integrates with Vue's official devtools extension
|
|
to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
|
|
|
|
|
|
.What is a "State Management Pattern"?
|
|
[NOTE]
|
|
====
|
|
|
|
*Let's start with a simple Vue counter app:*
|
|
|
|
[source,javascript]
|
|
----
|
|
new Vue({
|
|
// state
|
|
data () { // <1>
|
|
return {
|
|
count: 0
|
|
}
|
|
},
|
|
// view
|
|
template: ` // <2>
|
|
<div>{{ count }}</div>
|
|
`,
|
|
// actions
|
|
methods: { // <3>
|
|
increment () {
|
|
this.count++
|
|
}
|
|
}
|
|
})
|
|
----
|
|
<1> The state, the source of truth that drives our app;
|
|
<2> The view, a declarative mapping of the state;
|
|
<3> The actions, the possible ways the state could change in reaction to user inputs from the view.
|
|
|
|
This is a simple representation of the concept of "one-way data flow":
|
|
|
|
====
|
|
|
|
|
|
image::flow.png[one-way data flow^]
|
|
image::vuex.png[advanced]
|
|
|
|
TIP: https://scrimba.com/learn/vuex[Online Vuex cources^]
|
|
|
|
|
|
==== Using Axios to Consume APIs
|
|
|
|
TIP: Axios is a library for http communication, making ajax requests, and so on.
|
|
|
|
https://github.com/axios/axios[See more^]
|
|
|
|
==== Using socket.io to Consume Websocket
|
|
|
|
Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It supports multiple transports, such as WebSockets, Flash sockets, long polling and more, automatically falling back when a transport fails
|
|
|
|
https://socket.io/[See more info here: Socket.io^]
|
|
|
|
Vue Packages
|
|
|
|
- https://www.npmjs.com/package/vue-socket.io-extended[socket.io client^]
|
|
|
|
- https://www.npmjs.com/package/vue-socket.io[socket.io]
|
|
|
|
|
|
|
|
|
|
|
|
=== Client/Server site (IoT device)
|
|
|
|
==== Nodejs
|
|
|
|
TIP: As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.
|
|
|
|
Almost no function in Node.js directly performs I/O, so the process never blocks. Because nothing blocks, scalable systems are very reasonable to develop in Node.js.
|
|
|
|
https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/[Overview of Blocking vs Non-Blocking^]
|
|
|
|
TIP: *Node.js* is similar in design to, and influenced by, systems like *Ruby's Event Machine* and *Python's Twisted.*
|
|
|
|
Node.js takes the event model a bit further. It presents an *event loop as a runtime construct* instead of as a library.
|
|
|
|
In other systems, there is always a blocking call to start the event-loop.
|
|
|
|
Typically, behavior is defined through callbacks at the beginning of a script, and at the end a server is started through a blocking call like EventMachine::run().
|
|
|
|
TIP: In Node.js, there is no such start-the-event-loop call. *Node.js simply enters the event loop after executing the input script.* Node.js exits the event loop when there are no more callbacks to perform.
|
|
|
|
|
|
Node.js being *designed without threads* doesn't mean you can't take advantage of multiple cores in your environment.
|
|
|
|
Child processes can be spawned by using our *child_process.fork() API,* and are designed to be easy to communicate with.
|
|
|
|
Built upon that same interface is the cluster module, which *allows you to share sockets between processes* to enable load balancing over your cores.
|
|
|
|
|
|
==== socket.io
|
|
|
|
https://socket.io/[See more info here: Socket.io^]
|
|
|
|
|
|
==== express
|
|
|
|
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
|
|
|
|
*Fast, unopinionated, minimalist web framework for Node.js*
|
|
|
|
|
|
==== NoSQL
|
|
|
|
A NoSQL (originally referring to "non-SQL" or "non-relational") database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases.
|
|
|
|
https://www.mongodb.com/nosql-explained[More info]
|
|
|
|
|
|
MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud
|
|
-
|
|
|
|
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/[Intro]
|
|
|
|
https://docs.mongodb.com/drivers/node/[MongoDB and Nodejs ]
|
|
|
|
|
|
== Example Application
|
|
|
|
=== Client site
|
|
|
|
|
|
==== main (config)
|
|
|
|
|
|
[source,javascript]
|
|
----
|
|
import Vue from 'vue'
|
|
import App from './App.vue'
|
|
import store from '@/store/index'
|
|
import BootstrapVue from 'bootstrap-vue'
|
|
import 'bootstrap/dist/css/bootstrap.css'
|
|
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
|
import VueSweetalert2 from 'vue-sweetalert2';
|
|
Vue.use(VueSweetalert2);
|
|
|
|
import VueSocketIOExt from 'vue-socket.io-extended'; // <1>
|
|
import io from 'socket.io-client'; // <2>
|
|
|
|
const socket = io('http://localhost:8084', { // <1>
|
|
autoConnect: false
|
|
});
|
|
|
|
Vue.use(VueSocketIOExt, socket);
|
|
|
|
|
|
|
|
Vue.use(BootstrapVue);
|
|
|
|
Vue.config.productionTip = false
|
|
new Vue({
|
|
el: '#app',
|
|
store,
|
|
render: h => h(App)
|
|
})
|
|
----
|
|
<1> import socket package
|
|
<2> import socket package
|
|
<3> Connect to socket server
|
|
|
|
==== App (load)
|
|
|
|
[source,html]
|
|
----
|
|
<template>
|
|
<div id="app">
|
|
// <1>
|
|
...
|
|
<div>
|
|
</template>
|
|
<script>
|
|
import DocLive from './components/DocLive.vue' // <2>
|
|
import "@/assets/css/themify-icons.css";
|
|
|
|
|
|
export default {
|
|
name: 'app',
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
show: true,
|
|
SwarmabAsciiLabTemplate:''
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
saveDocLive() {
|
|
this.$root.$emit('asciilive_save','save') // <3>
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
</style>
|
|
----
|
|
<1> your html
|
|
<2> import module
|
|
<3> Send Message to other components
|
|
|
|
|
|
|
|
==== Create compoment
|
|
|
|
[source,html]
|
|
----
|
|
<template>
|
|
<div id="app">
|
|
// <1>
|
|
...
|
|
<div class="row" >
|
|
|
|
<div :class="columnview"> // <5>
|
|
<run-llo
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</run-llo>
|
|
</div>
|
|
|
|
<div :class="columncode"> // <5>
|
|
<ad-hoc
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</ad-hoc>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
</template>
|
|
<script>
|
|
import RunLlo from "./doclive/runLlo.vue"; // <2>
|
|
import AdHoc from "./doclive/AdhocView.vue";
|
|
|
|
export default {
|
|
name: 'DocLive', // <3>
|
|
props: {
|
|
},
|
|
components: {
|
|
RunLlo, // <4>
|
|
AdHoc // <4>
|
|
},
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
showhistory : 0,
|
|
productIndex: 1,
|
|
showmenou: 1,
|
|
columnviewdefault : 0,
|
|
columncodedefault : 0,
|
|
columnview : 'col-7 order-first',
|
|
columncode : 'col-5 order-last',
|
|
tutorMenou: 'student'
|
|
}
|
|
},
|
|
created: function () {
|
|
},
|
|
mounted() {
|
|
this.$root.$on('LLOshowmenounotebooks', () => {
|
|
this.showmenou = 1
|
|
}),
|
|
this.$root.$on('lloshowchallengehistory', (llo,active) => {
|
|
this.showhistory = 1
|
|
})
|
|
},
|
|
beforeDestroy () {
|
|
this.$root.$off('LLOshowmenounotebooks'),
|
|
this.$root.$off('lloshowchallengehistory') // working
|
|
},
|
|
methods: { // <6>
|
|
fullscreen(action){ // <7>
|
|
if(action == 'max'){
|
|
this.columnview = 'col-11 order-first'
|
|
this.columncode = 'col-1 order-last'
|
|
this.columnviewdefault = 1
|
|
this.columncodedefault = 0
|
|
//set height iframe
|
|
this.$root.$emit('LLOresizemenounotebooks','max')
|
|
console.log(this.columnview)
|
|
}
|
|
else if(action == 'min'){
|
|
this.columnview = 'col-7 order-first'
|
|
this.columncode = 'col-5 order-last'
|
|
this.columnviewdefault = 0
|
|
this.columncodedefault = 1
|
|
//set height iframe
|
|
this.$root.$emit('LLOresizemenounotebooks','min')
|
|
console.log(this.columnview)
|
|
}
|
|
else if(action == 'codemax'){
|
|
this.columnview = 'col-1 order-first'
|
|
this.columncode = 'col-11 order-last'
|
|
this.columnviewdefault = 0
|
|
this.columncodedefault = 1
|
|
console.log(this.columnview)
|
|
}
|
|
else if(action == 'codemin'){
|
|
this.columnview = 'col-7 order-first'
|
|
this.columncode = 'col-5 order-last'
|
|
this.columnviewdefault = 1
|
|
this.columncodedefault = 0
|
|
this.$root.$emit('LLOresizemenounotebooks','min')
|
|
console.log(this.columnview)
|
|
}
|
|
},
|
|
async onAction (action) { // <8>
|
|
this.tutorMenou='tutor'
|
|
//this.tutorMenou='student'
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
</style>
|
|
----
|
|
<1> your html
|
|
<2> import your components help files
|
|
<3> Export your component
|
|
<4> your component files
|
|
<5> insert your component
|
|
<6> your methods
|
|
<7> method to controll window behavior
|
|
<8> on action
|
|
|
|
==== Use your component
|
|
|
|
[source,html]
|
|
----
|
|
<template>
|
|
<div>
|
|
|
|
<!-- menou -->
|
|
<div class="row"
|
|
v-show="showmenou == 1"
|
|
>
|
|
|
|
...
|
|
</div>
|
|
<!-- menou -->
|
|
|
|
|
|
|
|
<div class="row" >
|
|
|
|
<div :class="columnview">
|
|
<run-llo // <1>
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</run-llo>
|
|
</div>
|
|
|
|
<div :class="columncode">
|
|
<ad-hoc // <1>
|
|
style="background-color: #f8f9fa"
|
|
>
|
|
</ad-hoc>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import RunLlo from "./doclive/runLlo.vue"; // <2>
|
|
import AdHoc from "./doclive/AdhocView.vue"; // <2>
|
|
|
|
export default {
|
|
props: {
|
|
},
|
|
components: {
|
|
RunLlo, // <2>
|
|
AdHoc // <2>
|
|
},
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
showhistory : 0,
|
|
productIndex: 1,
|
|
showmenou: 1,
|
|
columnviewdefault : 0,
|
|
columncodedefault : 0,
|
|
columnview : 'col-7 order-first',
|
|
columncode : 'col-5 order-last',
|
|
tutorMenou: 'student'
|
|
}
|
|
},
|
|
created: function () {
|
|
},
|
|
mounted() {
|
|
this.$root.$on('LLOshowmenounotebooks', () => {
|
|
this.showmenou = 1
|
|
}),
|
|
this.$root.$on('lloshowchallengehistory', (llo,active) => {
|
|
this.showhistory = 1
|
|
})
|
|
},
|
|
beforeDestroy () {
|
|
this.$root.$off('LLOshowmenounotebooks'),
|
|
this.$root.$off('lloshowchallengehistory') // working
|
|
},
|
|
methods: {
|
|
...
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
</style>
|
|
----
|
|
<1> use component
|
|
<2> import components
|
|
|
|
==== Sockets
|
|
|
|
[source,html]
|
|
----
|
|
<template>
|
|
<div>
|
|
...
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue' // <1>
|
|
import JSZip from 'jszip'; // <2>
|
|
import FileSaver from 'file-saver'; //<3>
|
|
export default {
|
|
components: {
|
|
},
|
|
data () {
|
|
return {
|
|
showlloedit:true,
|
|
issocket:'close',
|
|
socketdata:'',
|
|
code:[],
|
|
iotdata: [ // <4>
|
|
{
|
|
"iot1": {
|
|
"id": 1,
|
|
"name": "auto1",
|
|
"img": "rinse.png",
|
|
"Servicios": [
|
|
{"model":"Sentra", "doors":4},
|
|
{"model":"Maxima", "doors":4},
|
|
{"model":"Skyline", "doors":2}
|
|
]
|
|
},
|
|
},{
|
|
"iot2": {
|
|
"id": 2,
|
|
"name": "auto2",
|
|
"img": "shirt-2.png",
|
|
"Servicios": [
|
|
{"model":"Sentra", "doors":4},
|
|
{"model":"Maxima", "doors":4},
|
|
{"model":"Skyline", "doors":2}
|
|
]
|
|
},
|
|
},{
|
|
"iot3": {
|
|
"id": 3,
|
|
"name": "auto3",
|
|
"img": "iron.png",
|
|
"Servicios": [
|
|
{"model":"Sentra", "doors":4},
|
|
{"model":"Maxima", "doors":4},
|
|
{"model":"Skyline", "doors":2}
|
|
]
|
|
},
|
|
},{
|
|
"iot4": {
|
|
"id": 4,
|
|
"name": "auto4",
|
|
"img": "wring.png",
|
|
"Servicios": [
|
|
{"model":"Sentra", "doors":4},
|
|
{"model":"Maxima", "doors":4},
|
|
{"model":"Skyline", "doors":2}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
async addiot() {
|
|
console.log(JSON.stringify(this.iotdata))
|
|
},
|
|
async socketopen () {
|
|
this.$socket.client.open(); // <5>
|
|
},
|
|
/**
|
|
*
|
|
* == socketclose()
|
|
*
|
|
* [source,javascript]
|
|
* ----
|
|
* this.$socket.client.close();
|
|
* ----
|
|
*
|
|
*/
|
|
async socketclose () { // <6>
|
|
this.$socket.client.close();
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
},
|
|
/**
|
|
*
|
|
* == Socket subscribe
|
|
*
|
|
* [source,javascript]
|
|
* ----
|
|
* this.$root.$on('iot_add', (v) => { // <1>
|
|
* ...
|
|
* })
|
|
* sdfsf
|
|
den to perni sdfsf
|
|
* ----
|
|
* <1> EventBus is used for parent/child component communication.
|
|
*
|
|
*/
|
|
mounted() {
|
|
this.$root.$on('iot_add', (v) => {
|
|
this.iotdata.push(v);
|
|
//this.iotdata = v
|
|
this.addiot()
|
|
this.$socket.client.emit('subscribe', 'iot');
|
|
})
|
|
this.$root.$on('socket_add', (v) => {
|
|
this.socketdata = v;
|
|
console.log('socket_add ' + JSON.stringify(v))
|
|
this.$socket.client.emit('log', this.socketdata);
|
|
})
|
|
},
|
|
/**
|
|
*
|
|
* == Destroy EventBus
|
|
*
|
|
* See
|
|
* https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[Vue.js Lifecycle Hooks^].
|
|
*
|
|
* *beforeDestroy*
|
|
*
|
|
* - beforeDestroy is fired right before teardown. Your component will still be fully present and functional.
|
|
*
|
|
* [source,javascript]
|
|
* ----
|
|
* this.$root.$off('iot_add') // <1>
|
|
* ----
|
|
* <1> EventBus is used for parent/child component communication.
|
|
*
|
|
*/
|
|
beforeDestroy () {
|
|
this.$root.$off('iot_add')
|
|
this.$root.$off('socket_add')
|
|
},
|
|
/**
|
|
*
|
|
* == Open a socket
|
|
*
|
|
* See
|
|
* https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[ Vue.js Lifecycle Hooks^]
|
|
*
|
|
* *Created*
|
|
*
|
|
* - You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered:
|
|
*
|
|
* [source,javascript]
|
|
* ----
|
|
* this.socketopen()
|
|
* ----
|
|
*
|
|
*/
|
|
|
|
created () {
|
|
this.socketopen()
|
|
},
|
|
/**
|
|
*
|
|
* == Socket events
|
|
*
|
|
* [source,javascript]
|
|
* ----
|
|
* this.$socket.client.emit('authenticate', 'logintoken');
|
|
* ----
|
|
*
|
|
*/
|
|
sockets: {
|
|
connect() {
|
|
this.$socket.client.emit('authenticate', 'logintoken');
|
|
|
|
this.$socket.client.emit('socket_id_get', 'socketdatasend');
|
|
console.log('socket connected '+ 'socketdatasend' )
|
|
this.issocket = 'open'
|
|
},
|
|
/**
|
|
*
|
|
* === onError
|
|
*
|
|
*/
|
|
error(error) {
|
|
console.log("socket error "+JSON.stringify(error))
|
|
this.issocket = 'close'
|
|
},
|
|
/**
|
|
*
|
|
* === connect_error
|
|
*
|
|
*/
|
|
connect_error(error) {
|
|
console.log("socket connect_error "+JSON.stringify(error))
|
|
this.issocket = 'close'
|
|
},
|
|
/**
|
|
*
|
|
* === connect_error
|
|
*
|
|
*/
|
|
disconnect(reason) {
|
|
console.log("socket disconnect "+JSON.stringify(reason))
|
|
this.issocket = 'close'
|
|
},
|
|
/**
|
|
*
|
|
* === Socket connect_timeout
|
|
*
|
|
*/
|
|
connect_timeout(reason) {
|
|
console.log("socket timeout "+JSON.stringify(reason))
|
|
this.issocket = 'close'
|
|
},
|
|
/**
|
|
*
|
|
* === Socket reconnect
|
|
*
|
|
*/
|
|
reconnect(attemptNumber) {
|
|
console.log("socket reconnect attemptNumber "+JSON.stringify(attemptNumber))
|
|
},
|
|
/**
|
|
*
|
|
* === connect_attempt
|
|
*
|
|
*/
|
|
reconnect_attempt(attemptNumber) {
|
|
console.log("socket reconnect_attempt "+JSON.stringify(attemptNumber))
|
|
},
|
|
/**
|
|
*
|
|
* === Socket reconnecting
|
|
*
|
|
*/
|
|
reconnecting(attemptNumber) {
|
|
console.log("socket reconnecting "+JSON.stringify(attemptNumber))
|
|
},
|
|
/**
|
|
*
|
|
* === reconnect_error
|
|
*
|
|
*/
|
|
reconnect_error(error) {
|
|
console.log("socket reconnect_error "+JSON.stringify(error))
|
|
this.issocket = 'close'
|
|
},
|
|
/**
|
|
*
|
|
* === unauthorized
|
|
*
|
|
*/
|
|
unauthorized(val) {
|
|
console.log("socket unauthorized "+JSON.stringify(val))
|
|
this.issocket = 'close'
|
|
},
|
|
/**
|
|
*
|
|
* === connected
|
|
*
|
|
*/
|
|
socket_id_emit(val) {
|
|
console.log("socket id from server "+JSON.stringify(val))
|
|
console.log("socket id from serveri saved "+JSON.stringify(socketsave))
|
|
this.issocket = 'open'
|
|
},
|
|
/**
|
|
*
|
|
* === Socket onMessage
|
|
*
|
|
*/
|
|
async adhocEmit(val) {
|
|
console.log("socket from server "+JSON.stringify(val))
|
|
this.issocket = 'open'
|
|
this.$wait.start('myRunInstance1');
|
|
// render begin
|
|
this.tryLLO = 'on'
|
|
if(this.firstbootstrap === 0 ){
|
|
await this.bootsrapllo();
|
|
this.firstbootstrap = 1
|
|
}
|
|
var output = log.data.out
|
|
var mydinfunction = `
|
|
<div class="row">
|
|
<b-col class="" cols="12" sm="12" md="12" >
|
|
${output}
|
|
</b-col>
|
|
</div>`
|
|
|
|
try {
|
|
let divascii = document.createElement('div');
|
|
divascii.setAttribute("class", "container-fluid w-100 p-3 llotry")
|
|
divascii.innerHTML = mydinfunction
|
|
this.addtask(divascii);
|
|
}catch (ex) {
|
|
console.log(" logi error1 "+JSON.stringify(ex))
|
|
return
|
|
}
|
|
this.$wait.end('myRunInstance1');
|
|
},
|
|
async iotdata(val) {
|
|
console.log(" socket from iotdata "+JSON.stringify(val))
|
|
},
|
|
async message(val) {
|
|
console.log(" socket message "+JSON.stringify(val))
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.CodeMirror {
|
|
|
|
|
|
font-family: monospace;
|
|
height: 750px;
|
|
}
|
|
|
|
</style>
|
|
----
|
|
<1> import module
|
|
<2> import module
|
|
<3> import module
|
|
<4> json example comme from IoT device
|
|
<5> open socket
|
|
<6> close socket
|
|
|
|
See also See https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[Vue.js Lifecycle Hooks^]
|
|
|
|
|
|
==== create store
|
|
|
|
[source,javascript]
|
|
----
|
|
import { mapState, mapActions, commit } from 'vuex' // <1>
|
|
import store from '@/store/index'
|
|
import axios from 'axios' // <2>
|
|
|
|
export default {
|
|
namespaced: true, // <3>
|
|
state: { // <4>
|
|
llo: {},
|
|
socketid:''
|
|
},
|
|
getters: { // <5>
|
|
getllosrc (state, container) {
|
|
//console.log("js1 get "+JSON.stringify(state.llo))
|
|
return state.llo
|
|
},
|
|
getsocketid (state, container) {
|
|
//console.log("js1 get "+JSON.stringify(state.llo))
|
|
return state.socketid
|
|
}
|
|
},
|
|
mutations: { // <6>
|
|
setllo (state, data) {
|
|
//console.log("js1 set "+JSON.stringify(data))
|
|
state.llo=data;
|
|
},
|
|
setsocketid (state, data) {
|
|
//console.log("js1 set "+JSON.stringify(data))
|
|
state.socketid = data;
|
|
}
|
|
},
|
|
actions: { // <7>
|
|
async get_data({commit,rootGetters}, value) {
|
|
try {
|
|
|
|
let p = await axios.get("http://localhost:8084/run", { // <8>
|
|
timeout: 45000,
|
|
params: {
|
|
code: value.code
|
|
}
|
|
});
|
|
|
|
//var p = value.code
|
|
console.log("paramp "+JSON.stringify(p))
|
|
store.dispatch('pipelineLLO/setScriptllo', p)
|
|
return p;
|
|
|
|
} catch (e) {
|
|
if(e.error == "invalid_token"){
|
|
window.location.href = 'https://api-login.swarmlab.io:8089';
|
|
}else{
|
|
var R = {
|
|
ERROR_str: e,
|
|
ERROR: 'yes'
|
|
}
|
|
return R;
|
|
}
|
|
}
|
|
},
|
|
setScriptllo({commit}, value) {
|
|
//console.log("container "+value)
|
|
commit('setllo', value)
|
|
},
|
|
setsocketllo({commit}, value) {
|
|
//console.log("container "+value)
|
|
commit('setsocketid', value)
|
|
},
|
|
setScriptCodlogAction({commit}, value) {
|
|
//console.log("container "+value)
|
|
commit('setScriptCodelog', value)
|
|
}
|
|
}
|
|
}
|
|
----
|
|
<1> import vuex https://vuex.vuejs.org/[More info]
|
|
<2> import axios
|
|
<3> enable namespace
|
|
<4> create state (store)
|
|
<5> getters
|
|
<6> setters
|
|
<7> actions sync/async
|
|
<8> Rest call
|
|
|
|
|
|
|
|
|
|
=== Server site
|
|
|
|
[source.javascript]
|
|
----
|
|
var path = require('path'); // <1>
|
|
var app = require('express')(); // <1>
|
|
var http = require('http').Server(app); // <1>
|
|
var io = require('socket.io')(http); // <1>
|
|
|
|
const socketAuth = require('socketio-auth'); // <1>
|
|
|
|
|
|
const cors = require('cors') // <2>
|
|
const whitelist = [
|
|
'http://localhost:3080',
|
|
'http://localhost:3081',
|
|
'http://localhost:3082'
|
|
]
|
|
const corsOptions = {
|
|
credentials: true,
|
|
methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
|
|
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
|
|
allowedHeaders: [
|
|
'Content-Type',
|
|
'Authorization',
|
|
'X-Requested-With',
|
|
'device-remember-token',
|
|
'Access-Control-Allow-Origin',
|
|
'Access-Control-Allow-Headers',
|
|
'Origin',
|
|
'Accept'
|
|
],
|
|
origin: function(origin, callback) {
|
|
if (whitelist.indexOf(origin) !== -1) {
|
|
callback(null, true)
|
|
} else {
|
|
callback(null, true)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
app.get('/run', [ // <3>
|
|
//check('access_token').isLength({ min: 40 }),
|
|
//check('llo').isBase64()
|
|
],
|
|
cors(corsOptions), (req, res, next) => { // <4>
|
|
|
|
var RES = new Object();
|
|
RES.code = req.query["code"] // <5>
|
|
console.error('socket get from client' + RES.code);
|
|
|
|
RES.error = false
|
|
RES.error_msg = "ok"
|
|
|
|
io.emit("iotdata", RES) // <6>
|
|
io.in('iot').emit('message', RES); // <7>
|
|
res.json(RES)
|
|
|
|
});
|
|
|
|
app.post('/run', [ // <8>
|
|
//check('access_token').isLength({ min: 40 }),
|
|
//check('llo').isBase64()
|
|
],
|
|
cors(corsOptions), (req, res, next) => {
|
|
console.error('socket post from client');
|
|
io.emit("customEmit", 'data')
|
|
|
|
var RES = new Object();
|
|
RES.error = false
|
|
RES.error_msg = "ok"
|
|
res.json(RES)
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
io.on('connection', s => { // <9>
|
|
console.error('socket connection');
|
|
var id = s.id
|
|
s.on('pingServerEmit', obj => {
|
|
console.error('socket.io pingServer');
|
|
var data = obj+' testserver'
|
|
io.emit("customEmit", data)
|
|
io.in('iot').emit('message', data);
|
|
console.error('from client '+ s.id + ' obj ' + obj);
|
|
});
|
|
|
|
s.on('subscribe', function(room) { // <10>
|
|
console.log('joining room', room);
|
|
s.join(room);
|
|
})
|
|
|
|
io.on('unsubscribe', function(room) {
|
|
console.log('leaving room', room);
|
|
io.leave(room);
|
|
})
|
|
|
|
// when the client emits 'new message', this listens and executes
|
|
s.on('log', (data, room) => {
|
|
s.to('iot').emit('message', data);
|
|
console.log('broadcast', data);
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
http.listen(8084, () => console.error('listening on http://localhost:8084/'));
|
|
console.error('socket.io example');
|
|
----
|
|
<1> load modules
|
|
<2> config cors https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS[More info^]
|
|
<3> create Get
|
|
<4> use cors
|
|
<5> get data
|
|
<6> send with socket to all
|
|
<7> send with socket to room
|
|
<8> post
|
|
<9> handle socket connections
|
|
<10> subscribe
|
|
|
|
|
|
|
|
|