0

If I have a node express server running on port 5003

import express from 'express'
import { createServer } from 'http'
import { Server } from 'socket.io'

const app = express()
const prod = process.env.NODE_ENV === 'production'
const port = process.env.PORT || prod ? 5003 : 4000
const httpServer = createServer(app)

const io = new Server(httpServer, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST']
  }
})

const connections = []

io.on('connection', (socket) => {
  connections.push(socket)
  console.log(`Socket id ${socket.id} connected`)

  socket.on('disconnect', () => {
    connections.splice(connections.indexOf(socket), 1)
  })
})

httpServer.listen(port, () => console.log(`App listening on port ${port}.`))

And a client connecting the socket.io to the server

const socket = io(`http://localhost:5003`)

What would the nginx server block configuration be?

The url where this app is at is like this:

https://my.domain.com/myapp

And my server blocks are:

geo $authentication {
  default "Authentication required";
  `Some ip number` "off";
}

server {
  listen         80 default_server;
  listen    [::]:80 default_server;
  server_name my.domain.com;
  return 404; # managed by Certbot
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  ssl_certificate /etc/letsencrypt/live/my.domain.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/my.domain.com/privkey.pem; # managed by Certbot

  include /etc/letsencrypt/options-ssl-nginx.conf;
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

  server_name my.domain.com;
  client_max_body_size 200M;
  
  root /var/www/;
  index index.php index.html index.htm;

  location / {
    add_header Access-Control-Allow-Origin *;
    auth_basic $authentication;
    auth_basic_user_file /var/www/.htpasswd;
    try_files $uri $uri/ =404;
  }

  # Here is for example the app where I am running socket.io from
  location /myapp {
    auth_basic $authentication;
    auth_basic_user_file /var/www/.htpasswd;
    try_files $uri $uri/ =404;
  }

  # If this app has some sort of api route for express I do a proxy pass
  location /api/upload/ {
    proxy_pass http://localhost:5003/api/upload;
  }
2

Here is an example NGINX configuration block for webscokets. Notice how the connection is upgraded if a valid websocket connection is made to the end point http://127.0.0.1:8080/wsapp

More at NGINX as a WebSocket Proxy

location /wsapp {
    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_hide_header 'Access-Control-Allow-Origin';
}
11
  • This example is for a subfolder commonly referred to as an endpoint. That way NGINX doesn't try_files a path that is meant only for websockets to connect. No html or PHP is ever rendered at this end point. It accepts webscoket connections or nothing at all. – suchislife Feb 19 at 18:49
  • When I do this I get a CORS message, I am making the connection for socket io to http://127.0.0.1:8080/wsapp and added the location endpoint – Álvaro Feb 19 at 18:53
  • I've updated the answer to use NGINX's proxy_hide_header directive. It could be that the server behind your proxy_pass is setting the Access-Control-Allow-Origin header. – suchislife Feb 19 at 19:07
  • So are you saying that the socket.io should connect like this const socket = io('http://127.0.0.1:5003/wsapp') obviously I also changed the nginx proxy to 5003? I still get CORS thou – Álvaro Feb 19 at 19:09
  • More like const socket = io('wss://127.0.0.1:5003/wsapp') WSS for SSL and WS for NON-SSL. I see your URL is not HTTPS but your nginx.conf example is. – suchislife Feb 19 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.