I would like to create a simple online web-application (online chess). Each piece is represented as a png pic and has script, which allows a user to move it around with a mouse (via JavaScript mouse events). Now I would like to add multiplayer, so that two different users can see the very same board and immidiately see "updates" of the possition, conducted by each other.
So the idea is that I would like to make another user see changes is style settings (possitioning) of certain elements of the web-page, conducted by a script (which can be used by both players). How can I do that?
I came across some ideas of using .json files, but I suppose that when I use json file this means that each player can see its own "version" of web-page, but gets come data about opponent from json file. However, I would like to avoid it and make users see updates as they are on the same page.
Does it have to do something with sockets and sessions?
Related
I'm making statistical reports for customers and I chose HTML solution as report template.
I have this issue where I want a user to be able to edit a text box of a html document and save it (as soon as he leave the area or when clicking save button) to annotate things like graphics for instance.
The content should be printed each time he opens back the .html file. Also, there are potentially multiple html pages inside the report (one editable box per sub html pages is enough)
Moreover, a big constraint here is that this html file is open locally and should be shared across users (I have to stick with this all-client side solution for now but I'm planning on doing it server side).
As you may have understood already I can't use localStorage solution as it is system/user dependant and data won't stick if people are sharing the report.
I'd rather go with a solution where it is possible to save it in a $UID.txt file for instance (one $UID for each sub pages people wants to annotate) and retrieve it so as long as the state of the editable content is saved at the same place in the report folder architecture, it will be opened as is by every other people when they get this edited report.
Thanks for your time !
A.
EDIT
I should have stipulated few things :
1- The report is composed of hundred of stand-alone html files. It is basic html and javascript components that are translated by a classic web browser without the need of an internet connexion or a localhost server.
2- Folder structure :
root_folder
|
|---- index.html (main page to access all sub pages)
|---- graphics
|---- graphic1.html
|---- graphic2.html
3- People need to share the report on their own and there is no user database. The only constraint is that after performing a modification on an editable content box, the text should be written somewhere in the folder structure (see 2) and retrieved automatically the next time some user (either the original editor or the next one on an other computer as long as the first editor shared the whole directory with its own edit) will open (or refresh) the html file.
I know that there are better solutions but I really have to stick with a stand-alone solution for now, hoping that there is a solution to this issue !
Thanks again for your time.
If there is no server-side component and you don't want to use the browser's (sandboxed) local storage (be that LocalStorage, IndexedDb or otherwise) then you are left with FileReader to read data and creating Blob URLs to download data.
The user experience would be something like this:
The user opens your (local) .html file
They are prompted to open the database (could be text file(s)) with a <input type="file">.
You use the FileReader api to load this file. Note: you can't use fetch or XMLHttpRequest to do this automatically.
When the user has finished entered their content, store it in a Blob object and then create a data:-link with createObjectURL. You could put that generated url in a <a href="..." download>Save</a> link.
As it would be up to your users to make sure they select the proper database file(s) and to save them under the right file name, this is not ideal. I would strongly recommend a (self-)hosted solution. That could deal with multiple concurrent users a whole lot better, too.
A server-side component doesn't have to be complex: If you start in a language you're comfortable with and use a SQLite database, you'll go very far in a less complex set-up than what you're describing.
Is a very simple page, that have some buttons redirecting to external links. That external links have to change arbitrarely when certain people decides it.
I was wondering about making a login screen in other page and depending which user logs in, set the link writting it in a txt file that would be recovered by the main page. Don't need security so i just would make the user go to the other page and login and that would change the link in a txt file hosted in the same directory that the index.html is.
The problem is that i cannot make that idea (writing a .txt in the project folder) with JavaScript (or i think so), and i don't think that using a database worth it (neither want to because i read that would have to use node.js or something like that and i really don't know those tecnologies, only some python and sql server -that is in fact not supported by my hosting service-), cause are just 3 people associated to 1 link each. I can easily make that task with python but don't know how to call it from JS and neither if Ajax request would be useful for this case.
I hope someone can help me!
edit - the changes have to apply for the page itself not in the user session, so everyone who enters see the page with the changes
edit 2 - absolutely all the info (users and links) are always the same, doesnt change so i can put it in variables, are just 4 or 5 so i can easily use an array, the only thing that i would have to register is which one to pick (since it depends on who decides it).
IT seems you want to use some sort of client side storage across different html pages - for that, you can use cookies, localSotrage or sessionStorage.
I have created a webpage but my friends or collegues always copy the source code and copy all the data easily, so is there any way to hide page source option from browser ?
As a rule, if you are putting information on another user's computer (whether because you made a document or they viewed your webpage), you really can't control what they do with it.
This is an issue that larger companies deal with often. Have you heard of DRM? It's a mechanism that companies like to try to use to control how people can connect to their services, use their content and in general, try to exert control over their data while it's on your system.
Now, a web page is a relatively simple container for holding information. You expressed an urge to prevent your friends from copying the source code. You could try to encrypt it, but if it's using local data to decrypt itself, there still isn't going to be anything that stops them from just copying what's in the View Source window and running it again (even if they can't really read it).
I'd suggest that you don't worry about it. If what you have on your page is so important that others shouldn't be able to see it, don't put it on a webpage.
Finally, Google doesn't much care that you're able to view the source to their home page. Why not? Because the value of the search engine isn't in what the home page looks like, but in the data on the back-end that you don't have direct access to. The value is in the algorithms that execute on the server when you hit that Google Search button that queries that data and returns the information you're looking for. There's very little relative value in the generated HTML that you see in the page. Take a leaf from their book and don't stress that they copy your HTML.
No , there isnt any way to do it, however you can disable right clicking in browser via javascript, but still they can use shortkeys to open developer view (in chrome F12) and see the source. You cannot hide html or javascript from client, but maybe you can make it harder to read.
No. Your HTML output is in the user's realm. Even if there was a way to disable view source in one client, a user could use a different one
Always assume that your site's HTML is fully available to end users.
Yes and no. You can definitely make HTML and JS harder to intrepret by obfuscating your code - that is, taking your code and making it look confusing. Here is a tool that can do that: http://www.colddata.com/developers/online_tools/obfuscator.shtml
However, these things all use code, and code can be decrypted through any number of methods. If you post a song to the internet, even if they cannot find the mp3, they can simply record their speakers. If you upload an image and prevent users from downloading it, they can take a screenshot or use their camera. In order for HTML and Javascript to work, it has to be intrepreted by their computer, and even if you do find a way to disable "View Source" there are others ways, like a DOM inspector (F12 in IE/Chrome, Ctrl+Shift+K in Firefox).
As a workaround, use copyright, warn your users they will be punished if they copy your code, and put watermarks, labels and logos over any mp3s or images you don't want stolen. In the end, disabling right clicking (which is also possible, see How do I disable right click on my web page? ) or disabling selection (also possible) does nothing, because there is more than one way to get your code, like searching through temporary internet files.
However, you ask "what if I want a site where my users can log in and I need security? How can I make it so nobody can see my code then? Doesn't it have to be secure and not out in the open?"
And the answer is, yes, it needs to be secure. That's what server-side languages, like PHP, are for. PHP does all the work on the server itself so the user cannot see it. PHP is like a pre-rendered language - rather than doing it in real-time, PHP does all the work beforehand so the user's computer doesn't have to, making the code safe. The code is never put onto the user's computer, because the user's computer doesn't need it. The work is done by the website itself before the page is sent. SSL is often paired with PHP to make absolutely sure that websites have not been hacked.
But HTML and Javascript have to be done in real time on the user's computer, so you cannot disable View Source because it is useless. There are many, many ways that users could get around it, even if View Source is disabled, and even if right clicking is disabled.
If your code doesn't need to be secure, however, I'd recommend you consider keeping it open source. :)
Is its possible to have a javascript file that is aware of two different HTML files? And how would I do this?
I would like to be able to have two pages. index.html and pictures.html. I have an index.js that changes the display properties of index.html (it puts data based on people into tables and makes it look nice). I would like this current index.js file also to be able to edit the pictures.html file and change information there. index.html would link to pictures.html to display pictures of a person (based on the persons name I have them saved smith1.jpg, smith2.jpg, reagan2.jpg, ect). Is there anyway that this javascript file could get DOM elements based on their id or class of the second file (pictures.html) even though it "lives in" index.html? When i say lives in it is called at the top of the index.html page.
thanks
A script can access elements on another page if it was loaded in some way of connection.
For example, if you make a popup using var popup = window.open(), the return value will contain a reference to the opened popup and this allows access to elements within the popup. E.g. popup.document.getElementById('something'). Pages loaded within frames, iframes and such have similar ways of access.
So yes, if your page loads the second page its script can work there as well. I suggest avoiding this beyond opening and closing popups from a script though; a script should stay inside the box of its page and if it needs to do larger operations on another page, that usually means that you need to change your code architecture a bit.
You'll need to explore server-side programming to accomplish your goal.
http://en.wikipedia.org/wiki/Server-side_scripting
...Or you could write a client-side application in which "pages" are separate views of one actual page or are generated from backing data structures. If you want persistance of what is created/edited, you'll still need server-side programming.
You can use the html5 (group of technologies) postmessage api as well.. This allows you to send messages to another page, and in that page you define an event handler that knows how to handle the message.
This also works across domains.
Here is a blog with an example I just randomly found via google:
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
Not possible on the client side if editing the actual HTML file is your goal. If getting pictures to show up depending on stuff a user does on another page is all you care about then there are lots of options.
You can pass small sets of data like stuff the user entered into tables via cookies for accessing the right sets of image files in a pre-established scheme. This would actually persist until a user cleared out cookies.
You could wrap both pages in same-domain iframe elements with the parent element containing just the JS. This would allow you to persist data between pages and react to iframe load events but like everything in client-side JS, it's all gone when you reload the page.
Newer browsers have working file access objects that aren't total security nightmares. These are new and non-standard enough that it would take some doing to make it work for multiple browsers. This could be used to save files containing info that the user would probably have to be prompted to upload when they return to the site.
If the data's not sensitive you could get creative and use another service to stash collections of data. Use a twitter API to tweet data to some publicly visible page of a twitter account (check the Terms of Service if you're doing anything more than an isolated class project here). Then do an Ajax get request on whatever URL it's publicly visible at and parse the HTML for your twitter data.
Other stuff I'd look into: dataURIs, html5 local storage.
Note: None of these are approaches I would seriously consider for a professional site where the data was expected to be persistent or in any way secure regardless of where a user accesses it from.
While the subject could sound like I'm looking to do something shifty, I'm not; I maintain an internal web site used by several hundred phone operators, and would like to add the following functionality:
I would like to add a control in the header of all of the web pages that would capture an image of the entire desktop and save the image as a file to a shared network drive to assist in troubleshooting production problems. This screen capture app would be called by JavaScript.
I've researched many threads on this site pertaining to capturing screenshots, and all of the offered applications don't meet my need in one of two ways:
The screen capture application has a GUI that pops up and the user sizes some sort of capture control or interacts with a window to do the capture. The users are not very computer literate, and could not be trusted with using a "pop-up" application correctly-- and it would be impossible to enforce them to save the image file with a common file naming convention. I would like the user to press a single UI control on a web site and have JavaScript make the calls to obtain a screen shot and save the image without any further user interaction.
Some automated applications save the HTML by re-posting to the site and "re-assembles" the individual HTML elements into an image. This will not work as the input data that the operator has typed in needs to be in the image, the site uses AJAX so the visual "state" of the web page will be different from one re-obtained from a POST, and some applications have had (active directory) security issues when trying to interact with our (secured) web sites.
If there isn't an application that will meet this need, I'll just roll my own control in C#. But I'd rather obtain a third-party control. so I don't have to support my own control for life. :-)
Javascript does not provide access to the local system for this functionality due to the security risk.
I believe the only way of doing this on a web page is possibly via an active X control or Java applet (similar to screencast-o-matic) but even then security may be an issue.
I also image unless your own c# control is in a windows forms application it would not work as c# controls that are part of a web site will be run on the server and not the client.
Hope this is of some help.
Well to do that you'll need something to interact with the desktop which can't be done by javascript alone.
You'll need to have an Active X Object to be able to interact with the client's machine. Once you have that, it is easy to just have the object take a picture and save it to the directory.
I believe I have the C# code to take a screen shot. If you want I'll post it.
Some alternatives to ActiveX / Java:
You can create a flash program to do the screen capture. I haven't done this and don't know the details, but I'm fairly sure it can be done.
You can setup a custom protocol for screen capture (eg. screencapture:// ), and in your header include a
Screen Capture
link. You'll need to find a gui-less screen capture program to do the actual capturing and set it up as the handler for that custom protocol.
Did it once. I couldn't find a direct way so did it rendering HTML to canvas, then canvas to image using html2canvas. Canvas to image is a much more common theme so you'll find many tutorials about.
HTML to Canvas
Canvas to image
NOTE: rendering from HTML to canvas may leave some elements behind, like SVG. But overall it did as much as expected.
PSR (problem step recorder) is a great tool for debugging purposes on client machines and it is available on all windows machines by default.
Try below and see if it works for you.
Go to Start->Run and type psr.exe (or just psr) this should open the recorder. This is fairly easy to use, so even users/clients can use it. If it works then try below steps to setup.
Step 1: Register PSR protocol. This tells the browser what to do when a link on the page is referring to PSR protocol (which we will use to open this recorder).
- Create registry values as below
HKEY_CLASSES_ROOT/
PSR/
(Default) "URL:PSR Protocol"
URL Protocol ""
shell/
open/
command/
(Default) psr.exe
If you are not comfortable with creating registry values, download and double click this file.
Use this link for more information.
Step 2: Now create an example html file to test launching PSR.
Save the below code to index.html file and open it.
<html>
<head>
<head>
</head>
<body>
Start Recording
</body>
</head>
</html>
Or download this file and open it.
This should open your PSR. It is easy to use and can record all the information you need for debugging.