Inside a Vue component, I run multiple instances of Etherpad editor which are embedded in iframes. Below is an example of that component-
Etherpad.vue (A page component)
<div>
<iframe src="https://mydomain.in/p/1505-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
<iframe src="https://mydomain.in/p/1506-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
<iframe src="https://mydomain.in/p/1507-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
</div>
Now, I prepare a URL for this page suppose its, https://mydomain.in/etherpad/collaborate and share it with others to collaborate on this page. Each user who has access to this URL can type inside these three editors.
The issue
If only a single user is collaborating on this page, things are fine. As soon as other users started working on it, each user is having the following popup of disconnection-
And once a user clicks force reconnects, it appears on the other user's side which is resultant to allow only one user to type at a time.
Environment
vue: 2.6.11
node : 13.14.0"
Etherpad version: 1.8.16,
Web server: Nginx
Browser: Chrome
Authentication: Custom JWT verification (can see in iframe URLs)
Etherpad database type: postgress (database is hosted on a separate machine)
Etherpad client and Vue are being served on the same domain to avoid the cross-domain
cookies, and cross-domain embedding issues.
I am serving Etherpad behind Nginx reverse proxy. On the root
path ('/') I serve the Vue application and on /p/ path requests,
I pass them to the Etherpad node server.
Things I tried to debug
Tested locally, one user in Firefox and another in Chrome, working fine.
Tested with two users with different IP addresses, giving a disconnection popup.
Some answers say to look into the settings to alter the connection limit but didn't mention which settings.
For some users, this issue occurs when pasting a long text but for me, it's happening even when typing a single sentence.
Any help to suggest where to debug or which settings to change even in code or at server configuration would be great.
Related
I am working on a website using VueJS and just figured out how to do url parameters, which works well on my local machine. I can navigate to a page, and copy the full link including parameters in my browser and the page loads the same way.
Example: I type localhost:8080 to load the index site, navigate to localhost:8080/param1/param2 to go to another site, everything works fine. I can even type in localhost:8080/param1/param2 DIRECTLY (without going to index page first) and it works too.
However, after a build and upload to my web hosting provider, I can not type in the url with parameters DIRECTLY, it only works when navigating from index page.
I can the following error:
404 Error
I have almost no experience with routing and web hosting and even after extensive research could not find a solution online. Any help would be greatly appreciated.
Additional information based on comments I've received:
Web host:
I have a login to Plesk where I can manage my settings. There I have "Apache & nginx" settings which look like this:
Apache Settings
nginx Settings
This is due to the fact that SPA's do not have different HTML pages for different URL's like conventional pages. So, you have to either redirect all the requests to the index.html page in the server settings or set the history property to this history: createWebHashHistory().
Let me know if this works.
P.S: Sorry I don't know how to configure the settings for this in Apache or Nginx
I have six devices on/above my desk:
A 4k TV
An Ultrawide monitor
Two laptop computers
An iPad
An android phone
All are connected to the internet and browsing mydomain.org/page, an html page that I am editing using one of the laptops, which has a full page of code. When I press a button on my Wacom tablet that I rerouted through Wacom smart actions to run a script, my code is uploaded over FTP to my server. Right now, I have to reload every page on every device to see the updated results. I want to make a javascript to run on my site that has a LiveLoad() global function. When I execute this function from the DevTools command line, the script stores a cookie that the device is a debug device.
All pages with the script will now enable a small icon over the page that when set to 'live,' the script will open a connection through secure web sockets with an update server that stores up to 10 connections (perhaps only from approved IPs, so that only I can use this on my live site), each registered to the page they are browsing. When I update mydomain.org/page or other pages, my script securely opens a connection and POSTs a secret code to the update server, telling it to send a message over web sockets to all connected debug devices with that page open. On fast internet, this truly will be the ultimate website building setup if I can just overcome this design hurdle.
What I don't want:
Anything more than a single php script for the server-side implementation. Shared hosting. No root access. No Node. No fancy crap. Single PHP files are the only option.
Bloated javascript addons. Bare minimum code for receiving a single type of message (an update is needed) is all I need. Perhaps later I can make it more robust with a second type of update (a hard update) where a php script processes all the fonts, scripts, images etc on a page and adds a random query string after them to force a hard-reload of all page resources.
How can I achieve this? Where to start with php web sockets? The internet has proven to be a cynical wasteland of bloated php libraries that require installation in a node enviornment to freelancers struggling to make scripts off of the 2013 websockets API documentation, with no good, simple solutions around.
I'm trying to make desktop application that receives messages from a page running in the browser. The desktop application can be written in any way, i just need to be able to talk to it from the browser. The web site is written in angular. I don't care about the response from the desktop application or need to communicate back to the browser in any way. Serving the website over https is causing issues though (but a requirement), and I was wondering what a good way around those would be.
The ideal solution was to make the app a web server and just have the website post to localhost:PORT and the server would get the request and do what it needed to do. however, since the website is served over https, it blocks the http request to localhost due to mixed content rules.
i tried submitting a form on the page and having the target be a hidden iframe, but that also gets blocked due to it not being https.
I tried changing the target to be _blank, and that "worked" but it opens a new tab with the response in it, which would be really annoying while you're using the website (it's supposed to be in the background). I set up the response to have a window.close in it, but the window still flickers for a second each time and it's something i would like to avoid.
I tried making a self signed certificate for the desktop application's server but the browser blocks that until you accept it for the first time, and I don't want people to have to go to "https://localhost:1234" in their browser and accept the insecure. I'm imagining getting a valid certificate for a localserver isn't possible too.
Is there any to accomplish this? Thanks
You can redirect the browser to http://localhost:PORT (e.g. using status code 302 or window.location in JS) and pass data to desktop app in query string. That should execute in browser without warning. Then you can return some html back from desktop app to browser. If your data for desktop app are too big to encode in query string, you can pass just url in query string where desktop app can download the data.
I wrote a simple web server that takes the public link to a google document containing image urls and names and outputs a print-friendly HTML photo directory with its contents.
I created it for a volunteer organization that I will no longer be able to stay involved in. I need to pass on the ability to generate that directory to my successor.
I'm not confident that I can trust myself to maintain that web application for the long term the organization needs. I'm hoping that instead I can change it to a self contained program, that members of the org could email around to whoever needed to generate the directory.
My first thought was to make a .html file the could open in a browser but I can't download the CSV data from google with Ajax, because it is cross domain. After googling there doesn't seem to be a way around this.
Is there a straightforward framework? I would guess I could do it with Adobe AIR, but I'd prefer something that simply removed the cross domain security feature.
I could take the time to embed a UIWebView into a Mac app, but since I want to write the app primarily in HTML, I'd have to create a bridge to let the web view make a cross domain request anyway right? Also it's not cross platform.
Any other ideas? How can I package my app as a desktop application instead of a web service?
You can get around the cross domain XHR using flash. CrossXhr can do it from apps served by regular http servers. I've never tried it with a static, file-served webapp. Follow the instructions here:
http://code.google.com/p/crossxhr/wiki/CrossXhr
I'm writing a desktop application to interact with facebook by using an embedded browser which is running HTML \ javascript from local files.
I was able to use the login dialog to retrieve a token (using the method described in the facebook documentation for desktop applications), but i'm still failing call basic SDK functions, such as FB.init() and FB.getLoginStatus().
When executing FB.init():
FB.init({
appId: '120260327220',
status: true, // check login status
oauth: true // enable OAuth 2.0
});
I get the HTTP response (through HTTP sniffer):
<span>Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.</span>
And when executing FB.getLoginStatus():
FB.getLoginStatus(function (response) {
if (response.authResponse) {
alert("logged in and connected user, someone you know");
} else {
alert("no user session available, someone you dont know");
}
});
i get nothing!
The application is completely client based, meaning i have no server side, thus there's no URL to register the facebook application with. Running on IE.
Does anyone know if and how i can use the facebook javascript SDK from a local javascript file (for desktop application)?
EDIT: configuring the application URL to be http://localhost is not a valid option, since eventually this script should be able to run on any machine, whether localhost is configured or not.
Thanks.
Related:
The JS SDK is designed to be used on websites (per definition served and accessible over http or https) and we do not plan to support the use of file: or any other protocols.
This is consistent with plugins in general, where http/https URIs are usable as identifiers (open graph amongst others), but where file:// URIs are not.
You can try initializing the SDK inside a web accessible document including using an iframe - note then that you will have to add logic to ensure correct resizing.
As an answer to a Facebook bug report.
As you mentioned that you have an embedded browser within your Desktop app so in this case what you can do is host the app's page that has facebook related functionality over the web and pull this same page's url inside your embedded browser. This way you will be able to provide a valid domain in app's settings and not localhost. Also you can make valid calls to facebook APIs from your page and your Desktop app can then make use of all these facebook related data as they are being pulled onto your embedded browser.
In a nutshell your Desktop app will be much like the Facebook's canvas where the app's page is pulled and displayed inside the canvas. However in your case you will be having a complete control of how, when, where and which parts of the page gets displayed and moreover a properly glued and well structured UI will make the external page and Desktop app blend together and users will never come to know the difference.
Since I got no acceptable answer here are my realizations and what I eneded up doing::
There's no way to use the Facebook SDK on local page due to cross domain ajax issues.
The way to work around it is using JSONP ajax calls to Facebook's graph API (JSONP is allowed for cross domain).
The login process is done by navigation (in a new window) to the login page, with specific URL parameters to set the page's attributes.
If you are using PhoneGap 1.0 and Xcode 4, start by following these instructions: http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-phonegap
My installation looks like: http://cl.ly/AHQ1
Be sure to move the ChildBrowser.js file out of the plugins folder and into the root of your www folder. Also be sure to link to that ChildBrowser.js in your index.html file.
Then follow these 3 steps, http://collingo.com/2011/08/18/installing-childbrowser-ios-phonegap-plugin-in-xcode-4/
Lastly, update your PhoneGap.plist file as mentioned in this post: http://wiki.phonegap.com/w/page/43708792/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20iOS, mine looks like: http://cl.ly/AHAH
What is the Application URL that you have set on the application's Developer page? I'm just guessing based on the FB.init() error message that you need the to set the URL to be "http://localhost/start page name". When debugging our application we run it locally and have the URL of the application set this way.