0

I am tring to make client server communication using socket.io on a server with https and reverse proxy as nginx.But on client side its giving following errors :

1) GET https://example.com/socket.io/socket.io.js 404 not found

2) Reference Error: io is not defined

This is my nginx server block

server {
        listen 80 default_server;
        listen [::]:80 default_server ipv6only=on;


        root /usr/share/nginx/html;
        index index.html index.htm;

        # Make site accessible from http://localhost/
        server_name example.com www.example.com;

        location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        try_files $uri $uri/ =404;

        }

        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/live/myreactnative.com/fullchain.pem; 
        ssl_certificate_key /etc/letsencrypt/live/myreactnative.com/privkey.pem; 
        include /etc/letsencrypt/options-ssl-nginx.conf;
        if ($scheme != "https") {
            return 301 https://$host$request_uri;
        } 

}

This is my node server file

var express = require('express');
var app = express();
var serverPort = 8080;
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io')(server);

app.get('/', function(req, res){
  console.log('get /');
  res.sendFile(__dirname + '/index.html');
});
server.listen(serverPort, function(){

  console.log('server up and running at %s port', serverPort);
});

io.on('connection', function(socket){
  console.log('connection');
  socket.on('disconnect', function(){
    console.log('disconnect');
    })
})

my client side is like this :

<html>
<head>
  <title>socket client</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
</script>
</html>

This is the website url https://example.com

my node application is in directory /usr/share/nginx/html and not in root( but i dont think this can make any difference )

3
  • Point 1. simply tells you there's no socket.io.js file under /socket.io/socket.io.js URL. The second problem is probably a consequence of point 1. Please verify the location of your socket.io client library and correctly refer it in your HTML code. Both errors should be fixed by this. Commented Aug 2, 2017 at 18:19
  • I see. Hmm, hard to say, I suppose you're serving your socket.io.js file from node then.. I only used node for WS (socket.io) communication and server everything from my PHP app. My guess would be to see whether proxy_set_header calls don't break it (remove them - you won't connect to WS, but will see if JS file is served). Then the try_files directive may be what give you 404 error as well. Commented Aug 2, 2017 at 18:48
  • Try this solution stackoverflow.com/a/62187296/268598 Commented Jun 4, 2020 at 5:18

1 Answer 1

0

Finally It was fixed. I made changes to nginx server block.

This is my new nginx server block

server {
        listen 80;

        root /usr/share/nginx/html;
        index index.html index.htm;

        # Make site accessible from http://localhost/
        server_name example.com www.example.com;

        location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        }

        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/live/myreactnative.com/fullchain.pem; 
        ssl_certificate_key /etc/letsencrypt/live/myreactnative.com/privkey.pem; 
        include /etc/letsencrypt/options-ssl-nginx.conf;
        if ($scheme != "https") {
            return 301 https://$host$request_uri;
        } 

}
Sign up to request clarification or add additional context in comments.

1 Comment

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.