pmx icon indicating copy to clipboard operation
pmx copied to clipboard

integration with angularjs

Open ekarudianto opened this issue 10 years ago • 8 comments

I've been using pm2 for management processing tool of my angularjs project it's a great tool !.. the question is really simple.. could I integrate this component on my angularjs project ? so basically I want to include this component when I do a login for example

$scope.login = function(form) {
   if (form.$valid) {
      pmx.emit('user:register', {
         user : 'Alex registered',
         email : '[email protected]'
      });
   }
}

could I do this ?

ekarudianto avatar Oct 08 '15 10:10 ekarudianto

Hello Eka, no it's not possible for now, but there are some initiatives to build module that can interact with a front end: https://github.com/pm2-hive/pm2-fronterr

Unitech avatar Oct 09 '15 08:10 Unitech

@Unitech hai thanks for your response ! .. actually I've been thinking to build another instance of Restful api application using expressjs.. but now that you mention it.. could you explain it to me a little bit on how to use the pm2 fronterr ?

ekarudianto avatar Oct 09 '15 09:10 ekarudianto

Hey, The pm2-fronterr is lauching a small express server that will listen to a specified port for POSTed data. You then insert the script generated in your front-end application, and all JS and Ajax errors will be reported back to Keymetrics. Feel free to check out and give us feedback! (Install with pm2 install pm2-hive/pm2-fronterr)

alavit-d avatar Oct 09 '15 09:10 alavit-d

hi @alavit-d could your component be use for event logging management ? so for example if I'm loggin I would like to store on who is logged in to keymetrics..

ekarudianto avatar Oct 09 '15 09:10 ekarudianto

Not designed for this at the moment unfortunately, mainly for client-side errors. I feel like you would have more luck trying to create a Keymetrics custom Probe that retrieves the number of clients in back-end.

alavit-d avatar Oct 09 '15 09:10 alavit-d

Hi @alavit-d & @Unitech, so I create a workaround by creating a simple logging restful api app using express js.. so whenever the frontend (which is angularjs) is logged in.. I simply made an http call to the expressjs api and from expressjs api, it will emit an event using pmx api..

this is the codes

// server.js
// BASE SETUP
// =============================================================================

// call the packages we need
var express = require('express');        // call express
var bodyParser = require('body-parser');
var app = express();                 // define our app using express
var pmx = require('pmx');
var url = require('url');
var https = require('https');
var fs = require('fs');

// configure app to use bodyParser()
// this will let us get the data from a POST
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, JSESSIONID");
    next();
});

var port = process.env.PORT || 8080;        // set our port

// ROUTES FOR OUR API
// =============================================================================
var router = express.Router();              // get an instance of the express Router

// test route to make sure everything is working (accessed at GET http://localhost:8080/pmx)
router.post('/', function(req, res) {
    var urlParts = url.parse(req.url, true);
    var urlQuery = urlParts.query;

    if (urlQuery.JSESSIONID && urlQuery.activity) {
        pmx.emit(urlQuery.activity, JSON.stringify(req.body));
        res.json({message: "JSESSIONID provided", urlQuery: urlQuery, req: req.body});
        console.info("pmx event has been emited !");
        console.info("activity : " + urlQuery.activity);
        console.info("payload : " + req.body);
        console.info("stringify payload : " + JSON.stringify(req.body));
    } else if (!urlQuery.JSESSIONID && !urlQuery.activity) {
        console.error("There's no activity and JSESSIONID provided !");
        res.json({message: "There's no activity and JSESSIONID provided !"});
    } else if (!urlQuery.activity) {
        console.error("There's no activity provided !");
        res.json({message: "There's no activity provided !"});
    } else if (!urlQuery.JSESSIONID) {
        console.error("There's no JSESSIONID provided !");
        res.json({message: "There's no JSESSIONID provided !"});
    }

});

var privateKey = fs.readFileSync('https.key', 'utf-8');
var certificate = fs.readFileSync('https.crt', 'utf-8');
var credentials = {key: privateKey, cert: certificate};

app.use('/pmx', router);
//app.listen(port);
https.createServer(credentials, app).listen(port);
console.log('pmx api integration has start on port : ' + port);

all is well untill I do a test.. the rest api worked but when I go to the keymetrics dashboard.. There's no event logged there on the events menu, meanwhile on the more menu -> realtime event, the logged are there in realtime. am I missing something ?

ekarudianto avatar Oct 12 '15 04:10 ekarudianto

Hi, To clarify in Events -> data you see no events at all under the API name? Did you start the API with pm2?

alavit-d avatar Oct 13 '15 13:10 alavit-d

Hi @alavit-d,

the api name is pmx-api-integration

yes I am using pm2 start server.js, the server.js is the file name of the expressjs api that I use...

ekarudianto avatar Oct 15 '15 03:10 ekarudianto