We Keep Coding

Node.js - Proper way to add same block of code on event

I use Node.Js along with Express and Express HBS (Handlebars). And for users real time synchronization I use Socket.IO.
Let's say I code a web chat and each time someone hit the send message button I emit an event from client to the server. Next, the server will receive this event and emit a new event to all the others client, updating everyone one with the last message send by our first user.
Since we all want to be messy for the less and organize as possible, I would like to have a template file containing my new message skeleton. But after that I don't understand what I've to do. My first thought was render this template either :
from the client with data send by Socket.IO.
or from the server and send back the html rendered to the client through Socket.IO.
But it seems that's not recommendable ways, as far as I am in my research.
What I would like to avoid is :
HTML Skeleton inline in the client JS code receiving the new message from Socket.IO.
that everyone ask to the server (ajax request for example) the same message just after receiving the info from Socket.IO that it is one available. What if I had 10,000 users sending and receiving message ?
that we put the block of code in a <script></script>, get it inside the js and put it at the right place in the DOM when I need it. Best approach I found for the moment, but what if I need a lot of this sort of thing ? I don't like the idea that I could have a lot of blocks code at the end of my DOM just in case I could grab it and use it, maybe or maybe not.
Reload the entire page each time a message is send.
Actually, my current project is not a chat but I use this as an example. Keep in mind that the block of code I want to add to the DOM on events could be more heavy than just a chat message.
What is your thoughts about all of this ?

What you can do is send the template earlier on as a string, compile it and store as template (in some Map). Then when a new message comes in, you just need to pass in the data to get the html content where you can then set as innerHtml to some div at your desired location.
If you need my thoughts i will say the stack may be an issue. You want to realise a reactive feeling in your application but at the expense of your api, as it continously compile those templates to send to your various clients as html.
Another bad effect to consider is those html tend to be heavy when sending to the various clients, whereares sending just the data that changed is quite light weight.
Best approach will be use a client framework that is best suited for such reactivity you need. A library/framework like React will permit you manage the events, and show new data using components available on the client. You will only need to send data concerning the event like the sender info and content.
Check out this page on handlebars website specify best suits for handlebars. https://handlebarsjs.com/installation/when-to-use-handlebars.html

Sending safely JSON to server via an HTML form page

I have an html page that has a form and is communicating to a server via JSON requests, when loading (e.g. in order to remember user's previous answers) and when submit button is pressed (e.g. in order to save his new answers). Every user has a specific user_id that is located as an attribute in the url of the website. I have only HTML pages, CSS and Javascript that makes some simple functions, as well as received and sends the requests.
The problem is that the server needs an api-key for the request to happen, that I need to be kept hidden, but instead is easily discovered when the user sees the source code. I want this specific line to be hidden, but I guess this is not possible without any backend in the game.
I would like to know the easiest and fastest way to get from this state (just frontend, where every piece of information in the source code is totally insecure) to another where the api-key (at least) is not on the open.
I guess the solution is to use a server for that part but I need suggestion on the easiest transition from my code to another. I tried to use GWT, as I am a bit more familiar with JAVA backend application (but not with GWT), but seems like a big trouble, where I need to change my HTML, my Javascript and also the CSS that I have may not be useful, as well as I face a lot of problems when trying to read my parameters.
I know that it is not the best way but I do not have a lot of time to make it work, so sorry if it seems lazy (I am new to this type of programming), but I haven't found anything helpful and I cannot study for 2 weeks in order to be able to begin implementing it.
Is node.js (which is Javascript and I already have implemented the request sending/receiving in this language) easier than GWT for that matter? Will my sensitive data be secure in that way? I would be grateful if there was a similar sample, that I could start using for my implementation, as I haven't find anything that is specifically helpful for my situation.
Thanks in advance!

NodeJs is not javascript, NodeJs is specific javascript "interpreter" whose is purpose is mainly to be executed server-side. If you have an HTML page, it is likely to be loaded in a web browser (client-side), so not in a NodeJs environnement.
Everything that is hard-coded in the javascript of you web page is visible from the client, there is no way around that. So yes, you need some server-ish thing somewhere.
If you are not to manage a server by yourself or via PaaS, you can go for a serverless architecture. For instance, If you consider AWS which I know the most, you can easilly add some user management to your web page using Aws Cognito User Pool. Once a user is connected and have the good permission, he can be granted access to some other resources via a JWT token that you send along with your request.

WebRTC sending string messages

I want to realize a simple application in HTML/Javascript.
There should be two pages:
page1.html and page2.html. page1 should have a text box and a button. When pressing the button it should just be sent to page2, which has to display it.
I have found this example and hosted :
http://bobvann.noip.me/temp/chatp2p/
(this works with a websocket which connects to a ruby program running on that same server.
Please let me have a simple solution how to send text messages from a page to an other. Just this.
Thank you very much.
Have a good day :)

So assuming you know how to set up WebRTC for audio and video, the answer is quite short. You need to use a WebRTC data channel over a similar "peer connection" that is used for audio and video. Here is a decent example that shows how to send strings. You should be able to use it for sending structured messages in JSON, major browsers have JSON.parse that deals with conversion to objects.
But you probably want to know how it works in a bit more detail than a working non-configurable example, even if it solves your problem. Some up-to-date explaination about what it is and how to use it can be found in this article on HTML5 Rocks. The nature of your task implies using a reliable mode — you don't want your messages have a chance of not arriving or arriving disordered, right? The rest is up to you.
Regardless, I strongly recommend that you watch and understand this presentation about WebRTC at Google I/O that show pretty much everything WebRTC is designed for.

Javascript and PHP connected through AJAX is far from enough to achieve a chat.
Each side you need:
a DIV to display the conversation.
Followed:
an INPUT to enter message.
a BUTTON to send your message, using an Ajax function
that send string.
A PHP function to append the message field at the end of a chat sequential text file, display back chat list in the DIV.
Trick if you send an empty message, jump append, it will display your counterpart messages had sent while.
Empty message can trigger BUTTON after 5 sec delay repeatedly.

How would I capture the timestamp of when a link is clicked in an Email?

This may be a bit of a tricky one (for me at least, but you guys may be smarter). I need to capture the timestamp of exactly when a reader clicks a link in an email. However, this link is not a hyperlink to another webpage. It is a link formatted as a GET request with querystrings that will automatically submit a form.
Here is the tricky part....The form processing is not handled by PHP or .NET or any other server side language. It is a form engine that is hosted and managed by a cloud based marketing platform that captures and displays the form submission data (So i have no access to the code behind the scenes).
Now, if this wasn't an email I'd say it is simple enough to just use Javascript. However, javascript doesn't work so well with email, if at all (I'm just assuming there are some email clients out there that support javascript).
How would you go about capturing the timestamp for when the link is clicked without using any type of scripting? Is this even possible?
The best solution i could come up with was to have the link point to an intermediate page with javascript to capture timestamp and then redirect to the form submission. Only problem with that is that it will only capture timestamp of page load and not of the actual click activity.

