Ember and Socket.io/Websocket - sockets

I'm trying to pull in a livestream of data from a socket.io websocket, coming in as JSON.
I was trying to use the method from these folks, but no luck (I'm getting error - "Uncaught TypeError: Cannot call method 'load' of undefined" - which I haven't been able to figure out on my own):
Socket.IO with Ember and Ember-Data
My code:
var socket = io.connect('http://localhost:8007');
socket.on('my_live_stream', function (data) {
store.load(App.Group, data);
});
And more:
App.Group = DS.Model.extend({
id: DS.attr('string'),
name: DS.attr('string'),
usage: DS.attr('string'),
sunshine: DS.attr('string'),
device_info: DS.attr('string')
});
Edit: What the JSON looks like...
{
"group":{
"usage":{
"case1":0,
"case2":0,
"case3":0
},
"sunshine":"00/00/0000",
"id":1010,
"device_info":11.5,
...
I'm still very new to Ember here, but I'm just trying to get {{name}}, {{usage}}. and {{device_info}} to my Index template. I see a great stream of data when I add console.log(data) to the socket code (to replace store.load...). What's the next step?
Thanks so much!

The question you reference is using a very outdated version of Ember Data. You should pretty much ignore any Stack Overflows from before October.
The new method you want is store.push, in your case, in your case store.push('Group', data).
However, there's yet another problem in your code, which is that you don't have access to store in that context. Normally, you access the store inside routes and controllers via this.store. However, you're not inside a route or controller. If you want, you could hack access to the store like so, store = App.__container__.lookup('store:main'), but this is not the Ember way and will probably cause you problems down the line. Instead, you could add it to one of the hooks in the Application Route, where you do have access to this.store.
For example, you could set it up like this:
App.ApplicationRoute = Ember.Route.extend({
activate: function(){
var that = this;
var socket = io.connect('http://localhost:8007');
socket.on('my_live_stream', function (data) {
that.store.push('Group', data.group);
});
})
});
Docs: http://emberjs.com/guides/models/pushing-records-into-the-store/

Related

Mistake in using DOMPurify on the backend to sanitize form data?

I was wondering if it was possible to use DOMPurify to sanitize user input on a form before it is saved to database. Here's what I've got in my routes.js folder for my form post:
.post('/questionForm', (req, res, next) =>{
console.log(req.body);
/*console.log(req.headers);*/
const questions = new QuestionForm({
_id: mongoose.Types.ObjectId(),
price: req.body.price,
seats: req.body.seats,
body_style: req.body.body_style,
personality: req.body.personality,
activity: req.body.activity,
driving: req.body.driving,
priority: req.body.priority
});
var qClean = DOMPurify.sanitize(questions);
//res.redirect(200, path)({
// res: "Message recieved. Check for a response later."
//});
qClean.save()
.then(result => {
//res.redirect(200, '/path')({
// //res: "Message recieved. Check for a response later."
//});
res.status(200).json({
docs:[questions]
});
})
.catch(err => {
console.log(err);
});
});
I also imported the package at the top of the page with
import DOMPurify from 'dompurify';
When I run the server and submit a post request, it throws a 500 error and claims that dompurify.sanitize is not a function. Am I using it in the wrong place, and/or is it even correct to use it in the back end at all?
This might be a bit late, but for others like me happening to run into this use case I found an npm package that seems well suited so far. It's called isomorphic-dompurify.
isomorphic-dompurify
DOMPurify needs a DOM to interact with; usually supplied by the browser. Isomorphic-dompurify feeds DOMPurify another package, "jsdom", as a dependency that acts like a supplementary virtual DOM so DOMPurify knows how to sanitize your input server-side.
In the packages' own words "DOMPurify needs a DOM tree to base on, which is not available in Node by default. To work on the server side, we need a fake DOM to be created and supplied to DOMPurify. It means that DOMPurify initialization logic on server is not the same as on client".
Building on #Seth Lyness's excellent answer --
If you'd rather not add another dependency, you can just use this code before you require DOMPurify. Basically what isometric-dompurify is doing is just creating a jsdom object and putting it in global.window.
const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {window} = new JSDOM('<!DOCTYPE html>');
global.window = window;

parse response received from rememberCustomViewAsync from tableau javascript api

I am trying to save custom views using rememberCustomViewAsync and displaying the saved view using showCustomViewAsync, I want to parse the response received from executing rememberCustomViewAsync, it returns various details including the url of the view.
here is the code i am trying
$(document).on('click', '.new_dashboard_preference > [type="button"]', function() {
tableauViz.getWorkbook().rememberCustomViewAsync($('#dashboard_preference_name').val()).then(function(customView) {
console.log(customView.url); //this is what i am trying to access
jQuery(this).parent('form')[0].submit();
}).otherwise(function (err) {
console.log(err.message);
});
});
Can any please guide as to how the response received from rememberCustomViewAsync be parsed in javascript. Thanks.
If it is a JSON object you can use:
responseVariable = JSON.parse(responseVariable)
You can then use accessors like responseVariable.ItemYouWantToSee or array index accessors such as responseVariable[0].
To take this out of the 'click' event listener and make it a global object you can push the result to an array.

What is the difference between setJSON, setData and loadData?

This is regarding the mentioned methods of sap.ui.model.json.JSONModel in SAPUI5:
setJSON
setData
loadData
What is the difference between these 3 methods? When do we use these methods and can we use more than 1 of them for the same purpose?
Have a look at the well documented API Reference for JSONModel.
In summary (from SAP Documentation):
setData: Sets the data, passed as a JS object tree, to the model.
e.g
var data = {
"ProductCollection": [{
"titleId": 0,
"Name": "Olayinka O",
"ProductId": "001",
"chartValue": 75,
"ProductPicUrl": "sap-icon://competitor"
}]
};
var oModel = new sap.ui.model.json.JSONModel(data);
//OR
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
/*setdata, could also be a odata url in json format*/
loadData:
Load JSON-encoded data from the server using a GET HTTP request and store the resulting JSON data in the model. Note: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy, the request can not successfully retrieve data from a different domain, subdomain, or protocol.
e.g. you can use this to load/GET changes to the data/model and automatically updates the view if that specific model has being binded by reloading the url. If you use load, you don't need the other two in my opinion and loadData with not work on local json data.
var sURL = "https://cors-anywhere.herokuapp.com/https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json";
var oModel = new sap.ui.model.json.JSONModel();
//if called in setInterval, all changes in the backend will be updated in the view if binded in this case every second
setInterval(oModel.loadData(sURL, true), 1000);
setJSON :
Sets the data, passed as a string in JSON format, to the model.
i.e. Same as Set Data but strict JSON
Luckily, the source code of UI5 is quite readable and often the better documentation than most of the API descriptions. Here is what each one of the APIs does basically:
setJSON
"Parse the JSON text and call setData"
JSONModel.prototype.setJSON = function(sJSON, bMerge) {
var oJSONData;
try {
oJSONData = jQuery.parseJSON(sJSON);
this.setData(oJSONData, bMerge);
} catch (e) {
// ...
}
};
Source
setData
"Store the data and notify all dependent bindings (checkUpdate)"
JSONModel.prototype.setData = function(oData/*plain JS object*/, bMerge){
if (bMerge) {
this.oData = /* merge with existing data */;
} else {
this.oData = oData;
} // ...
this.checkUpdate(); // notifies dependent bindings
};
Source
loadData
"Load data from the given remote URL and call setData" --> Please check the source here.
In short, they all call setData at some point.
Which API to call in which situation depends on in which format you have the data available.
The data are in JSON text --> setJSON
The data are somewhere else --> loadData
I already have the data in JS object / array ---> setData
setData
You have a JavaScript object and want to use this data as your model
const oJSONData = {
data: {
id: 4,
first_name: "Eve",
last_name: "Holt",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
}
};
oJSONModel.setData(oData);
setJSON
You have a String that when parsed represents a JavaScript object and want to use this data as your model
const sJSONData = '{"data":{"id":4,"first_name":"Eve","last_name":"Holt","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"}}';
oJSONModel.setJSON(sJSONData);
loadData
You want to access a remote API which returns data as JSON and want to use this data as your model
const sURL = "https://reqres.in/api/users/4";
oJSONModel.loadData(sURL);

MongoDB: can't return random document from collection

I'm working on a word game and am trying to return a random wordpair (my collection) on a page load. I'm using Express and have adapted my code from this tutorial if that's of any use.
A GET request renders my page just fine, and I'm trying to send a random WordPair object alongside the title:
router.get('/', function(req, res, next) {
res.render('play', { title: 'play', random_wordpair: wordpair_controller.wordpair_random});
});
The wordpair_random function is here inside a controller file I've made (which also successfully manages listing the wordpairs and creating new ones etc).
// Get random WordPair
exports.wordpair_random = function() {
WordPair.aggregate(
[{
$sample: {
size: 1
}
}]
)
.exec(function(err, random_wordpair) {
if (err) {
return next(err);
}
console.log(random_wordpair);
return random_wordpair;
});
};
Then inside a play.pug template, I'm simply trying to display this result:
h3 random wordpair selection is: #{random_wordpair}
But all I can see is the function rendered as HTML text. Can anyone tell me what I'm doing wrong?
I also understand looking at the documentation for MongoDB $sample aggregation that I need to be calling my function on the database object, but I've seen various examples and some don't do this. When I try calling db.wordpair.aggregate(...) (or WordPair or wordpairs as it appears in mLab) directly after initializing db in my app.js file, I get undefined errors. My db object doesn't seem to contain the correct data for this request.
Thanks!
I guess you're writing this in Node.JS. A core feature in Node.JS is non-blocking IO model. That means, the code won't wait for a database call to complete to move on.
Another concept you need to get it right is that Node.JS, being a variation of JavaScript, in nature is a functional programming. Assigning a function to a property of a JSON object like below won't cause the function to execute. It simply creates a pointer to the function body, that's why your application prints the function itself.
{ title: 'play', random_wordpair: wordpair_controller.wordpair_random}
To fix this, use a callback
exports.wordpair_random = function(callback) {
WordPair.aggregate([$sample: {size: 1}}]).exec(callback);
};
Then in you web function:
router.get('/', function(req, res, next) {
wordpair_controller.wordpair_random(function(err, result) {
//Handle errors if needed.
res.render('play', { title: 'play', random_wordpair:result });
})
});

