I'm currently developing an Apache Cordova app with Ionic Framework that should communicate through a WebSocket and I use the Socket.Io library for it. Now when I run it on my desktop browser everything works fine but when I build for Android and test it on my Smartphone it doesn't work.
My Server looks like this:
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(8200, '192.168.0.127', function() {
console.log('Server listening...');
});
io.listen(server);
io.on('connection', function(socket) {
socket.emit('init', data);
});
And since Ionic is friends with AngularJS my Client Controller looks like this:
.controller('AppCtrl', function($rootScope, $scope, ServerUrl) {
var socket = io.connect(ServerUrl.serverUrl()); // ServerUrl: 'http://192.168.0.127:8200'
socket.on('init', function(data) {
// something
});
I included the Socket.IO Client script in my index.html head like this:
<script src="lib/socket.io/socket.io.min.js"></script>
When I remote debug the app it throws this repeatedly with different t parameters:
Failed to load resource: net::ERR_ADDRESS_UNREACHABLE http://192.168.0.127:8200/socket.io/?EIO=3&transport=polling&t=1431079993172-0
I've thoroughly searched every related question on here but they didn't solve my problem. I really need this thing to work and would appreciate any help.
Thanks in advance.
It was an IP address issue. 192.168.0.127 was the WiFi IP of my desktop but somehow everytime I connected my smartphone to my desktop to deploy the app a LAN network was build and the WiFi Adapter was disconnected so 192.168.0.127:8200 was out of reach. Deactivated the LAN network in Windows Control Panel and everything works fine.
Related
So here is my issue in a pickle: btw I had some trouble finding out how to do this through google and I did try using StackOverflow but couldn't find the exact answer
So I have a ReactJS website where I use
yarn start
to run and it launches on localhost:3000
I want it to launch on localhost:3000 while an express server also launches on that server, aka start the react server up in express.js.
It seems like every tutorial I've found, most are outdated, and the remaining ones are guides to turn react into a static website and THEN use express. I would like to keep react on the server-side for advantage of react-router
Edit1: So basically when I have an expressjs server
THE DATABASE DETAILS HAVE BEEN REMOVED, THAT LINE ISNT AN ERROR
const express = require('express'); var app = express();
var mysql = require('mysql'); var connection =
mysql.createConnection({ host :
database : 'main' });
connection.connect()
app.post('/users', function(req, res) { var user = req.body;
res.end('Success'); })
app.listen(3000, function(){ console.log('Express sever is listening
on port 3000') })
//connection.end()
I also start the create-react-app server with yarn start and it launches on localhost:3000 but this expressjs server overrides that.
So I want to connect the two to be able to send post requests
I just recently worked on a sample repo that implements this strategy. There are a few ways this can be done, but the simplest way to do this will be to start the express server as a second server that will run on a different port, ie. 3001. You can then use concurrently to launch both the react server (I am assuming webpack) and the express API server in a single command.
Here is a tutorial that shows how this can be set up. You should pay attention to the section in this tutorial about proxying requests from the client (browser) through the webpack server. There are some considerations to think about with regards to CORS configuration if you do not proxy requests through the webpack server.
Here is my proof of concept repo where I implemented just what you are looking for: react client, and express server. It can be run via concurrently or with docker (compose).
You can change the port on which express is listening:
var server = app.listen(3001, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
Change 3001 to any valid port number
I've been working on my chat application on my localhost machine (which works fine), but when I'm trying to host it on Github or 000webhost, I get this error polling-xhr.js:264 on both hosts (both hosts have an https connection). I am using cfenv to parse Cloud Foundry-provided environment variables. Here is a picture of the error in question:
It'll keep going like that...
Here is a look at my code:
server.js
var cfenv = require('cfenv');
var appEnv = cfenv.getAppEnv();
var express = require('express');
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(appEnv.port, appEnv.bind, function(){
console.log("Server starting on " + appEnv.url);
})
app.use(express.static(__dirname + '/'));
... // rest of socket.io code
index.html
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
...
socketService.js (btford's socket.io extension)
app.factory('socket', function(socketFactory){
return socketFactory();
});
I've tried various code suggested here on StackOverflow, but I can't seem to get it right. My code works very well with localhost, but it doesn't work when there is an actual server such as one mentioned above.
Thanks a lot for the help!
both hosts have an https connection
But you have in your server code:
require('http');
Try using the https module instead of http. That might explain why the app only works in localhost. Hope this helps :)
EDIT
You should also verify that your server is listening on port 443 instead of 80
I just found out from a good friend that the servers I was hosting on does not support node.js and that's why it didn't work. When my friend hosted his server with it installed, it worked very nice.
I'm using ionic with angular.js for the front-end. I also setup a separate folder for my server side component. This is my index.js file...
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
As you can see it is a simple Hellow World example on my localhost.
I am going to use ngrok to make my server file public. My question is, after I do that, how can I call the index.js server file from ionic?
Do I call it from my angular module? If so, how can I do that? Can someone tell me what code is needed to add in ionic so I can connect to the server file? I am trying to use node js as my backend but having difficulty.
ngrok will allow you to access your localserver from outside your network.
Here is a basic example of how you call your server. Depends where you need to call it but this is how I do it using ngResource
angular.module('starter.services', ['ngResource'])
.factory('Session', function ($resource) {
return $resource('http://XXX.XXX.XXX.XXX:5000/sessions/:sessionId');
});
If you run your app from a browser with ionic server you can use http://localhost:5000.
If you use your phone and if it is on the same network than your server you can use your private IP, something like http://192.168.XXX.XXX
And if you want to try it from another network ngrok is a good choice.
What I have: several integration test specs written in Jasmine for my AngularJS app (they navigate through my entire app)
What I want: perform a network monitoring of my app and export the data using HAR
Naive solution: just write a script which receives an URL and export the data using HAR. It's easy, but it's not automatic (I need to provide the urls manually)
Enhance solution: automate the process mentioned. A script that navigates through all the pages of my app and extracts the network data for each. But since I'm already navigating through all the pages of my app via integration tests (protractor + Jasmine) I want to just "plug-in" the part about exporting the network traffic.
I've found this How can I use BrowserMob Proxy with Protractor?, and I was checking out the example provided here example, but I'm not quite sure how it works.
What I should put as the host and port for the proxy?
I'm using Selenium, and I've specified the host and port for it, but I'm getting ECONNREFUSED errors.
This is my protractor file config:
var Proxy = require('browsermob-proxy').Proxy;
...
protractorConf = exports.base = {
//... more things
onPrepare: function() {
... more things....
browser.params.proxy = new Proxy({ // my selenium config for browsermob
selHost: '10.243.146.33',
selPort: 9456
});
//... more things
}
}
And in one of my integration tests specs (it's CoffeeScript btw):
beforeEach ->
browser.get BASE_URL
browser.params.proxy.doHAR 'some/page/of/my/app', (err, data) ->
if err
console.log err
else
console.log data
But I'm getting as I've said ECONNREFUSED error. I'm quite lost about the integration about Selenium with Protractor and brosermob.
Any ideas or alternatives? Thanks!
I'm trying to integrate StrongLoop Loopback [backend] with the Yeoman workflow [frontend] but struggling to unite the two codebases. I know I could independently develop my "backend" using StrongLoop's Loopback and just expose it as a REST API. However, I would rather develop using the Loopback Angular SDK and connect to the models programmatically within the same app. I'm wondering how I need to organize my folder structure, update my Gruntfile.js to include Loopback app setting for both serve and build functions, and only run one server instance for development (instead of "grunt serve" for my yeoman app frontend stuff and "slc run" for loopback backend stuff).
I've read about "plans" for yeoman scaffolding as opposed to the CLI workflow for Loopback but they are 5 months+ on Github without any updates.
Any guidance to make it work now (as opposed to waiting for this feature to be developed) would be greatly appreciated.
For reference:
Here is the Loopback Angular SDK instructions with Grunt commands detailed
http://docs.strongloop.com/display/DOC/AngularJS+JavaScript+SDK
There is a native $resource to interact with RESTful server-side.
Tutorial
Also you can use custom build service to combine loopback API and Angular front end:
angular.module('catalog', [])
.constant('ENDPOINT_URI', 'http://0.0.0.0:3000/api/')
.controller('CatalogController', function (ProductsModel) {
var store = this;
function getItems() {
ProductsModel.all()
.then(function (result) {
store.products = result.data;
});
}
store.products = [];
getItems();
})
.service('ProductsModel', function ($http, ENDPOINT_URI) {
var service = this,
path = 'products/';
function getUrl() {
return ENDPOINT_URI + path;
}
service.all = function () {
return $http.get(getUrl());
};
});
Tutorial