Sending files to users with javascript - javascript

I searched the web to see if there was a way to send files (photos, videos, messages) to a user using an app. I couldn't find any clear examples or explanations on how to achieve it.
I have no idea, how to do this. Can anyone tell me how this can be done? Any help will be appreciated. I should also probably mention that the ultimate goal of this app is a messaging application.

Not sure what you mean by "sending files" to a user, but if you want them to download a file using javascript, you could use this excellent jQuery plugin: http://jqueryfiledownload.apphb.com/
Of course, there are many alternatives, such as creating an invisible iframe and then loading the url to the file you want your users to download into that iframe. You can read more about this over here: Download File Using Javascript/jQuery
Hope it helps!

First let me tell you that you can use Kandy js sdk, you can find about it here : https://developer.kandy.io/, I didn't test it but it looks very promising and provides many of the features you need.
In case you want to do it on your own(or you're just curious), WebSockets is the main gamer here.
Http protocol as you should know by now is a request-response protocol, the client make a request to the server and the server responds.
But sometimes we want the server to talk to the client in which we can use SSE(Server-Sent events), in other times we want to create a connection between the server and the client and we want both to be able to send to it and receive from it, that's what WebSockets are made for.
In your usecase you could have two strategies : peer-to-peer or centralized, in centralized strategy when user X wants to send something to user Y it has to first send it to the server and the server sends it to user Y.
For this you need websockets, you create a connection between user X and the server and another between the Server and user Y, you send the file from user X to the connection, the server then sends it through the other connection to user Y, user Y can send a new file to the Server so that the Server sends it to user X, and so on so goes.
From this you can conclude that Websockets has server part and client part, normally we launch websockets server that is different than the web server serving the application(both can be on the same Server computer or in different computers), if you don't want to bring your own server you can look at pusher : https://pusher.com/.
Pusher is a cloud service that provide sdks for many languages including javascript, in case you want to have your own server I can't talk about the server-side part of your problem because your question is a javascript question, for the client-part have a look at socket.io, this provides the client part as well as node server part but you can use the client part in case you don't want to use node for the server.
In case you want to build peer-to-peer connections, you can look at simple-peer.

Related

What steps do I need to take to replace my pygame client with a browser game?

I've written a game server in python which communicates to multiple pygame clients via sockets. Since it's a turn-based card game there isnt that much data flowing and it's in JSON format. Because I don't want people having to download the client I've started working on a 3D UI with three.js and it's not looking bad.
However I am currently stuck with the communication between the backend (my python game server) and the frontend (The webpage / client I am building with html, javascript and three.js). I feel like my question is already pretty specific and don't get any helpful results when looking online.
How can the webpage (client) and the python server communicate? What changes do I need to make on the python server side? And what do I need to know to implement this on the client side in javascript?
Because your client is running in a web browser, your main limitation is what the browser supports. Javascript in browsers is severely limited so that a website can't trick computers that visit the website into doing bad stuff.
So the first step is to find out "How can my Javascript web page communicate with a backend at all?" and then once you have chosen something, write the backend after that.
You have two options: HTTP requests (AJAX) or websockets.
An HTTP request is basically the same way the browser downloads the page to begin with, and the pictures on the page. The browser says to the server "hey, give me the address http://127.0.0.1:8000/play_card?card_number=3 and the server says back "the page says OK". Little does the browser know, that your server made you play card number 3 and now it's the next player's turn.
This is one-way - the client can ask for stuff, the server can't just send it. So the client has to keep asking over and over, whether anything has happened. The client might ask for address http://127.0.0.1:8000/game_status?player=5 and maybe the server says {} if nothing has changed. (Or maybe it says the entire game status and then you don't need the player number. Depends on the game.)
The other option is websockets. The browser sends a special request saying "hey please make this connection into a websocket" and the server sends a special response saying "okay, this connection is now a websocket", and then the connection stays open for as long as the client wants, and the client and server can send data at any time. It's not just a normal socket, though, because there are extra security measures to prevent the webpage from doing naughty stuff. And the connection always starts with an HTTP request and response.
In either case, note that http://127.0.0.1:8000 has to be the same website that the web page came from - websites can't just send requests to other websites (that would be naughty), so your server also has to serve the game page itself. (not difficult)
You can implement HTTP and/or websockets yourself by listening on a socket on port 8000 (or any other port), but you'll have to learn the HTTP protocol and get it right or else it won't work. It's actually not too difficult but it is work that you have to do. Or you can use a library someone else wrote, like http.server or websockets.

How to prevent end user from seeing network calls made through browser console