how to capture the data sent by alloy ui io request in serveresource method?

Getting blank values for title and description in serveResource method.Is this the right way to send the parameters from io request?
After inserting blank values in database I have to reload the page to see the inserted values?So io-request is not ajax request?
<aui:script use="aui-base">
A.one('#<portlet:namespace/>save').on('click', function(event) {
var A = AUI();
var title=A.one('#<portlet:namespace/>title').val();
alert(title);
var description=A.one('#<portlet:namespace/>description');
var url = '<%= newJob.toString() %>';
A.io.request(
url,
{
method:'POST',
data: {
<portlet:namespace />title: title,
<portlet:namespace />description: description,
},
}
['aui-io-deprecated']
);
Liferay.Util.getOpener().<portlet:namespace/>closePopup('<portlet:namespace/>dialog');
});
AUI's io request is ajax request only.
You can get parameters in serveResource method using code below:
ParamUtil.get(resourceRequest, "NAMEOFPARAMETER");
Modify your javascript function and provide data attribute as below:
data: {
'<portlet:namespace />title': title,
'<portlet:namespace />description': description,
}
I assume both title and description are textfields. If so, description is missing a .val() call, or more appropriately, .get('value'). I didn't use a dialog/modal in my source, but the overall approach should be the same.
<script>
AUI().use('aui-base', 'aui-io-request', function(A){
A.one('#<portlet:namespace />save').on('click', function(event) {
var title= A.one('#<portlet:namespace />title').get('value');
var description=A.one('#<portlet:namespace />description').get('value');
var url = '<%=myResourceURL.toString()%>';
A.io.request(url,
{
method:'POST',
data: {
title: title,
description: description,
},
});
});
});
</script>
I'm still relatively new to Liferay and have had trouble with this as well. I've noticed that the data parameters are not in the parametersMap of the default ResourceRequest, as you have stated. Out of curiosity, I decided to use
UploadPortletRequest req = PortalUtil.getUploadPortletRequest(resourceRequest);
in the serveResource method and check it's parametersMap. The title and description parameters are available therein. I'm still learning where and how to access data from Liferay objects, but it would seem that for the UploadPortletRequest to have the data, it would be plucked from somewhere within the default ResourceRequest ... where still remains elusive to me.
After inserting blank values in database I have to reload the page to see the inserted values?
You have to reload the page because a resource action does not trigger a page refresh. If you are manipulating data that you want reflected in some other "view" you'll need to configure the appropriate communication or use one of the other available url types that does trigger the doView method of your other "view".