Pass object to a new page - javascript

I have some json which is being ng-repeated:
{
"title": "image title",
"description": "Lorem ipsum dolor sit amet, per ea ferri platonem voluptaria, ea eum ubique ornatus interpretaris. Dolore erroribus reprimique ex mea, mei soluta iisque cu, cu eam repudiare iracundia. Te cum populo molestie noluisse. Cu graece propriae eum, at qui erat oportere, ad wisi consequat persecuti pri. Ne usu partem discere, quas aliquam id cum. Tation numquam sensibus pri ne, his cibo noluisse scriptorem in.",
"imageUrl": "http://some.url.com",
"tags": "Apple, Orange, Banana, Pear, Grapes, Peach",
"owner": "some name",
"thumbnailUrl": "http://some.url.com"
},
On the index page it only shows the thumbnailUrl, if you click on the image it should pass that object to a new 'page'/template and display the description/author etc.
I've tried using various examples and none of which seem to work as I want. Quite confused and any help would be awesome.

If you are using some sort of router, you can pass this object to the new page, or like code90 said, you can use a service to maintain these objects between pages.
EDIT: Here is a link to the ui-router page
https://angular-ui.github.io/ui-router/site/#/api/ui.router

Related

How do I disable mousewheel scroll

I tried this, it didn't work
$('body').bind("mousewheel", function() {
return false;
});
then I tried this
$('body').hover(function (){
$('body').css('overflow','hidden');
},
function (){
$('body').css('overflow','auto');
})
It sometimes works, but sometimes didn't work.
Is there any idea to disable the mouse wheel?
Note that in current versions of Chrome, scroll and wheel handlers are treated as passive by default and so can't be cancelled. See feature info.
I'm not sure if there's a way to specify an active handler using jQuery's on method, but you can do this fairly easy with the built-in addEventListener. Also, in this case return false won't work, you'll need to call preventDefault().
document.body.addEventListener('wheel', function(e){ e.preventDefault(); }, { passive: false });
p { width: 320px; }
<p>Lorem ipsum dolor sit amet, audire facilis no pri, ea eam duis laboramus, at pro atqui tollit meliore. Vis ut malorum vocibus percipit, nisl atqui ea sea. Illud errem te vix, ex facer omittam his. Ne sit consul suscipit. Eu usu percipit efficiendi dissentiet.</p>
<p>Te ius dictas oporteat facilisi. Dicta diceret debitis et vim. Paulo insolens comprehensam est cu, dolor assueverit eu mei. Pro an facilisis rationibus. Summo molestie mei cu. His nobis erroribus in, iuvaret repudiare delicatissimi mea ut, nec at elit nostro.</p>
<p>Ad augue invenire efficiendi qui, facilisi mediocritatem ei duo. Ceteros mnesarchum et has, at ius choro dolor verear. Purto sententiae interesset et vim, quis nisl facer vix ei. Est agam ocurreret assentior id, et partem fabellas vim.</p>
I've tested solution in Chrome 73 and Firefox 66. To make sure this works in all browsers, be sure to read MDN and quirksmode.

Vue.js: Cannot bind md-autocomplete model to array of objects

