/    Sign up×
Bounties /Pin to ProfileBookmark

Architecture for displaying information dynamically in browser published over IP without access to that network

+ 1,500
Copy linkTweet thisAlerts:
Oct 16.2022

Im am not a web developer, so I am lacking the idea for an architecture. Here is what I want:

  • there is information published via udp multicast in some network. It changes every second or so.
  • my user computer is in some other network, which can communicate with the first network over a gateway, but the udp multicast is not forwarded
  • I’d like to have a server providing a website that shows the published information dynamically as it comes in.
  • I’d like to be able to access the website in the browser and get the information from a computer in the second network without having a multicast forward of any sort

How would I do that? How can I make the website dynamical without broadcasting/multicasting the Information in the second network. How does the receiver of the multicasted information communicate with the web server? Does a python server help me?

to post a answer
Back-endEngineerFull-stack DeveloperHTMLJavaScriptNetwork ManagementPythonSoftware Engineer

2 Replies

Copy linkTweet thisAlerts:
@joshuaburlesoOct 23.2022 — There are a few ways you can go about this, I assume you're looking for near-real-time data so I'm going to go forward with that assumption, but let me start with a tl;dr of my suggested solution at a high level: Event-driven services and Web Sockets - (FYI: Node.js is going to perform better than python here while still providing a very fast development time (not to mention you can use the same library/framework (socket.io) on the front and backend if you want to make your life even easier.)

Event Driven Service
Answering


there is information published via udp multicast in some network. It changes every second or so.

my user computer is in some other network, which can communicate with the first network over a gateway, but the udp multicast is not forwarded

I’d like to have a server providing a website that shows the published information dynamically as it comes in.


For the sake of ease (and there are workarounds, but they're hacky) I'm going to assume that you'd be able to do step 1:

1: Set up a physical server/device to receive/listen to the UDP datagrams from the first network (we'll call this N1 and the other N2 henceforth). Once this is accomplished it's trivial to create a listening service/server to both: trigger on, and utilize, the data (this can also be achieved with a cloud service; however, there are some added caveats/idiosyncrasies with the cloud approach that are easy to understand and get set up but beyond the scope of this answer). This device could live within, or outside, N1 depending on your access, permissions, and needs.

Answering

I’d like to have a server providing a website that shows the published information dynamically as it comes in.

I’d like to be able to access the website in the browser [...]


2: Create a webservice/server to:

&nbsp&nbsp&nbsp A) Broadcast, via web sockets (which use TCP and allow continuous bilateral communication with a client),the data.

&nbsp&nbsp&nbsp B) Probably provide data access layer functionality or at least cache access (you probably want to, at the very least, temporarily store messages for retrieval in the event a client's connection goes down). The design and setup of which (including the data layer itself) are beyond the scope of this answer.

&nbsp&nbsp&nbsp C) Potentially provide a front end client application: there are plenty of (extremely cheap, reliable, and easy) ways and reasons to offload this responsibility to another service, but plenty of folks have one server do both.


Responding to

...and get the information from a computer in the second network [...]


What do you mean by "get the information from a computer in the second network"? Are you just referencing getting the data from UDP datagrams or is there other data you're trying to retrieve from specific devices? If it's the latter that's another layer of complexity and what data you want is going to determine the needed architecture.

Super high-level architecture flow



Feel free to reach out with any questions.
@jokingauthor1: Your assumptions are correct. 2A: This basically means I read the multicasted data on N1 and forward it via broadcast to N2? Is there no better way to have the webserver and the webclient (browser) talk to each other. Some fancy web-thing with a cool name? 2B: What do you mean by data access layer? This sounds very broad to me. Can you specify or make an example? I only care for the latest data. I don't care about the history. 2C: "provide a front and client application" I do not want an extra application. This should run in the browser. Or is that what you mean by "application"? Last Paragraph) I'll specify: When I connect a computer which has no special software installed but a browser to my N2, I would like to be able to enter the address of the in 2 mentioned webserver and read continuously the data published as UDP multicast datagrams in N1. No extra data.Oct 27.2022
Copy linkTweet thisAlerts:
@ZalorCakeLordMar 28.2023 — You will need to set up the website you want displayed, but tools like PageKite allow for locally hosted applications to be accessed over the internet without port forwarding. I'm personally a fan of PageKite due to how cheap it is, along with being easy to use. They even let you use it for free for a time, so you can test it out, and if you're using it for noncommercial applications you can pretty much get away with not paying a dime.
×

Success!

Help @joking spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 12.1,
social: @webDeveloperHQ,
});

legal: ({
terms: of use,
privacy: policy
analytics: Fullres
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @aldoushuxley,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,
)...