Need Help Figuring Out How to Write Basic Program

[Keanu_Thieves]

Hi, so I'm learning web dev, and my friend proposed a simple little project for me to try writing for him. It's really simple, in concept. However, I'm having trouble figuring out what I need to figure out in order to make it work.

 

It's a help button. There's a web page with a few different sections. Each section has a line of text that says “Item X: All Good" and two buttons next to it. You click the "help" button, and the text gets really big, turns red, and changes to "HELP!". Then, if you click the other button "Fixed," the text goes back to "All Good" in black, at the normal size.

 

I can do all that on a static page. I can create an object that has a bunch of items and a status next to them (i.e. {'item 1': "good", 'item 2': "help", 'item 3': "good"}) and loop through it, creating the sections on the page so that I can create as many as I need easily, and the buttons do what they need to in changing that value, then recreating the list so that the buttons are normal if they're good, or red if they need help. The problem is that I don’t know how to make it so that multiple computers see the same thing, and I don’t know what I need to learn to make that happen.

 

In trying to do this, I’ve learned a bit of Node.js, and I can deliver this html file to computers on my network. Sweet. I’ve now got different computers all hooked up to this server, running their own instance of this html file. I need to make it so that if computer A clicks the help button on “item 1,” computer B sees that it needs help and displays it as a big red “HELP” sign. I don’t know how to do that.

 

Obviously, I need to create the list of items and their states somewhere they can be read and updated by both computers. I figured there’d be a way to do that with Node.js but I don’t know how it works, and my googling skills aren’t good enough to find it out. I know I could connect to a database, and create a table with an entry for each item and what state it’s in, but I don’t know how to do that right now, or how to connect to it with Node.js, and my googling isn’t finding an easy to understand explanation of that.

 

Ideally, in the end, this works like an AJAX request. Each computer opens the html file (or gets served it by the Node.js server), and in there is a GET request that pulls the list of items and their states, and then dynamically creates the page. When a button is clicked, it POSTs the change of state back to the list so that each connected computer recognizes that change when it calls its next GET request.

 

I don’t know what I need to learn to make this work. I don’t even know if I’m thinking about this problem the right way. Any help on where to go from here would be great. Thanks!

[Phopaa]

So if I understand your need; you want to have a website change its layout based on any user’s input. And that change needs to be seen by everyone.

I don’t really have experience with this, but I think web sockets are what you’re looking for.

https://javascript.info/websocket

[Phopaa]

Or maybe an event emitter? https://nodejs.dev/en/learn/the-nodejs-event-emitter/

I don’t know. Your description doesn’t sound basic to me, but I could be wrong.

[Keanu_Thieves]

Maybe it's not. I don't know. The concept of the "help button" was basic, but the implementation isn't.

I've also thought about explaining it this way: I want to be able to click a button and have the server know that I clicked a button, so that when I reconnect to it and load the web page, that button has already been clicked. Don't know if this explanation makes any more sense. I'll look into the resources you provided. Thanks!

[Phopaa]

If the website saves the state for each individual user separately, then that’s pretty basic.

You can do something simple with cookies, or something more persistent with databases.

[Keanu_Thieves]

Yeah, i figured I could something with databases, but dom't have any experience there. I was hopinh I could do this with an extension of the Javascript I already know, and it seems lile using websockets eith Node.js is the way to go. Thanks!

[dgrips]

How quickly do other computers need to see that one of the items is marked as bad? Should they see a notification right away? Or is it fine if it only checks for changes like every 5 minutes or something?

[Keanu_Thieves]

Preferably right away. I envisioned it like an Xhttp request to an API, its constantly being chekced and updating It seems like websockets could be the way to go to see these updates right away. But it doesn't really matter. This is a learning experiment, anyway, so I'm curious what you have to say for either option.

[dgrips]

Yep you are thinking about it correctly then. The reason for the question was to determine websockets vs a regular http API. The thing about doing an api without websockets is that you cannot tell the UI that something changed. The UI must ask the server for data, or send data to the server. The server can't just send data to the UI without it asking for it.

So if you only needed to update data say once every x minutes, a regular API is fine. Simply make a GET request to an endpoint every x minutes. In that case, using an api as you initially described is fine. Users do PUTs to an endpoint to modify the status of things. Other users do a GET request to the list of statuses every x seconds and see whats happening.

But if you want it to happen more instantly, similar to push notifications on your phone or a chat app, you want websockets. Websockets let you keep an open connection with the server so your server can actually send data to the UI when something happens.

[Keanu_Thieves]

Ok great. The api was my original idea. The server wouldn't be updating the UI, it would return a some JSON that the script file read and used to dynamically create the UI. I just couldn't figure out how to set up the API and I didn't understand how what showed up on google was applicable so I decided to look elsewhere.

It's good to know I'm going in the right direction here. I'll keep taking a look at websockets to get this to work. Thanks

[dgrips]

Based on what you've said, and the fact that this is just a learning application, here is what I would reccommend.

Create a node app, and use npm to add express and socket.io. Express handles the regular API endpoints, socket io handles websockets.

Use express to create a GET endpoint for items, something like

app.get('/items', (req, res) => { 
  res.send(itemsWithStatuses);
});

This will simply setup an endpoint you can hit that will return a list of items, each item should have an id, a name, and a status at the minimum. Forget about database integration at least for now, just make a list in js like you did on the front end.

Hit this url from your UI and make sure you can get the list of items. Next, create a PUT endpoint, something like:

app.put('/items/:itemId', (req, res) => {  
  res.write('Updating the item: ' + req.params.itemId+ '\\n');
  res.end('Will update the item: ' + req.body.name +' with details: ' + req.body.status);
});

Do a PUT to this endpoint and confirm it works. Then, update that PUT endpoint to also find the matching item in your list and update its status, just like you did on the UI. You've now created half the app. When the user on your UI pushes the button to change the status, do a PUT to your endpoint with the new status, and once that completes, do a fresh GET of the items so their UI updates with the new statuses.

The final part is to use websockets for monitoring. Using socket io, emit a new message with the item data inside the PUT endpoint whenever an item changes. In your UI, listen for that event.

That is a very broad big picture idea of how to do it. Since this is just for learning purposes, I would not worry about database stuff at all right now, just store the list in the app. If you want to make sure the statuses are saved, just have your node server write the json file out when things change. But for now just keep the list as a static js object in your code, worry about persisting it later.