I have a data grid with a field (column) that needs to be updated. The complete data grid is an array of objects:
shot: [
{
shot_name: 'Project_001_0150',
status: 'SupervisorHold',
artist: 'mark',
description: '',
note: 'Lorem ipsum dolor sit amet, purto albucius eu pro. An inimicus consulatu ius, eum at facete epicurei detraxit. Has cu debitis voluptatum delicatissimi. An veri tractatos duo. ',
},
{
shot_name: 'Project_001_0160',
status: 'Submit',
artist: 'jimbob',
description: ' ah',
note: 'Ut vis fabulas eligendi, omnes philosophia id pri. Ut eum animal aliquip atomorum, in possim equidem copiosae sea, nec id exerci impedit fuisset. Ludus ullamcorper eam te. Dicunt consectetuer eos eu, ad sit maiorum erroribus molestiae, purto duis pericula pro eu. ',
},
{
shot_name: 'Project_001_0190',
status: 'SupervisorHold',
artist: null,
note: 'nothing',
description: ' Duo an mutat aperiam, mazim errem suscipit ex nam, sea in harum oratio aliquid. Nam cibo disputando te, probo elaboraret mel cu. Dicta dictas malorum nam ex, duo ad brute causae consetetur. An sale civibus incorrupte has, adhuc affert doctus vis at. Eum graecis qualisque id, ne pri menandri platonem. Mea idque expetendis voluptatibus ea, nibh cetero voluptua eam id. ',
},
{
shot_name: 'Project_001_0370',
status: 'Submit',
artist: 'jimbob',
description: ' n',
note: 'Ut vis fabulas eligendi, omnes philosophia id pri. Ut eum animal aliquip atomorum, in possim equidem copiosae sea, nec id exerci impedit fuisset. Ludus ullamcorper eam te. Dicunt consectetuer eos eu, ad sit maiorum erroribus molestiae, purto duis pericula pro eu. ',
},
{
shot_name: 'Project_001_0590',
status: 'SupervisorHold',
artist: null,
description: '',
note: 'Ut vis fabulas eligendi, omnes philosophia id pri. Ut eum animal aliquip atomorum, in possim equidem copiosae sea, nec id exerci impedit fuisset. Ludus ullamcorper eam te. Dicunt consectetuer eos eu, ad sit maiorum erroribus molestiae, purto duis pericula pro eu. ',
}
],
The field to be updated is also an array of objects
artistList: [{
"staff_id": 1,
"staff_name": "jimbob"
}, {
"staff_id": 2,
"staff_name": "mark"
}, {
"staff_id": 3,
"staff_name": "jean"
}]
This is the Vue.js table
<md-table-body>
<md-table-row v-for="(row, rowIndex) in shot" :key="rowIndex" :md-item="row">
<md-table-cell v-for="(column, columnIndex, i) in row" :key="columnIndex">
<md-input-container v-if="columnIndex === 'artist'">
<label>Type to select Artist</label>
<md-autocomplete v-model="shot[i].staff_name"
:name="'artist' + i"
:id="'artist' + i"
:list="artistList"
print-attribute="staff_name"
:max-height="10"
:debounce="500">
</md-autocomplete>
</md-input-container>
<span v-if="columnIndex !== 'artist'">{{ column }}</span>
</md-table-cell>
</md-table-row>
</md-table-body>
Binding fails to work. When the autocomplete value is set, I want to update the bound model, which is the relevant staff_name field of the shot array above.
Complete runnabale code at https://codepen.io/hanxue/pen/OOLYbv
Environment
vue: 2.3.4
vue-material: 0.7.4
Update 1
Instead of down voting, could moderators suggest how to better ask this question?
Update 2
Link to the correct codepen https://codepen.io/hanxue/pen/OOLYbv
Looks like you need
<md-autocomplete v-model="row.artist"
CodePen
Edit
Actually, autocomplete is acting like a select not an autocomplete.
Added a filter to make autocomplete work.

How can I reset active touch-event-listeners inside YouTube embed <iframe>?

