Add support for connecting to browsers via XHR

[rigdern]

Some HTML-based app environments (e.g. Windows Web Apps) do not support
cross-domain script inclusion but they do support cross-domain XHRs. This
change builds support into LightTable to be able to connect to such app
environments to evaluate HTML, JavaScript, and CSS.

[rigdern]

This change is for use in conjunction with LightTable/Javascript#9

[rigdern]

@joshuafcole @cldwalker @one-more-minute Anything I can do to help get these pull requests accepted?

[MikeInnes]

I have no issue with this if it works. If no one objects I'll merge in a few days.

[joshuafcole]

Both this and Javascript#9 look fine to me, but I haven't had a chance to pull them locally and test them yet. I can give that a go tonight after work if nobody else has had the time to do so.

[cldwalker]

Whomever merges please do QA. I've held off on this for that reason (no Windows box). If none of us have one, we should ping kenny-evitt.

As for LightTable/Javascript#9, do we want to introduce a new connection? I'm hesitant to which is why I've held off on merging LightTable/Clojure#29.

[rigdern]

I understand the concern over adding a new connection type. As long as this pull request is accepted, I can do LightTable/Javascript#9 as an external plugin.

[joshuafcole]

I'll test it on linux shortly to verify basic functionality. The code itself looks fine. I would appreciate if @kenny-evitt could take the time to test this under similar conditions to those reported, though I don't know how involved that would be to reproduce.

[rigdern]

Here are the steps to test it. You need Windows 8 or higher and a version of Visual Studio that can create Windows Store Apps in JavaScript. Below are the specifics. I'll assume you're using Windows 8.1 because it's the latest.

Requirements

• Windows 8.1
• Visual Studio Express 2013 for Windows

Steps

• In Visual Studio, create a new project (File -> New -> Project)
• In the "New Project" window, choose the "Blank App" JavaScript Windows Store template (Templates -> JavaScript -> Store Apps -> Blank App (Windows))
  
• In 'default.html', paste the following LightTable connection string (you just need to specify the appropriate port in the data-xhr-src attribute):

<script id='lt_ws' data-xhr-src='http://localhost:51595/socket.io/lighttable/ws.js'>var r=new XMLHttpRequest(); r.onreadystatechange=function(){if(r.readyState===4){r.onreadystatechange=null; var s=document.createElement('script'); s.textContent=r.responseText; document.head.appendChild(s); }}; r.open('get',document.getElementById('lt_ws').getAttribute('data-xhr-src'),true); r.send();</script>

• Run the app (Debug -> Start Debugging or hit F5 on the keyboard).
• In LightTable, create a JavaScript file and try to eval some code with ctrl+enter. You can verify that it's really running in the context of your app by changing the app's background color:

document.body.style.backgroundColor = "blue";

@kenny-evitt let me know how those instructions work for you.

[kenny-evitt]

@rigdern I don't have access to a computer running Windows 8. Is there some other way I can test this? It doesn't seem like it supports browsers, generally, if it requires the ability to make cross-domain XHRs.

[rigdern]

Correct, it requires an environment that supports cross-domain XHRs.

It looks like Safari supports this as long as you are visiting a local file (i.e. a file:// URL).

[rigdern]

@joshuafcole @kenny-evitt Let me know if there's anything else I can help with. As I stated above, I think you should be able to test the cross-domain XHRs in Safari as long as you are visiting a file:// URL.

[joshuafcole]

Hey Adam,
Sorry for the delayed response.
After investigating this, I think it might be best to extract this into a
plugin. Since it targets specific use cases, it may be confusing to users
to see the option in all cases. By making it a plugin, users will opt into
if if the have they are working in an environment where it's applicable. If
you need any help doing so, just let me know. Additionally, I'll leave this
open in case any of the other team members or community disagree so we can
discuss it further.

Cheers,
Josh

On Thu, Dec 18, 2014 at 10:46 AM, Adam Comella notifications@github.com
wrote:

@joshuafcole https://github.com/joshuafcole @kenny-evitt
https://github.com/kenny-evitt Let me know if there's anything else I
can help with. As I stated above, I think you should be able to test the
cross-domain XHRs in Safari as long as you are visiting a file:// URL.

—
Reply to this email directly or view it on GitHub
#1507 (comment)
.

Screw the environment. Please print this email immediately. And then burn
it.

[rigdern]

LightTable/Javascript#9 affects the UI and I agree that could be done as a plugin. This PR (#1507) doesn't affect the UI and I want to double check that you think it should be done in a plugin too.

This PR updates the websocket code to support downloading code via XHR (currently it only downloads it via script tags). To do this as a plugin, I would probably have to copy and paste my version of LightTable's ws.js into the plugin.

To be clear, you want me to do both LightTable/Javascript#9 and #1507 in a plugin?

[joshuafcole]

Hmm, fair enough.
I'm not able to get this working with either chromium (even with --disable-web-security) or FF though, and I'm using Ubuntu, so I don't have access to Safari.

Can somebody with a mac please confirm this? The code looks fine, but I'd rather see it in action before merging.

This is the (expected) cors error I get with chromium and FF:

XMLHttpRequest cannot load http://localhost:60280/socket.io/lighttable/ws.js. Origin file:// is not allowed by Access-Control-Allow-Origin.: file:///home/josh/tmp/test.html

[rigdern]

Does @cldwalker or @one-more-minute have a Mac to test on?

You should be able to test on a Mac as described in #1507 (comment).

[rigdern]

@joshuafcole Do you need help with the testing? I can verify that the new functionality works on an additional Windows machine and you can verify that there's no regression in the existing functionality on Ubuntu.