I need to send a particular header parameter in all ajax calls which is a very confidential information. I don't want from the end user to see any of the requests made in network tab of any browser. Is there any way to prevent it? or is it possible to make ajax calls directly from node server which doesn't go through browser?
Any call made on the client side cannot be hidden, as it's "client" side of the website. Even if you'd success to hide it in browser, any software could monitor it with tools such as network sniffers / monitors, WireShark for instance.
So the answer is no
When you go to a restaurent and order something, can the waiter subsequently make you forget your last instruction/order? The answer is NO, same as the answer to this question.
It all starts with client making a request to the server, hence client is the driving force of the whole interaction. Server just serves as per the instructions from client (and maliciously does some extra work on its own, say auditing, database update, cookie addition etc.).
Hence there is no way a 'server' can restrict client to see its own instructions.
Just simply don't send sensitive information directly via headers. Encrypt them via your client side code and add them within cookies or any other HTTP header(s).
Quoting from internet:
Client/server architecture is a producer/consumer computing
architecture where the server acts as the producer and the client as a
consumer. The server houses and provides high-end, computing-intensive
services to the client on demand. These services can include
application access, storage, file sharing, printer access and/or
direct access to the server’s raw computing power.
Client/server architecture works when the client computer sends a
resource or process request to the server over the network connection,
which is then processed and delivered to the client. A server computer
can manage several clients simultaneously, whereas one client can be
connected to several servers at a time, each providing a different set
of services. In its simplest form, the internet is also based on
client/server architecture where web servers serve many simultaneous
users with website data.
Never trust to client. Ever. Never ever. Doesn't matter what you do assume its been cracked. Hackers have all the tools and complete control of the client and all software running on it. Assume they've written their own network stack, their own TLS implementation, their own browser, their own operating system...
If you need to keep it secure, keep it on your servers. If you need to communicate 'privileged' information (assuming you remember that once you've sent it to a client they can access it) don't, tokenise it on your server and send them the token. And if you're generating tokens make sure they're very random and utterly opaque - don't encrypt anything in the token because you should assume they can crack that too, regardless how secure you think the library you are using is (assume it'll one day be cracked).
Never expose the confidential data on the client-side.
The best practice is to encrypt your confidential data on the server-side, send it to the client, and decrypt on the server end when the client sends you back.
If you don't want encryption or this confidential information is result of user actions itself then make a key-value pair in a database, where the key is something which can be exposed to the client (let's say username) and value is the confidential information. Hence now we have 1-1 mapping, so fetch this confidential information on server-side from database using the key we are getting from the frontend.
I hope this will help.
Good Luck!!

Express web sockets and a central server

I'm creating an app where the server and the clients will run on the same local network. Is it possible to use web sockets, or rather more specifically, socket.io to have one central server and many clients that are running native apps
? The way I understand socket.io to work is that the clients read the web-pages that are served from the server but what happens when your clients become tablet devices running native apps instead of web pages in a browser?
The scenario I'm working with at the minute will have one central server containing a MEAN app and the clients (iPads) will make GET requests to the data available on the server. However, I'd also like there to be real-time functionality so if someone triggers a POST request on their iPad, the server acknowledges it and displays it in the server's client-side. The iPad apps will (ideally) be running native phonegap applications rather than accessing 192.168.1.1:9000 from their browser.
Is this technically possible to connect to the socket server from the native apps or would the devices have to send POST requests to a central server that's constantly listening for new 'messages'? I'm totally new to the whole real-time stuff so I'm just trying to wrap my head around it all.
Apologies if this isn't totally clear, it's a bit hard to describe with just text but I think you get the idea?
Correct me if I am wrong.
You have multiple iPads running native app. They send a POST request to your node JS server which is running in a computer in the same local network. Whenever the server receives a request from app, you want to display that a request has been received in your computer screen.
If my assumptions about the scenario is correct, then it is fairly easy to do. Here are the steps to do it.
Create a small webpage (front end). Load socket IO in the front end page like this -
<script type="text/javascript" src="YOUR_SERVER_IP/socket.io/socket.io.js"></script>
Then connect to server using var socket = io(). This should trigger connection event in your backend.
Handle all POST request from apps normally. Nothing special. Just add a small snippet in between. socket.emit('new_request', request_data). This sends new_request event to front end.
Handle the new_request in your front end using socket.on('new_request', function(request_data) { ... });. That's it. No need to add anything to your native app for realtime update.
The second step would be a little complicated as it is necessary to make socket variable available inside all POST requests. Since you chose node.js, I don't think you need any help with that.
Not totally clear on your project, but I'll try to give you some pointers.
An effective way to send data between native apps and a server is using a REST server. REST is based on HTTP requests and allows you to modify data on the server, which can connect to your database. The data returned is typically either JSON or XML formatted. See here for a brief intro: http://www.infoq.com/articles/rest-introduction
Android/iOS/etc have built in APIs for making HTTP requests. Your native app would send a request to the server, parse the response, and update your native UI accordingly. The same server can be used from a website using jQuery ajax HTTP requests.
Express.js is more suited to serving web pages and includes things like templating. Look into "restify" (see here: mcavage.me/node-restify/) if you just want to have a REST server that handles requests. Both run on top of node.js (nodejs.org).
As far as real-time communication, if you're developing for iOS look into APNS (Apple Push Notification Service). Apple maintains a persistent connection, and by going through their servers you can easily send messages to your app. The equivalent of this on Android is GCM (Google Cloud Messaging).
You can also do sockets directly if that's easier for you. Be careful with maintaining an open socket on a mobile device though, it can be a huge battery drain. Here's a library for connecting ObjC to Socket.IO using websockets, it may be useful for you: https://github.com/pkyeck/socket.IO-objc
Hope that helps!
To answer your question, it is definitely possible. Socket.io would serve as the central server that can essentially emit messages to all of the client. You can also make Socket.io listen for the messages from any of the clients and serve the emitted message to the rest of the clients.
Here's an example of how socket.io can be used. Simply clone, npm install, and run using 'node app.js'
All you have to do is to provide a valid server address when you connect your socket from the iPad clients:
var socket = io.connect( 'http://my.external.nodejs.server' );
Let us know if you need help with actual sending/receiving of socket events.
It is possible to connect to Websockets from your apps.
If you are using PhoneGap then you need a pluging that gives support to websockets in your app (the client) and then use websocket like normal way using Javascript see this.
If your app is native iOS look into this it could help you.
The primary use of the Sockets in your case is to be a bidirectional "pipe" between an app and server. There is no need of server sending the whole web-page to the native app. All what you need is to send some data from server to the client(app) in response to POST (or GET) request and then using this data on client side to update client's UI in real-time. If you are going to use moderate amount of devices (say tens of them), you may have connected all of them to the server permanently keeping individual socket connection open for every individual link server-to-app. Thus you may deliver data and update client's state in real time.
In fact web browsers also employ sockets to communicate to web servers. However as in general case there is no control on amount of concurrent clients in Internet, for the sake of limited networking resources conservation, servers do not keep sockets open for a long time, closing it just after the web-page was sent to client (or timeout has expired). That's how HTTP protocol works on the low level. The server waiting for the HTTP clients (browsers) by listening the 80 port, responding them by sending the whole web page content, then closing the connection and keep waiting for another requests on the same port.
In your case it's basically a good idea to use socket.io as it's a uniform implementation of sockets (ok WebSockets) on both client and server side. The good starting point is here

