Unable to connect to socket.io from html file served via different server or file system

Question

I'm trying to learn node.js and socket.io .

Most of the examples online, including the official one asks to setup the following at server side:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

and this in client side:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

So this uses the same server for serving the index.html as well as handling the socket connections, and it looks like sockets.io creates a socket.io js file under socket.io directory on the server. All good up to this.

---

Now, I'm working on a cordova application, I don't have to serve the index file from a server as of now since it'll be bundled with the application. I just need to connect to the socket server running in my local machine on a particular port.

Also, I don't want to use express, because I'm learning - I don't think it's required for simply setting up a socket server, I rather not use it without understanding what it does or how it makes my life easier (In other words I rather understand a thing or two about javascript before jumping into the world of jquery... ).

So I tried the following in my server.js file:

var port = 80;
io = require('socket.io')(port);
console.log('socket server started @ %s !', port);

executing this via node server.js command prints socket server started @ 80 !

According to the documentation that should create an http server ( probably enhanced by socket.io with awesome stuff ) listening to port 80 .

Now if I load the index.html via a node.js server launched by the brackets IDE at http://127.0.0.1:56958/...path/index.html which contains the following:

<script src="scripts/libs/socket.io/socket.io.js"></script>
<script>
    console.log('test');
    var socket = io('http://127.0.0.1:80');
</script>

(Where scripts/libs/socket.io/socket.io.js is the standalone sockets.io client side library which I downloaded form their github repo ) Which leaves me with the following error in latest version of chrome:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-2j6JUXRmZBJXdmMDTRd3ZxygBJNrb8gSbgOi4FOjiy0='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

I also tried loading index.html file from file system using file:/// protocol, which throws the same error.

What am I doing wrong, and how can I fix this?

---

Note: I have seenthis question, but I don't have a cordova.xml file since I'm not using cordova to build the app yet. I've tried enabling cross origin resource sharing ( using an extension from store ), but that didn't help either.

---

Update:

Below is the directory structure:

root
 |_app
 | | // lots of cordova directories and files like package.json
 | |_www
 |  |_scripts
 |  | |_libs
 |  |   |_socket.io
 |  |     |_socket.io.js
 |  |_index.html
 |_node_modules
 | |_socket.io
 |_server
   |_server.js

Answer 1

The plugin cordova-plugin-whitelist is blocking your socket.io connection. You can look at configuration details here . You'll want to configure it carefully, but for the purpose of testing you can allow everything:

<meta http-equiv="Content-Security-Policy" content="default-src *;">