tl;dr:
YouTube embedded video <iframe> tags have touch-event-listeners. Active touch-event listeners cause scroll performance issues - AKA jank. I usually manage to fix active touch-event related jank issues by using touch-action: initial in CSS. This does not work for Youtube embedded video <iframe> elements.
Intro:
Kayce Basques - Google techie - writes:
When you scroll a page and there's such a delay that the page doesn't feel anchored to your finger, that's called scroll jank. Many times when you encounter scroll jank, the culprit is a touch event listener.
Touch event listeners are often useful for tracking user interactions
and creating custom scroll experiences, such as cancelling the scroll
altogether when interacting with an embedded Google Map.
Currently,
browsers can't know if a touch event listener is going to cancel the
scroll, so they always wait for the listener to finish before
scrolling the page.
I have found a way to sidestep this with CSS using touch-action
The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user via a touchscreen (for instance, by panning or zooming features built into the browser).
If I use touch-action: initial the problem disappears.
If you want to see what causes scroll jank and what does not, examine the screenshot below
Red buttons cause jank while green ones don't. The only differece between the two is that red buttons are set to touch-action: manipulation which makes red buttons actively "listen" and process input before scrolling can proceed
The issue
I embed videos from Youtube. The iframes contain touch event listeners that are active. The method I mentioned above does not work. I don't have access to Youtube code to edit the listeners and set them to passive.
I have tried to narrow down the issue. I have found that the element with the class .html5-video-player has the following CSS
.html5-video-player {
touch-action: manipulation;
}
According to the docs, manipulation can
[...] Enable panning and pinch zoom gestures, but disable additional
non-standard gestures such as double-tap to zoom. Disabling double-tap
to zoom removes the need for browsers to delay the generation of click
events when the user taps the screen. This is an alias for "pan-x
pan-y pinch-zoom" (which, for compatibility, is itself still valid).
and
[...] is also often used to completely disable the delay of click
events caused by support for the double-tap to zoom gesture.
All of which are things I don't need.
Logic says all I need to do is add this to my CSS
.html5-video-player {
touch-action: initial;
}
but that doesn't work, nor does this:
.html5-video-player {
touch-action: initial !important;
}
or this:
.html5-video-player {
touch-action: unset !important;
touch-action: initial !important;
}
or even this:
.html5-video-player {
touch-action: none !important;
}
Even if I try a different approach like:
*>iframe,
iframe>*,
*>.html5-video-player,
.html5-video-player>*,
.html5-video-player,
iframe>*>.html5-video-player,
iframe .html5-video-player {
/* <---- All of these don't work */
touch-action: initial /* and all other variations mentioned above */
}
It still does not work.
For a reference on what it actually looks like on screen examine the screenshot below
Code sandbox:
* {
max-width: 500px;
margin: 1em auto;
text-align: justify
}
button {
color: white !important;
background: green;
}
button:nth-child(odd) {
/* <---- these buttons have active touch event listners and hinder scrolling */
background: red;
touch-action: manipulation
}
*>iframe,
iframe>*,
*>.html5-video-player,
.html5-video-player>*,
.html5-video-player,
iframe .html5-video-player {
/* <---- All of these don't work */
touch-action: initial
}
<p>Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo
his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sint blandit an sea. Etiam tincidunt his ad, ex assum fabellas deterruisset vix. Usu
ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus usu. Libris
sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et.<button>Button</button> Brute tation sea te, quas temporibus vel an. Nam cu
legere malorum, sea ut<button>Button</button> tollit insolens reformidans. Ut mei vide mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod
vulputate constituam no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id,
in pro case choro. Cum in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam
albucius detraxit usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam,<button>Button</button> eos sonet antiopam
concludaturque ea, eos ei falli oporteat deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur
disputationi, usu dicta veritus in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer
eu mea. Eu qui sonet nusquam molestie, ex dicant <button>Button</button>facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit
ei ius, sit ridens commune conceptam ei. Est purto putent accusamus in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute
vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens, delectus deterruisset eu<button>Button</button> pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis
ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur
comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis
vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret
et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut, eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi
accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse
consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta percipit, et cibo zril clita mel. Quo elitr partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius
et, agam decore conceptam no pro, vide aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus
mediocrem. Ei his tamquam perpetua. Ei epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere,
mea prima tincidunt assueverit at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel. Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et
mei meis inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo.
Volumus recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6h4_-F6jnyk?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo
his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sint<button>Button</button> blandit an sea. Etiam tincidunt his ad, ex assum fabellas
deterruisset vix. Usu ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus
usu. Libris sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et. Brute tation sea te, quas temporibus vel an. Nam cu legere malorum,
sea ut tollit insolens reformidans. Ut mei vide<button>Button</button> mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod vulputate constituam
no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id, in pro case choro. Cum
in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam albucius detraxit
usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam, eos sonet antiopam concludaturque ea, eos ei falli oporteat
deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur disputationi, usu dicta veritus
in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer eu mea. Eu qui sonet nusquam molestie,
ex dicant facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit ei ius, sit ridens commune conceptam ei. Est purto putent accusamus
in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens,
delectus deterruisset eu pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At
elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex
diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam
delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut,
eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt
nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta
percipit, et cibo<button>Button</button> zril clita mel. Quo elitr<button>Button</button> partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius et, agam decore conceptam no pro, vide
aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus mediocrem. Ei his tamquam perpetua. Ei
epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere, mea prima tincidunt assueverit
at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel.<button>Button</button> Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et mei meis
inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo. Volumus
recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo</p>
Question:
How can I turn off / disable / reset the touch event listener inside a Youtube embed <iframe>?
You can't apply a CSS style to an <iframe> - it's a new document with a new CSS cascade.
Instead you'll need some JS to apply the style property to the new document, and you'll need a CORS header set or host the <iframe> on your own domain.
That done you can manipulate the <iframe> content to include your styles. There are better answers already on here to help with that.
However, even if you can that may not be enough, as YouTube are switching to apply Shadow DOM (they already do if you opted in) in which case the video player itself gets a shadow style tree that you can't access from the <iframe>.
In your snippet you're embedding an <iframe> directly. Instead use the YouTube API to create the player. This exposes player.removeEventListener(), which can remove the janky events and player.getIframe() that gives you access to the frame's DOM directly.
You can also access the player in the creation event:
// Loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Once the script has loaded add the player
function onYouTubeIframeAPIReady() {
var player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'ylLzyHk54Z0',
events: {
'onReady': onPlayerReady
}
});
}
// Once the player is ready set its style
function onPlayerReady(event) {
event.target.style.touchAction = 'initial';
}
<div id="player"></div>
Though that snippet has loads of errors due to the preview using a sandbox <iframe> of its own.

