Develop Reference

AJAX - How can I build a notification system, that is constantly getting updated, without slowing down my website too much?

I am a beginner to web development, and I am trying to do a notification system with AJAX and jQuery.
In my web application, I have a comment system where you can mention another user. After a comment mentioning a certain user has been written, a new entry on my notifications table will be added, containing the comment, the id of the user who commented and the id of the user(s) who will receive the comment. After the notification is stored in the database, I want the person that was mentioned to receive the notification.
To that effect, I decided to use AJAX. Using the setTimeout() method, I am sending an AJAX request to the database every 2 seconds, and with that, I can display the notifications visually to the user that is meant to receive them.
My only concern is that this will slow down the site once I connect it with a server.
So, I was looking for a way that would allow me to implement a notifications system without slowing the site too much, since the one that I am using currently doesn't seem very efficient.
I would appreciate any help.

Implementing ajax to make a functioning live chat

I'm trying to build a simple live chat for my website, I already have everything set up, meaning databases, login and log out system, forms, displaying the database values in chat form.
The only thing I'm missing is implementing the live refresh function so users don't have to manually refresh the site to see new messages.
I'm a little lost, could you give me some guidance?
I'm guessing I have to add a specific javascript call whenever a message is sent, or the "send" button is pressed to be more specific, then that would call back a function to refresh the chat for every participant. Not sure where to start or which code to use.

Essentially, you have 2 ways to implement this.
Using a polling technique with ajax request which will grant you a greater compatibility, but you will have to much more work to implement it. I don't really consider it for most cases nowadays, because it could be very inefficient.
Using a socket mechanism, you can use web sockets for a out of the box solution, most browsers have support for it nowadays For third party libraries you can use socket.io which can fall back to web socket yet it grants a little bit for features out of the box, like channels, which you would benefit from. Lastly, for a third party service, you can use firebase/firestore which they have a realtime database, so whenever a change happens, you get notified.
I would recommend using either the web socket approach (native) or using a wrapper/library like socket.io. If you go with Socket.io, there are a lot of tutorials out there that build chats with that library, so you can get a working sample really fast.

Hosted React app track clicks with uniques session without user interaction

I know not exactly how to ask this appropriately and where. I tried searching around and visited various (paid) solutions, but I would require a simple solution.
For a scientific work of mine I want to track user interactions or basically button clicks on a simple React site like this example I made http://flock-1401.students.fhstp.ac.at/
Assume the user visits the provided link above, then I want to create a log on a server (maybe nodejs self-hosted) where the user's interaction is tracked with a unique session to distinguish them. At most, there will be 150 users active.
I tried to use the following library:
https://github.com/react-ga/react-ga
However, I tend to not use Google Analytics as I don't need all the included stuff there. Maybe something like this https://github.com/greenstick/interactor? But how do I automatically save it then?
Thank you

Client live update with socket.io

I'm having troubles chosing the best design for my app.
I'm coding a mobile app and I need to get pictures from my server, and display them using their gps coordinates attributes on a google map using markers.
So, normally I'd just GET them from my api using a simple GET /pictures, but then I thought of a better (and maybe more elegant) way to do it. I wanted to use socket.io for live updating the pictures, because when I get the pictures from the API, I don't get all of them, I only take the ones that are where the client looks on the map (using google maps' getBounds()), so GETting /pictures everytime the user changes where he looks seemed a little bit slow.
Initially, I used google maps' idle event to GET the pictures in an area.
What I would like to do now, is a live updating map using websockets, but I can't understand how I would implement it in my app. Here's the problem:
user1 gets the pictures in an area. He gets the pictures, and they are drawn on the map using markers. Ok.
user2 creates a picture, in the area user1 looks. Or even more generally: user2 makes an action on a picture user1 is looking (liking it, deleting it, creating a new one, whatever)
Now, how does user1 know that an action has been taken? The server could broadcast an emit, but then what? What about other users that aren't looking at the picture?
I just don't get how to be synchronous with the server: deleting a marker when the picture is deleted, incrementing a number when a picture gets a like. I don't get it, and I want to know because I think it would be a very good time to make a real time app, or maybe I'm forcing it and I should stick to HTTP.
I've thought of using setInterval on the client and asking for the pictures (with fresh informations on it) but I don't know if it's the cleanest way to do it.
Thank you for your time

You can still broadcast an emit using socket.io and that would be enough for users who are currently looking at the same area; but you also need to store this new information somewhere (e.g. Database) for users who are not currently looking at the same area, so that when they go to that area they would get the most up to date information from the server/database.

Can I associate a user's account with an action to the drive API?

We're looking to make a little webapp to manage our week-long nerf war (humans vs zombies to be precise), and we're thinking about how easy it would be to have Google Sheets be our only backend, and our frontend be entirely javascript/html/css.
Let's say there's two actions that can be done in this javascript:
Register, which adds a row to a certain sheet.
Report tag, which adds a row to another sheet.
Let's say we have 100 players. We'll have each player sign in using a google account. Is there a way that for either of those above actions, we can have sheets know who made that action?
This way, if someone gets hold of the API key and spoofs their referer to make bad requests, then we can know which google account did it and ban them from the game.
For example, if I open up my sheet and say "see revision history", I want to not see one user for all the revisions, I want to see the user who triggered the action.
Is this a reasonable approach, and is it possible? Thanks!
(note: i know these two actions can be done via google forms, which can associate the user's account, but imagine we have more complex actions that cant be achieved with just a google form)

The short answer is no. You'll be using the spreadsheets API (NOT the Drive API) to update the sheet.As far as Google is concerned, the "user" is your application, regardless of which human was driving the application at the time. Your application knows who the human is, and so it is responsible for logging any audit info that your use case may require.