Right way to implement file upload for WebSocket chat application - javascript

I have a chat application, backend is written with help of Socket.io (based on Node.js server), and client is pure vanilla JavaScript, with JWT token generation from PHP, chat loads all data on load from REST API written on PHP also, and i am stuck with file upload.
I have two variants, first is REST API, just send data with help of XMLHTTPRequest, and i already implemented this, it's a simple FormData POST to REST,
it works fine, but i am not sure of "rightness" of this solution, because for now REST have only GET routes for simple users (there is admin routes also) and by design of my project, it's set to get data for user chat, and its looks not right for me to make POST route for them, but what worries me most is what i already have another mechanism/solution where user sending their messages, it is socket.io-node.js server, with all permission checks (does this user have permission to join this chat, send information to it, and so on), so REST will take part of Socket.io task. Also beside role distribution problem, REST solution is also a logic duplication, where all permission checks written on Node.js side, must be duplicated on PHP side. As a result i already started to rewrite file sending to Node.js via Socket.io. Socket.io from version 1 is accepting binary data, so it's was pretty easy, i just sending a File and Node.js gets Buffer, which is easily stored to filesystem like this
require('fs').writeFileSync(filePath, Buffer);
but here i have problem what i don't have upload progress, and most importantly despite all projects part are now perfectly distributed by their roles (client is sending data to socket.io, and reads from rest), and i have no role duplication, i am still not 100% sure i solved this problem right.
So question is, how and where would you send your files, in case of your chat application.

Related

what is the different between building server side VS API

so currently i am studying web development but the course was a little bit confusing, the teacher starts explain promise object and fetch then axios, after that he starts to talk about the "express" package to build server side, and am asking myself what is the different between using API objects & building server side using express?
Both of those things work together to create a website/app. axios, etc runs in the browser (client-side code), and is used to send requests to the server (express/other server-side code), allowing the server to fetch data, or modify the database, and return a response back to the browser side code, which continues operating from there.
imagine, client-side code does not have access to your server's database, as your database is on the server, and the browser is on the end user's computer. The two sets of code send messages back and forth to each other to create an app that has a centrally stored data store that is "shared" between users.

XMLHttpRequest POST - Issues with large data

I am trying to create an input form that allows for multiple files to be uploaded to my server. The way I currently have the system set up is shown in this diagram:
Essentially:
The website is running locally on each client's machine. The website makes XMLHttpRequests to the node.js webhost. If the request requires data from the Teradata database, it will in turn make a request to a local server though the node module http. The local server will then send back the data requested, then the webhost will pass that data to the client website.
The issue that am currently running into is when trying to make a POST XMLHttpRequest to the Webhost from the Website. When I do a small amount of data, it works without issue. But when I try to pass a larger amount of data such as the binary of an image in string form, it will either end the connection or somehow lose the end of the request message, I don't really know how to tell which is going on. Since I want to be able to push the image from the Website all the way to the Local Server and insert it into the database, I need to find out how to make sure I get all of it passed to the webhost correctly. I ran into this problem going the other direction, from the Local Server to the Website, but I fixed that by "chunking" the data and sending it in smaller packages. I can't seem to find a way to do that with XMLHttpRequests.
A few things to note: I cannot change the type of database, I cannot change the overall structure of the network.
If anyone has any insights in either how to troubleshoot this or suggestions for methods other than XMLHttpRequest for being able to send larger amounts of data, I would be much appreciative.

What is the best way to update all clients when Flask database changes without polling?

Currently I have a Flask server that runs a small web frontend as well as a command line interface to that same server. The basic idea looks like this:
<Top section: allows file upload>
* list of files from database
<Second section: allows file manipulation/ upload>
* list of files from database
<Third section: Not files, but still allows for database changes>
* list of things made from database
Now this works well from the front end, but currently if the CLI or another client makes a change to the database, it doesn't update other clients. I have it somewhat working with JS polling and rewriting the list of files every 10s, but that seems both inefficient and also would look very messy if I had to do it for every section. I saw websockets mentioned in various forums, but I've never used them and am unsure if it would be a pain to add. I'm not trying to rewrite the whole thing for a single feature.
Final takeaway: How to update all clients better than polling/ how to do polling efficiently?
Yes you are correct. You need sockets. There are bunch of articles over the internet but I would like to give a summary and try to explain why sockets will be the best fit to your requirements.
Sockets are way of achieving two way communication between client and server without the need of polling.
There is a package called Flask-SocketIO
Flask-SocketIO gives Flask applications access to low latency
bi-directional communications between the clients and the server.
Then for the scenario where you would like to send changes to all the connected client when one client does some work to your database or something similar, you will need to use broadcasting. When a message is sent with the broadcast option enabled, all clients connected to the namespace receive it, including the sender. Here you can find details of the broadcasting using Flask-SocketIO.