creating our own web chat pulgin onair

Hi all,
My question was how to create a web chat plugin to be supportive on my companies web site.
1- which protocal is most suitable for this application ??
2-about the coding all client site.
3- about the coding at server side.
4- how the transmission of data takes place from client to server and vice versa.
The easiest approach (not taking into account using all ready existing plugins) would be to use Ajax and a database. This means that the protocol will be HTTP/HTTPS if you want to implement it into your company's website.
The client and server side depends on how you want the chat to function. Try building something similar to IRC with one room for example.
create a database table which will hold the chat
on the client side implement a method which will send a message with Ajax and also recieve all messages posted
for the server side all you need is something which will store the new message and provide them when requested from the client
As I said, this is just a quick example, if you want a more complex chat system you will have to do a bit of research.

Allow two clients interact without server

Is it possible to allow two clients interact directly without a server?
I am referring to websites, for example is it possible to create a chat between two clients that are on the same website using only javascript on the client-side.
If not, what's the minimum server-side to make a chat work between active clients on a website? (eg: one PHP file and no database) ?
My idea:
Storing the conversation would be easily done using localStorage on each client, the problem is how to send some data from client1 to client2 without storing anything (or at most that message) in the database. Also, note that "past" conversations should not visible, so no storage needed for that.
Note that I don't want any nodeJS or websocket solutions, I want something as simple as possible. So, what's the minimum code and files to make a chat between online users?
The WebRTC APIs will allow JavaScript to initiate a direct browser-to-browser connection, but a server is still required to serve the page and coordinate session initiation.
The APIs are still rapidly evolving and only available in bleeding-edge browsers, so it's not yet ready for real production use.
However—to be honest—for what you're trying to do, the easiest option is Node and socket.io:
var http=require('http'), express=require('express'), sio = require('socket.io')
, app=express(), srv = http.createServer(app);
app.use(express.static(__dirname+'/static'));
sio.listen(srv);
srv.listen(80);
...and now you have a working websockets server in 5 lines. Put all your client-side stuff in the static folder and you're good to go.
HTML5 has got a new Web Sockets feature
With this the server intervention is almost nullified..The server and client communicate through the new protocols
ws - Web Sockets protocol
wss - Web Sockets Secure protocol (similar to https)
Live demo
No, It's not possible. If you want a chat box, you have to store the data in the server. And what connects the clients, like display the chat texts and the same things to every client, they come from the server.. So it's not possible like that. Well, even free chat boxes put the data of each sites in their servers.
As for your idea using localStorage, maybe it's possible (But still, using the new WebSocket protocol), but it doesn't work in the time dimension, right? if another user joins, they won't see what has been sent before.

Categories