Node server freezes with lot of websocket data transfer

I'm trying to stream data from a node.js server to lot of clients (> 3000).
The node.js server receives the data from one client and broadcast it to all clients. The data is sent once every second and each data is around 2KB. I use ws module to send data via websocket.
The node server is located on an AWS EC2 m3.medium instance which only runs the server.
The clients are simulated on 15 different EC2 t2.micro instances, each launches 300 clients.
Everything is going fine at the beginning but after some time (around 3 min) the server freezes. I can not kill the process or do anything on the server. But if I kill all my clients (by rebooting all the clients instances), the server responds again.
On the server, the CPU is between 40 and 60%, the memory is < 1.5GB (the instance has 4GB), the download bandwidth is around 1.5 Mbits/sec, the upload bandwidth is around 75 Mbits/sec. I did a speedtest and the max bandwidths are around 400 Mbits/sec in download or upload.
Before the server freezes, the memory increases from 300MB to 1000MB. I don't know why and if it is related. I used heapdump and did not manage to understand where the leak was.
Here is the code on the server:
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });
var users = Array();
wss.binaryType = 'arraybuffer';
wss.on('connection', function(ws) {
console.log('new user connected');
users.push(ws);
console.log(users.length);
ws.on('error', function(e) {
console.log('onerror called');
ws.close()
});
ws.on('close', function () {
console.log('closed');
users.splice(users.indexOf(ws), 1);
ws.close()
});
ws.on('message', function(data) {
if (data.length < 10)
return ;
var len = users.length;
for (var i = 0; i < len; i++) {
users[i].send(data, { binary : true });
}
});
});
And here is the code (in python) to send the data:
#!/usr/bin/env python
from time import sleep
from websocket import create_connection
#connection to server
ws = create_connection(server_url)
string = "Mea unum iusto virtute et, et meis munere vix. Meliore sensibus omittantur eum ne, sea quis epicuri sapientem at, fabulas consequat interesset in usu. Vix epicurei platonem ea, in vis agam accu\
sata. Quando maluisset forensibus ut nec, debitis percipitur ad vim, ne vix impetus volutpat. Quo magna viderer ne, nemore doctus copiosae cu mel, id vix dolorem omittam laboramus. Ne populo reprehendunt\
est, recteque dissentiet delicatissimi vis an. Dolores euripidis complectitur no nam, amet nominavi voluptua ut pri. Vix ex timeam iisque gubergren, ne vim error imperdiet deterruisset. An duo autem vir\
is vituperatoribus. Adversarium instructior te eam. Enim moderatius no eam, ut sit viris populo, ex fugit adolescens inciderint ius. Eum idque dolore voluptatum ex, ex pri solet commune mediocrem. In nib\
h affert pro, mei convenire salutandi argumentum at. Nec in vidisse tamquam. Eos an epicurei suavitate. Ex erat scribentur signiferumque quo. Pro ex sapientem deseruisse. Lorem essent omittam sed ad, pop\
ulo reprehendunt ut sit. Pri maiorum fierent te. Vim aeterno aperiam id. Mea ferri integre eu. Cu per nihil affert, fierent percipit accommodare nam te. Eu qui maiestatis concludaturque, at detracto coti\
dieque vel, no prima essent delicata sea. Nam at appareat reprehendunt. Ubique iudicabit consetetur eu sit. Ius et vivendo propriae prodesset, id his primis platonem, qui nostro quodsi cu. Mea ne wisi mu\
tat facete. Dolorem urbanitas theophrastus ut eam, mei no animal aliquid. Te est movet dicam, id labore latine rationibus his, nullam omnium tincidunt nec ut. Eu mundi ancillae erroribus vis, no vim popu\
lo intellegam. Sonet decore volutpat in has, vidisse appetere reprehendunt vel an, at sea ipsum munere corrumpit. Eos noluisse incorrupte reprehendunt cu, qui quidam intellegebat id, vel audire voluptua \
complectitur ne. Posse iuvaret prodesset vix ea. Urbanitas scriptorem ne eos, te soluta probatus est. Mei ex brute congue, in option saperet mel, veniam ocurreret no quo. Malorum mnesarchum ex quo. Meis \
quaeque pericula duo ei. Ei everti doctus vel."
try:
for i in range(100000):
sleep(1)
ws.send(string)
print('emit', i)
except:
ws.close()
ws.close()
As the processor is not at 100% and the bandwidth is less than max bandwidth, do you have any idea of what can happen?
As determined in the discussion in the comments, the issue was that the clients were not consuming the data sent to them.
Most likely, this caused the unacknowledged messages to remain in memory waiting for the clients to consume them (even if they did nothing with them), which in turn caused the process to grow and to exceed available memory. It then either started to swap heavily, or exceeded available swap, which is usually not something a system handles very well.
could it be a configuration problem? there is a limit on how many file descriptors can be opened under linux OS.
Here there is a good starting point to find how you should setup ou machine to handle as many connection as possible

