My client wants to have an OPs Engineer run the Node Red side of the house, but all operations support staff are to use a Single Page App (And never ever touch Node Red), so Part of me was thinking that a sample uibuilder page will create a socket, but if i have an angular app exist and that socket too exists, I can get all the data I need without hacking together code. As they keep extending the use cases, the ui builder is switching from simple screen components to lists, forms, loaders, etc in 1 endpoint, with layer, lots of inline classes, and no organization.
I have a sample UiBuilder for NodeRed called "launch" which when working through some samples has a socket I can listen to. I thought that it would be useful if i could create a different app, which also listens to this socket. For every Message recieved, if it doesnt exist in a list, it will add it to the list and hen from there we will start user stories.
I figured to implement socket in an Angular App, through a service I created. I created a simple client-server relationship with some demos found online, but I am now trying to link it to the Node Red uibuilder launch which exists.
I thought it was going to be as simple as updating the url or path but that seems to not work.
Here is a sample file I was working with:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as io from 'socket.io-client'
import { environment } from 'src/environments/environment';
import * as Rx from 'rxjs/Rx';
export class SocketioService {
private _socket;
constructor(){}
setupSocketConnection(){
this._socket = io.connect(environment.SOCKET_ENDPOINT);
let observable = new Observable( observer => {
this.socket.on('msg', (data:string) => {
console.log("INFO DUMP", data);
observer.next(data)
})
return () => { this.socket.disconnect(); }
})
let observer = {
next: (data: Object) => {
console.log("In Emit.")
this.socket.emit('msg', JSON.stringify(data));
}
}
return Rx.Subject.create(observer, observable);
}
}
and my env variable was: https://localhost:1800/uibuilder/vendor/socket.io/ because when looking up the network requests to the sample /launch i created, it looked like it was referencing here.
This is the demo i was using. https://tutorialedge.net/typescript/angular/angular-socket-io-tutorial/ to create something with angular8.
One other thing i was also noticing is that intellisense seems to not like my implementation of the line: this._socket = io.connect(...); saying "An accessor cannot be declared in an ambient context." Specifically: "Property 'connect' does not exist on type 'typeof import(.....node_modules/socket.io-client/build/index'"
I was thinking there might be some sort of handshake I need to mange to verify the socket, but it seems to never get that far.
Personal Deets:
- Angular 8
- Packages:
- rxjs
- rsjx-compat
- socket.io
- socket.io-client
- @types/socket.io-client
My real purpose here is to just see a sample socket console dump, so there is no real front end, just a default Angular App running on :4200.
I dont think that the app itself would work under the uibuilder folders, as much as would just be deployed elsewhere and establish this connection.
