Error in creating a websocket connection within a hybrid app - javascript

I have an app that uses socket.io (1.4.5) to establish a websocket connection. The app is available via a web URL and also as a packaged Android app using Trigger.io.
The Android app is unable to connect to my websocket server. This is the error I receive
WebSocket connection to 'wss://myserver.com/socket.io/?user_id=xxx&session_token=xxx&EIO=3&transport=websocket' failed: Unspecified reason
The line it references in the socket.io client is within the doOpen() method.
this.ws = BrowserWebSocket ? new WebSocket(uri) : new WebSocket(uri, protocols, opts);
I haven't made any changes to the websocket server as far as I'm aware. And the website itself is running fine and able to connect to the websocket server.
I've inspected the Trigger.io Android app using Chrome Devtools and when I manually try to connect to my websocket server I get the same error. The following line of code does not work.
new WebSocket("wss://myserver.com/socket.io/?user_id=xxx&session_token=xxx&EIO=3&transport=websocket")
Running the same line of code in the Chrome browser works just fine.
Also, the error response seems too fast. It looks like the webview within the hybrid app isn't even trying to connect. The response is the same whether the websocket server is running or not. Typing in a nonsense URL gives the same error.
new WebSocket("wss://blahblah"); //gives the same error and response immediately
The Chrome version within the Trigger app is 55.0.2883.91.
EDIT : I tested the websocket connection on the mobile browser of the device running the app, just to make sure it's not a proxy / connection issue. And that worked fine.

The solution to this is to use the httpd module in Trigger.
Setting up the httpd server makes the app be served with a http://localhost URL instead of the contents: or file: protocol. With this in place, whatever Chrome CSP issue was blocking the connection is lifted.
Module docs : https://trigger.io/modules/httpd/current/

Related

Multiple localhost domain with expo / emul

I'm making a React native app with expo and android emulator. I need to fetch my local api.
I have already succeed with an api running with docker on localhost:8989 (i had to put the local expo ip http://10.0.2.2 to reach localhost)
But here, i have site1.local , site2.local and api.local running on an apache server on localhost listening port80.
My three site are working with laravel and for further option:
http://localhost => 404 (only localhost/oauth/token reachable (because of passport)
http://site1.local ; http://site2.local ; http://api.local => all route reachables
How can i fetch theses site with expo ? If i put http://10.0.2.2/oauth/token it's working, but any other not working (404 error)
I'm kinda lost :(
If someone encounters this problem, this worked for me.
Use ngrok: ./ngrok http http://api.local, this makes a tunnel and your local site will be reachable via https.
U will obtain an address like: https://2186-2a06-4d12-1a7f.ngrok.io
The trick was to use this address in my .env by overwriting API_DOMAIN and the magic appeared in my expo project using this address, I'm able to make some request to my API.

Error from p5.sound in browser when it is hosted via HTTP?

I use p5.js in my school project and it does not work in Google Chrome(also Microsoft Edge, idk about Opera), with JavaScript activated, but only when its on hosting. When I got it on Localhost it works just fine. In Mozilla it works in both situations. Iam confused.
http://klauzury2c2021.8u.cz/
you can find all of the code on the site
It looks like you are are hitting this issue with the p5.Sound library that prevents it from working correctly when loaded over http. Since you're hosting your site on a public server the best solution would be to enable HTTPS for your server and have HTTP requests redirect to the HTTPS url. However if you are unable to do this you can make this work with an AudioWorklet polyfill. Just add the following line to the head of your html file:
<script src="https://unpkg.com/#free-side/audioworklet-polyfill/dist/audioworklet-polyfill.js" type="text/javascript"></script>
Updated ↑ Old Answer ↓
I originally misread your question and though you were specifically struggling with testing on localhost. Here are instructions for cases where you are testing with a local server:
Apparently people have had success working around the issue using a tool called ngrok. Which allows you to expose a local service via a public HTTPS endpoint. So if you're running a local HTTP server on port 3000 you would open a terminal and run ngrok http 3000 (having followed the basic installation and setup steps for ngrok). Nrok will assign you a public URL, which it will display in a message to the terminal like this:
Forwarding https://<UNIQUE_ID_HERE>.ngrok.io -> http://localhost:3000
Then instead of accessing your sketch page via http://localhost:3000/ you can access it via https://<UNIQUE_ID_HERE>.ngrok.io/ and that should work around this p5.sound issue.

Socket.io can't connect on mobile browser even with wifi on

to try socket.io, I coded a simple chat which works well on every pc. However, on mobile (I tried on my iphone 4S and an Ipad) even if the html is running well, it looks like the connect line let socket = io(); doesn't work, so nothing is working from socket.io. I saw online that it was working on wifi but it doesn't work either. I also saw that running the server on port 433 could help but socket io still doesn't connect(it works well for everyone who is on PC).
Any idea why and how to correct that ? I do want to target mobile browser for my app.
Here's my client code : [deleted]
EDIT : it does the same on android, while PC does an awesome job at running it.
EDIT2 : I just debbugged on mobile with android, it throws a "Uncaught SyntaxError: Unexpected identifier" on the "let socket = io();" line
Why ?
Going to need a lot more information than that to give a useful response.
A snippet of your socket io server call would suffice.
From what I can gather I believe that you must be running your socket server locally on your machine not using a web server. So I believe you will either need to open up the port you're attempting to connect to with your mobile device, or make sure you're targeting the correct internal IP address of the machine you are running the socket server from.

Application cache not working when server unavailable: Applicaion Cache Error event: Manifest fetch failed

I'm working on a little project to create an offline application using HTML5, IndexedDB and Angular. I've been testing the application cache functionality by toggling air plane mode on my laptop and so far so good.
However, my requirements are that the application should be availble when the user is not connected to the VPN instead of not connected to the internet. I'm testing this by starting/stopping the applciation hosted in IIS, so I might still have a connection to the internet but not to the server that hosts the application. In this scenario I always get the error (in Chrome) "Applicaion Cache Error event: Manifest fetch failed (6)". FireFox doesn't give an error and IE just says Fatal AppCache Error.
I know why I get the error (= the manifest file cannot be fetched from the server), I'm just wondering if there is anything I can do to avoid the error? I've been looking at ways to override or prevent the swapcache/update events but no luck. Any idea if this can be fixed and how?

Does chrome debug tools "port forwarding" work on native apps as well as webview apps?

I'm using Chrome port forwarding on my Cordova-based hybrid app, and it works fine for AJAX calls made from HTML/Javascript. As expected, AJAX calls to http://localhost:8080 forward to my desktop where my development server is running Apache on port 80. See image below.
However, my app also makes an HTTP request in native code (I'm registering for GCM messages). As far as I can tell, the port forwarding does not work for that request.
I'm using standard Java (no special HTTP client classes or anything):
URLConnection yc = registration_url.openConnection();
BufferedReader in = new BufferedReader(new InputStreamReader(
yc.getInputStream()));
String inputLine;
etc.
Does anyone know how Chrome port forwarding works? Is it a proxy at the OS level of the device, or somehow built into WebView? Has anyone been able to get this to work with native code?
FYI: I could convert my GCM registration to Javascript, but am hoping to avoid that work.
It looks like the Chrome port forwarding only works within WebView. For native code, I ran adb port forwarding and that worked.
adb forward tcp:8080 tcp:80
So on an app which uses both Javascript network calls and native network calls, I need to run both tools.
Any comments on how this works would be very helpful.

Categories

Resources