Can I word wrap to prevent weird one word on second line problems?

Is there a CSS style or a JS library that can be used to prevent weird one word on second line problems? For instance, suppose a div fits this sentence perfectly:
Sign up now and start today!
But then when translated into French, looks like this:
Inscrivez-vous et commencer
maintenant!
I would prefer that the sentence be split equally balanced, like this:
Inscrivez-vous et
commencer maintenant!
I can't manage these with line breaks arbitrarily, I need a CSS or JS library that just fixes them.
You can programmatically (i.e. with JavaScript) convert all final spaces in whatever html elements you want to non-breaking spaces.
Run the code snippet below and re-size the window to see the effects of line-wrapping: You will never see a single word on the last line of a paragraph (or long title, or whatever). In this code, you can choose which elements to target, e.g. just paragraphs, or divs and paragraphs, etc. by creating a string containing css notation for the tags of the elements you want modified. Note that the use of the <span> element in the code is simply for demonstration purposes. In real life, leave it out.
To give credit where credit is due, while I was working on this answer, SO contributor QBM5 also suggested the use of non-breaking spaces in this way.
var htmlTagsToModify = "h1, h2, div, p, li";
$(document).ready(function() {
$("button").click(function() {
$("span").toggleClass("show");
});
// $(htmlTagsToModify).css({ 'color': 'red' });
$(htmlTagsToModify).each(function(idx, elem) {
var content = $(elem).html();
var lastSpace = "<span> </span>"; // just use this line for demonstration purposes
// var lastSpace = " "; // use this line in actual implementations
var modifiedContent = content.replace(/\s+(\S+\s*$)/, lastSpace + "$1");
$(elem).html(modifiedContent);
});
});
span.show {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle highlighting of last spaces</button>
<p>Resize this window to observe line-wrapping.</p>
<h1>Lorem ipsum dolor sit amet, est ex soleat deseruisse, cu alia fabulas sit. Et usu aliquid sanctus laboramus.</h1>
<div>Est oporteat principes dissentias cu, ad nec essent invidunt. Illud labore fierent et sea. Sit rebum veritus prodesset ea, vix te duis everti nusquam. Vis ei ludus detracto, vix nihil dicunt facilisi eu. Ut alterum propriae per, tritani consetetur no usu. Eloquentiam disputationi id quo, illud etiam has an.</div>
<h2>Mea ad accusam offendit. Facer convenire his no, causae reprehendunt pri ne. Vim iriure labitur sensibus an.</h2>
<p>Albucius concludaturque vel at. Vocent animal graecis cum et, noluisse principes an quo. Primis minimum cu pro, sit ponderum lobortis mandamus te, ad vis movet equidem. Inermis oporteat aliquando at eam, duo veritus vivendo iudicabit in, ne vitae ubique delicata eam.</p>
<ul>
<li>Civibus ullamcorper conclusionemque usu at, ignota noster virtute cu his. Id quo ipsum feugait, erat euismod lucilius ut pri, pri at adhuc aliquid adipiscing. Ius te habeo suavitate neglegentur, in ius tota probo. Ut atqui aperiam accusam ius, ludus sadipscing no ius. Cum congue audire ad, at dicat novum meliore his, pri et delenit dissentiunt. Vix mandamus consulatu ut.</li>
<li>Vide contentiones ad ius, id ipsum meliore nominati duo. Clita scaevola invidunt no has. Eam facete suscipit ut. Duo alterum antiopam philosophia cu, ex eos delicata tractatos. Qui regione meliore ea.</li>
</ul>
Put the text in a span, then use css to set the maximum width of the span. Not sure how you are using javascrip on this, but the following should give you an idea of how to go about it.
html
<span class='texttotranslate'>text to be translated</span>
css
.texttotranslate
{
display: inline-block;//maybe
max-width: 100px;//whatever
}

Categories

Resources