Struggling to get socket.io working correctly with Ngnix #4678

phatphillips · 2023-03-30T13:08:12Z

phatphillips
Mar 30, 2023

I'm following this tutorial - https://socket.io/get-started/chat

I'm able to view the index.html via this URL https://code.myserver.xyz/proxy/3000/ but get a console error
GET https://code.myserver.xyz/socket.io/?EIO=4&transport=polling&t=OSoRsNc 404

I'm running a dockerized Code-server and have forward ported my the local instance to a domain https://code.myserver.xyz/ using Nginx Proxy Manager (with a Let's Encrypt SSL).

I suspect it's a combination of my nginx settings and incorrectly using the socket path
Here's what I've put in my nginx config:

location /proxy/3000/socket.io/ {
	  proxy_pass http://localhost:3000/socket.io/;
	  proxy_http_version 1.1;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection "upgrade";
}

Here's my index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
  </body>
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script>
  var socket = io();
</script>
</html>

index.js file

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

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
  });

  io.on('connection', (socket) => {
    console.log('a user connected');
  });
server.listen(process.env.PORT || 3000);
console.log('Server is running ');

darrachequesne · 2023-03-31T05:28:03Z

darrachequesne
Mar 31, 2023
Maintainer

Hi! In that case, you'll need to use a custom path

http {
  server {
    listen 80;
    root /var/www/html;

    location /proxy/3000/socket.io/ {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;

      proxy_pass http://localhost:3000;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
  }
}

And specify the path on both sides:

server:

import { Server } from "socket.io";

const io = new Server({
  path: "/proxy/3000/socket.io/"
});

client:

import { io } from "socket.io-client";

const socket = io({
  path: "/proxy/3000/socket.io/"
});

Reference: https://socket.io/docs/v4/reverse-proxy/#nginx

3 replies

phatphillips Mar 31, 2023
Author

Thanks for your reply - much appreciated. I have updated the NGINX, index.js and index.html file accordingly, I also moved the port to 3001 as there was a conflict. I'm now getting a new error:
GET https://code.myserver.xyz/socket.io/?EIO=4&transport=polling&t=OSoRsNc 503 The server is up and running, but I'm not receiving any "user connected/disconnected" logs.

Here's my server script

import express from 'express';
import http from 'http';
import { Server } from 'socket.io';
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  path: '/proxy/3001/socket.io/'
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

const PORT = process.env.PORT || 3001;
server.listen(PORT, () => {
  console.log(`listening on *:${PORT}`);
});

and client script

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
  </body>
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
  <script type="module">
  const socket = io({
    path: "/proxy/3001/socket.io/"
  });
  </script>
</html>

Any tips or suggestions?

darrachequesne Apr 3, 2023
Maintainer

I was not able to reproduce the issue: https://github.com/socketio/socket.io-fiddle/tree/nginx-custom-path

It seems there is something wrong on the client side, you should get something like GET https://code.myserver.xyz/proxy/3001/socket.io/?EIO=4&transport=polling&t=OSoRsNc, not GET https://code.myserver.xyz/socket.io/?EIO=4&transport=polling&t=OSoRsNc.

Could you please check?

phatphillips Apr 3, 2023
Author

My apologies - it says GET https://code.myserver.xyz/proxy/3001/socket.io/?EIO=4&transport=polling&t=OT5kDmp 502

phatphillips · 2023-04-11T10:38:16Z

phatphillips
Apr 11, 2023
Author

Just a quick follow up on this - I wasn't able to get socket.io working with a code-server/nginx combination. I suspect it's something to do with code-server and how it allocates ports within the environment.

I ended up running the running socket.io within it's own container.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Struggling to get socket.io working correctly with Ngnix #4678

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Struggling to get socket.io working correctly with Ngnix #4678

Uh oh!

Uh oh!

phatphillips Mar 30, 2023

Replies: 2 comments · 3 replies

Uh oh!

darrachequesne Mar 31, 2023 Maintainer

Uh oh!

phatphillips Mar 31, 2023 Author

Uh oh!

darrachequesne Apr 3, 2023 Maintainer

Uh oh!

phatphillips Apr 3, 2023 Author

Uh oh!

phatphillips Apr 11, 2023 Author

phatphillips
Mar 30, 2023

Replies: 2 comments 3 replies

darrachequesne
Mar 31, 2023
Maintainer

phatphillips Mar 31, 2023
Author

darrachequesne Apr 3, 2023
Maintainer

phatphillips Apr 3, 2023
Author

phatphillips
Apr 11, 2023
Author