There is no way to do what you want "without any type of scripting". If no scripting is done, no functionality may be added or changed.
The best option is the very one you suggested: use an intermediary page that records the request time. Barring unusual circumstances (such as a downed server), the time between a link being clicked and the request reaching the server will be less than 1 second.
Do you really need a higher resolution or accuracy than ~1s? What additional gain is there from having results on the order of milliseconds or microseconds? I can't imagine a scenario in which you'd have tangible benefits from such a thing, though if you do have one I'd love to hear it.

My initial thought was to say that what you're trying to do can't be done without some scripting capability, but I suppose it truly depends on what you're trying to accomplish overall.
While there is ambiguity in what you're trying to accomplish from what you have written, I'm going to make an assumption: you're trying to record interaction with a particular email.
Depending on the desired resolution, this is very possible--in fact--something that most businesses have been doing for years.
To begin my explanation of the technique, consider this common functionality in most mail clients (web-based or otherwise):
Click here to display images below
The reason for this existing is that the images that are loaded into the message that you're reading often come from a remote server not hosted by the mail client. In the process of requesting that image, a great deal of information about yourself is given to that outside server via HTTP headers in your request including, among other things, a timestamp for the request. Thus the above button is used to prevent that from happening without your consent.
That said, its also important to note how other mail client providers, most notably gmail, are approaching this now. The aforementioned technique is so common (used by advertisers and by other, more nefarious parties for the purpose of phishing, malware, etc) that Google has decided to start caching all mail images themselves. The result is that the email looks exactly the same, but all requests for images are instead directed at Google's cached versions.
Long story short, you can get a timestamp to note interaction with an email via image request, but such metric collection in general, regardless if its done in the manner I've outlined, is something mail clients try to prevent, at least at some level.
EDIT - To relate this back to what you mention in your question and your idea of having some intermediary page, you could skip having that page and instead you would point an image request towards a server you control

how to update a Django page without a page reload?

My Django app displays data from a database. This data changes without user intervention, i.e. behind the scenes. Whenever it changes, I would like the webpage to update the changed sections without a full page reload.
Obviously AJAX springs to mind. When the page is loaded initially (or manually, fully re-loaded later on), the rendered template loads a JavaScript that runs window.onload = update("all"), update(...) in turn triggers a number of XMLHTTPRequests which again return data that gets transformed into HTML pieces for the corresponding sections. All works fine. At the initial page load.
Now I find myself in a Python function that saves a new object to the database.
How do I tell the browser to run update(...) ?
Do I need to somehow manually issue a request to a url that is mapped to a view which in turn renders a template that contains the JavaScript code to run update(...) ??? Oh my!
I feel like I'm not following the usual approaches.
Maybe I'm just standing to close in front of the problem.
Can anyone help me ?

2021 update: Use channels: https://channels.readthedocs.io/en/latest/
You have two choices
Have the browser poll using setTimeout()
Look into Comet -- this is a technique for pushing data from the server to the browser.
Here's an article on Comet in Django

two approaches:
just update the database and wait until the next AJAX query. That means it should do the query periodically, you'll have to balance between immediacy and server load. It helps a little if you can do a cheap query to just verify if there has been an update. Maybe make that check rely only on memcached instead of going to the DB
use comet. In short: the client does an AJAX query asking for the update. the server sees there's no update, so it doesn't answer. Instead, the connection is kept open for a long time. Eventually either the update comes and the server finally answers, or the client times out and kill the connection. In that case, the client should immediately reissue the query to keep waiting for the update.

You can also use The Websocket API https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.