I have quite strange problem.
I'm developing electron application.
Lets focus only on main.js - it has all the basic components and then I have setupMQTT() function which handles all the MQTT stuff. So my main.js looks something like this. For the sake of simplicity I will omit a few things.
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
import { connect, MqttClient } from "mqtt" // << this is for MQTT
// .. omitting
let MQTT: MqttClient;
function createWindow() {
let win = new BrowserWindow(/* ..omitting.. */);
win.loadURL(/* ..omitting.. */);
win.webContents.openDevTools({ mode: 'detach' });
win.on("closed", () => {
win = null;
});
}
// .. omitting
app.on("ready", () => {
createWindow();
setupMQTT(); // << if I comment this out `....openDevTools` works
});
function setupMQTT() {
MQTT = connect('...', {
hostname: '...',
port: 8883,
protocol: 'mqtts'
});
MQTT.on('connect', () => {});
MQTT.on('message', (topic, value) => {});
MQTT.on('error', (error) => {});
}
So if I comment out setupMQTT() dev tools will show, otherwise dev tools will not (also invoking them from menu doesn't work)
note - MQTT works (I get messages and all)
Any ideas? Thanks!
Related
I'm creating a program that graphs in real time the data send by a serial port.
I'm using Electron, so in the main.js file (Where you create the window for the app) I have declared the event when receives data.
const { SerialPort, ReadlineParser } = require('serialport');
const port = new SerialPort({
path: 'COM5',
baudRate: 9600,
});
const parser = new ReadlineParser({ delimiter: '\r\n' });
port.pipe(parser);
let anterior = '';
let cont = 0;
// on data print the complete data from the serial port
parser.on('data', (line) => {
let value = line.substring(5, 15);
value = parseFloat(value.trim());
if (value > 0.0 && !line.includes('?') && line != anterior) {
console.log(`> ${line}`);
anterior = line;
updateStateFromNode(value, cont);
cont += 1;
}
});
The function I call is this:
import { store } from '../store/store'; // my actual store
import { addValue, addLabel } from '../store/data';
function updateStateFromNode(newValue, newLabel) {
store.dispatch(addValue(newValue));
store.dispatch(addLabel(newLabel));
}
I console log inside the function addValue to check if it reaches the function, and it does...
I also have tried with a customHook, but it didn't work also.
Anyone knows how could I achieve this?
The main and renderer processes are isolated from each other, which means that dispatching from main will not update the store on your renderer. To communicate between the two processes, you can use IPC. Assuming you use a preload file, you can do something looking like this:
Main
function updateStateFromNode(newValue, newLabel) {
// We will use a channel named "updateState"
mainWindow.webContents.send("updateState", newValue, newLabel);
}
Preload
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld("electronAPI", {
onUpdateState: (callback) => {
const channel = "updateState";
const subscription = (_event, ...args) => callback(...args);
// Sets the listener on the channel "updateState"
ipcRenderer.on(channel, subscription);
// Returns a function to remove the listener
return () => {
ipcRenderer.removeListener(channel, subscription);
};
}
})
Renderer
import { addValue, addLabel } from "../store/data";
const { electronAPI } = window; // `electronAPI` is exposed with the preload
const MyComponent = () => {
const dispatch = useDispatch();
useEffect(() => {
// Calls the function from preload to set the listener on the channel "updateState"
const removeUpdateStateListener = electronAPI.onUpdateState((newValue, newLabel) => {
dispatch(addValue(newValue));
dispatch(addLabel(newLabel));
});
return removeUpdateStateListener; // Removes the listener on unmount
}, [dispatch]);
return (...);
}
This is my first practice after reading some tutorials and videos. Basically, I need message to be sent from the server (nodejs) to the client (Angular 6). At first tho, when client app is booted, it sends user id to the server for authentication. The server then will send data based on that user.
Now my problem is on first load and a few calls, the connection does work. But then on refresh or so, the connection drops. My client does console out "retrying" but it never succeeds. It works only if I manually restart the server and reload the client so a new connection could be established.
How can I maintain a fairly stable connection throughout the lifetime of a client? At times the readyState stays at 3 on the server i.e. connecting, which I am confused with because the client does try to reconnect...just fails.
My Server is simple. index.js (Tried to put it up on stackblitz but failed...would appreciate if someone can figure out the dependency file: nodejs websocket server)
const express = require('express');
const bodyParser = require('body-parser');
const pg = require ('pg');
var ws = require('./ws')
var app = express()
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(3000, function () {
console.log('We are running on port 3000!')
})
ws.js:
const winston = require('winston');
const logger = winston.createLogger({
transports: [
new winston.transports.File({ filename: 'error.log'})
]
});
var WebSocketServer = require("ws").Server,
wss = new WebSocketServer({
port: 40511
});
let data = {
'packet': ['amy1', 'amy2', 'amy3']
}
const mx = 2;
const mn = 0;
wss.on("connection", function(ws) {
ws.on("message", function(user) {
// client has called now. If the connection
// fails, the client does try to connection again and again -- no limit but it simply doesn't seem to have effect. When connecting, it simply sends user name
console.log("received: %s", user);
setInterval(function(){
var random = Math.floor(Math.random() * (mx - mn + 1) + mn);
if (ws.readyState == ws.OPEN){
ws.send(data['packet'][random]);
}
}, 3000);
});
});
My front end is: service.ts
import { Observable} from 'rxjs';
export class WebSocketService {
socket: WebSocket;
constructor() { }
initConnection(): void {
if(!this.socket){
this.socket = new WebSocket('ws://localhost:40511');
// when connection is open, send user id
this.socket.onopen = () => this.socket.send(2);
}
}
manageState() : Observable<any>{
const vm = this;
return new Observable(observer => {
this.socket.onerror = (e) => {
// close it
this.socket.close();
observer.next('web socket communication closed due to error')
};
this.socket.onclose = (e) => {
//socket closed for any reason
setTimeout(function() {
console.log('try to connect')
vm.initConnection();
observer.next('still trying')
}, 1000);
}
});
}
onMessage(): Observable<any> {
// when message arrives:
return new Observable(observer => {
this.socket.onmessage = (e) => {
console.log(e.data);
observer.next(e.data)
};
});
}
}
component.ts:
// initialize the connection
this.service.initConnection();
this.service.onMessage().subscribe(
data => {
// we have got data
console.log('data came ', data)
},
err => {
console.log("error websocking service ", err);
}
);
// track state of the communication, letting the service to reconnect if connection is dropped
this.service.manageState().subscribe(data => {
console.log(data);
});
I created this middleware which executing only once when any route in the website gets the first hit from a visitor:
// pg-promise
const db = require('./db/pgp').db;
const pgp = require('./db/pgp').pgp;
app.use(async (ctx, next) => {
try {
ctx.db = db;
ctx.pgp = pgp;
} catch (err) {
debugErr(`PGP ERROR: ${err.message}` || err);
}
await next();
});
// One-Time middleware
// https://github.com/expressjs/express/issues/2457
const oneTime = (fn) => {
try {
let done = false;
const res = (ctx, next) => {
if (done === false) {
fn(ctx, next);
done = true;
}
next();
};
return res;
} catch (err) {
debugErr(`oneTime ERROR: ${err.message}` || err);
}
};
const oneTimeQuery = async (ctx) => {
const result = await ctx.db.proc('version', [], a => a.version);
debugLog(result);
};
app.use(oneTime(oneTimeQuery));
This code executing on the first-time only when a user visiting the website, resulting:
app:log Listening on port 3000 +13ms
app:req GET / 200 - 24ms +2s
23:07:15 connect(postgres#postgres)
23:07:15 SELECT * FROM version()
23:07:15 disconnect(postgres#postgres)
app:log PostgreSQL 9.6.2, compiled by Visual C++ build 1800, 64-bit +125ms
My problem is that I want to execute it at the server start, when there's no any visit on the site.
The future purpose of this code will be to check the existence of tables in the database.
Solution:
Placing this in ./bin/www before the const server = http.createServer(app.callback()); declaration helped:
const query = async () => {
const db = require('../db/pgp').db;
const pgp = require('../db/pgp').pgp;
const result = await db.proc('version', [], a => a.version);
debugLog(`www: ${result}`);
pgp.end(); // for immediate app exit, closing the connection pool (synchronous)
};
query();
You could start your application using a js script that requires your app and uses node's native http module to fire up the server. Exactly like in koa-generator (click).
This is in your app.js file:
const app = require('koa')();
...
module.exports = app;
And then this is in your script to fire up the server:
const app = require('./app');
const http = require('http');
[this is the place where you should run your code before server starts]
const server = http.createServer(app.callback());
server.listen(port);
Afterwards you start your application with:
node [script_name].js
Of course keep in mind the async nature of node when doing it this way. What I mean by that - run the 'listen' method on 'server' variable in callback/promise.
I'm using the library gulp-connect to refresh my browser when I change something in my frontend... but like you know it works in a server like localhost:8080... the problems is that my backend is in IIS.I wonder if is there some way to connect my IIS with gulp-connet to refresh my code when I change it in localhost:80 (IIS) ? Maybe a middleware or something like that?
You would be better off using browsersync:
//Set up the proxy
const browserSyncStart = () => { browserSync.init({ proxy: 'localhost' }); };
//set up a watch
const watcher = () => { return gulp.watch(src).on('all', () => { compileLess().on('end', publish); }); };
//Let the publish function also reload the browser
export const publish = () => {
// Check if the folder exists
if (fs.existsSync(config.publishPath)) {
//copy from /dist to /wwwroot
del(config.publishPath + 'dist/**/*', { force: true });
gulp.src(config.theming.dist + '/**/*').pipe(gulp.dest(config.publishPath + 'dist'));
browserSync.reload();
} else {
log(c.red(config.publishPath + ' does not exist.'));
}
};
//Create a task, run with gulp watch
export const watch = gulp.parallel(browserSyncStart, watcher);
Please, need help with integration of sockets with this koajs skeleton
Here is the code from server side file (/src/index.js)
'use strict';
// 3rd party
require('dotenv').config(); // Load env vars from .env, always run this early
const koa = require('koa');
const bouncer = require('koa-bouncer');
const nunjucksRender = require('koa-nunjucks-render');
const debug = require('debug')('app:index');
// 1st party
const config = require('./config');
const mw = require('./middleware');
const belt = require('./belt');
const cancan = require('./cancan');
////////////////////////////////////////////////////////////
const app = koa();
app.poweredBy = false;
app.proxy = config.TRUST_PROXY;
////////////////////////////////////////////////////////////
// Configure view-layer (nunjucks)
//
// We can override options send directly to nunjucks.
// https://mozilla.github.io/nunjucks/api.html#configure
////////////////////////////////////////////////////////////
const nunjucksOptions = {
// `yield this.render('show_user')` will assume that a show_user.html exists
ext: '.html',
noCache: config.NODE_ENV === 'development',
// don't throw template errors in development if we try to render
// a null/undefined like {{ x }}. in theory, setting it to true prevents
// bugs and forces you to be explicit about {{ x or '' }}, but in reality,
// often more annoying than it's worth.
throwOnUndefined: false,
// globals are bindings we want to expose to all templates
globals: {
// let us use `can(USER, ACTION, TARGET)` authorization-checks in templates
can: cancan.can,
},
// filters are functions that we can pipe values to from nunjucks templates.
// e.g. {{ user.uname | md5 | toAvatarUrl }}
filters: {
json: x => JSON.stringify(x, null, ' '),
formatDate: belt.formatDate,
nl2br: belt.nl2br,
md5: belt.md5,
toAvatarUrl: belt.toAvatarUrl,
autolink: belt.autolink,
},
};
////////////////////////////////////////////////////////////
// Middleware
////////////////////////////////////////////////////////////
app.use(mw.ensureReferer());
app.use(require('koa-helmet')());
app.use(require('koa-compress')());
app.use(require('koa-static')('public'));
// Don't show logger in test mode
if (config.NODE_ENV !== 'test') {
app.use(require('koa-logger')());
}
app.use(require('koa-body')({ multipart: true }));
app.use(mw.methodOverride()); // Must come after body parser
app.use(mw.removeTrailingSlash());
app.use(mw.wrapCurrUser());
app.use(mw.wrapFlash('flash'));
app.use(bouncer.middleware());
app.use(mw.handleBouncerValidationError()); // Must come after bouncer.middleware()
app.use(nunjucksRender('views', nunjucksOptions));
// Provide a convience function for protecting our routes behind
// our authorization rules. If authorization check fails, 404 response.
//
// Usage:
//
// router.get('/topics/:id', function*() {
// const topic = yield db.getTopicById(this.params.id);
// this.assertAuthorized(this.currUser, 'READ_TOPIC', topic);
// ...
// });
app.use(function*(next) {
this.assertAuthorized = (user, action, target) => {
const isAuthorized = cancan.can(user, action, target);
const uname = (user && user.uname) || '<Guest>';
debug('[assertAuthorized] Can %s %s: %s', uname, action, isAuthorized);
this.assert(isAuthorized, 404);
};
yield* next;
});
////////////////////////////////////////////////////////////
// Routes
////////////////////////////////////////////////////////////
app.use(require('./routes').routes());
app.use(require('./routes/authentication').routes());
app.use(require('./routes/admin').routes());
////////////////////////////////////////////////////////////
// If we run this file directly (npm start, npm run start-dev, node src/index.js)
// then start the server. Else, if we require() this file (like from
// our tests), then don't start the server and instead just export the app.
if (require.main === module) {
app.listen(config.PORT, function() {
console.log('Listening on port', config.PORT);
});
} else {
module.exports = app;
}
On client side (/views/master.js) :
....
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var socket = io();
socket.on('news', function (data) {
console.log('received news with data: ');
console.log(data);
});
function myclick () {
console.log("click");
socket.emit('click', { clickdata: 'someone clicked on the button' });
}
</script>
<button type="button" onclick="myclick();">Click Me and watch console at server and in browser.</button>
....
Please, can someone explain to me hot to integrate socket.io with koas server? I've installed ["socket.io": "^1.4.5"]. What are the next steps?
PS: Sory about my ugly english.
I've founded a solution here. Bellow is a general code sample
const Koa = require( 'koa' )
const IO = require( 'koa-socket' )
const app = new Koa()
const io = new IO()
app.use( ... )
io.attach( app )
io.on( 'join', ( ctx, data ) => {
console.log( 'join event fired', data )
})
app.listen( process.env.PORT || 3000 )