Write PDF files from Web-App to USB-Stick

I am concerned with the feasibility of this:
On a pre-configured machine I will have a Web-Application pre-installed, next to an Apache-Suite. So client and server are the same!
In this Web-Application Users can drag and drop PDF-Files to an USB-Icon.
Then the Web-App should write the dropped PDF to an attached USB-Stick.
I have never done something like this (writing to USB), so I am fairly insecure.
And I am well aware of the browser-restrictions concerning JavaScript and Filesystem-Access, but...
after researching a bit I found out, that there might be some possible and
relevant (I'm a Web-Platform-Guy) solutions to this:
Make a "Chrome App" with USB-Permission (does this really work?)
Use PHP to find the USB and then write to it (how would that work under Windows?)
Use some Flash as middle man (not preferred)
Now I'd like to know:
Has anyone some good experience with before mentioned possibilities?
Has anybody ever done something similar? Did it work? Which path did you choose?
How would I know which drive the USB is mounted, and how would I get sure?
What other possible solutions to this problem are there?
You have a website ('client-side' user interface) and a back-end server ('server-side') running on the same machine. This gives you 2 options:
Client-side: Download a file through the browser via HTTP GET and let the user choose where they save it.
Server-side: Build your USB interactions into the back-end (Node.js) code, as #mcgraphix suggests.
Interacting with the USB on the server-side provides the most flexibility. Furthermore, there are a number of libraries that you can leverage. Head to npmjs.org and consider, among others, the following Node.js server-side packages:
usb-detection
usb
With the server-side approach, initiate a Webservice request when the user completes the drag & drop action on the client, and implement the USB interaction within the server (Express.js or similar) method which services the request.
If the letter of the stick is known then writing a file from PHP will be simple
file_put_contents( 'E:\\folder\\file.pdf', $data );
Update
You can read a list of drives into a dropdown and allow a user to select a default drive to write to
https://stackoverflow.com/a/8210132/696535
Your question is more an architecture question than a code specific question.
Your web app (if you insist on a web app) should have two major components, a server side component that can be given arbitrary commands, and a client side component (javascript using XMLHttpRequest) that can make requests to the server side component to execute said arbitrary commands.
So your server side component, the component that serves your web page should have some server side code that can write your pdf to the file system, it should probably generate the pdf file as well rather than doing that on the web browser.
Which technology you use is up to you, whether that's PHP, .Net, Node.js etc...
The general gist is you want a server side framework that deals with HTTP requests, in your case probably a post request from the client side containing the encoded pdf, and responds accordingly. Bind a particular http route to trigger your save logic.
Your http post request to the server will contain your payload which is the pdf file to a particular path, e.g. http://localhost/savepdf that whichever technology stack http listens to (you'll need to configure that)
Your server side component should read the incoming data, decode it as appropriate then make a file system request to write the received payload to disk.

Advice on building a server connected android app

I'm creating a personal project, an Android application, where user sign ins via a server are essentially. Also users will be able to share important "updates" in both a data stream that all users can have access to, and potentially down the line a data stream that will be specific to local users.
Unfortunately I have basically no idea of how to implement the server for this application. I'm confident that I'll be able to create a solution though, I just need to be pointed in the right direction. Are there any existing servers/api's that I could access that will allow me to handle my "connected" tasks? If I were to make a server myself for this application where should I start?
If you have absolutely no experience with server side coding, you should start with PHP and MySQL to create a simple API for your app.
For getting started download the XAMPP bundle that has everything you need.
SQL and PHP are fairly easy for beginners. On the client(Android) side use Volley as it is simple to understand.
However if you want to get started with Node.js, your server can be up in a few minutes with express.js

Categories

Resources