带有Express / Apache2 / SSL的Socket.IO

Question

Alright, I've searched nearly every single question/answer I can find about this on SO, and other places online, to no avail. So, I thought I'd post this to see if anyone has a direction to point me in.

The Setup

I've got a React app and Node/Express API, on separate subdomains. The React app is on www.domain.com, and the API is on api.domain.com. The React app consumes endpoints exposed by the Express app (api.domain.com/endpoint, etc).

Additionally, the Express API uses Socket.io for some realtime communication, and is exposed on the same port as the API itself.

All of this is served up by Apache2.

Relevant Code Samples

My root Express file (index.js):

const app = require('express', '4.16.4')();
const bodyParser = require('body-parser');
const cors = require('cors');
const http = require('http').createServer(app);
const io = require('socket.io')(http);
require('./sockets/chat')(io);

const db = require('./services/db.service');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors({
  credentials: true,
}));

const projects = require('./routes/projects');
const assets = require('./routes/assets');

app.use('/projects', projects);
app.use('/assets', assets);

// Test API endpoint
app.get('/test', (req, res) => {
  res.send('You got me');
});

db.connect();

http.listen(4002, () => {
  console.log('API is ready on 4002');
});

/sockets/chat , which is imported into the above file:

const Message = require('../models/message.model');

module.exports = (io) => {
  io.on('connection', (socket) => {
    socket.on('message', async ({ asset, from, body }) => {
      const msg = new Message({
        asset,
        from,
        body,
      });
      const message = await msg.save();
      io.emit('message', message);
    });
  });
};

The React Chat component which is handling the interface with Socket.io:

import React, { Component } from 'react';
import ChatMessage from '../ChatMessage';
import { Auth0Lock } from '../Auth';
import socketIOClient from 'socket.io-client';
import MessageService from '../../services/message.service';
import { apiUrl, loginCallback } from '../../config';

require('./styles.scss');

class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [],
    }
  }

  componentDidMount() {
    MessageService.getAssetMessages(this.props.assetId)
      .then((messages) => {
        this.setState({ messages })
      })
      .catch((e) => console.log(e));

    this.socket = socketIOClient(apiUrl, {transports: ['websocket']}); 
    this.socket.on('message', (message) => {
      this.setState({
        messages: [
          ...this.state.messages,
          message,
        ],
      });
    });
    this.socket.on('connect_error', (err) => {
      console.log('SocketIO connection error:', err);
    });
  }

And the Apache2 config that sits in front of the API (on the subdomain):

# Added to mitigate CVE-2017-8295 vulnerability
UseCanonicalName On
<VirtualHost *:80>
        ServerName api.reviewcycle.io

        RewriteCond %{SERVER_NAME} =api.reviewcycle.io
        RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=301]

        ErrorLog ${APACHE_LOG_DIR}/error-reviewcycle-api.log
</VirtualHost>

<VirtualHost *:443>
        ServerName api.reviewcycle.io

        <Proxy *>
                Order allow,deny
                Allow from all
        </Proxy>

        RewriteEngine On
        RewriteCond %{REQUEST_URI}      ^/socket.io/            [NC]
        RewriteCond %{QUERY_STRING}     transport=websocket     [NC]
        RewriteRule /(.*)               wss://localhost:4002/$1 [P,L]

        SSLEngine On
        SSLCertificateFile /etc/cloudflare/reviewcycle.io.pem
        SSLCertificateKeyFile /etc/cloudflare/reviewcycle.io.key

        ProxyPass / http://localhost:4002/
        ProxyPassReverse / http://localhost:4002/
</VirtualHost>

The Problem

When the app loads, and the module attempts to make the connection to Socket.io, it's failing like so:

As for the detail on the network request:

I've tried nearly every possible thing I can think of, including a bunch of changes to the Apache config. I feel like somewhere along the way, Apache isn't proxying the request over to Express correctly, but I'm unsure.

If anyone sees anything here that looks amiss, I'd be super grateful for the help! Also happy to provide whatever other information might be necessary to track this one down!

TIA!

Answer 1

Turns out, the answer to this was pretty straightforward.

This line in the Apache config: RewriteRule /(.*) wss://localhost:4002/$1 [P,L] , needed to have a different protocol. Because the internal connection to the API isn't via SSL, changing that to ws:// ended up fixing things up.

If anyone else stumbles across this, hope it helps!