How to initialize a socket.io Server on an already initialized Express App?

[dennisat]

Hello Sockerio

I have a problem trying to instantiate the WS Server on an already initialized Express APP. I followed this guide but still have some issues.

The problem is that on client's emit, the emit fails with a network error and on server side looks like the server is not initialized properly.

Client error

WebSocket connection to 'ws://localhost:4000/socket.io/?EIO=4&transport=websocket' failed: 

Server error

Error: ENOENT: no such file or directory, stat '/Users/xxxx/dev/xxxx/xxxx/packages/web-app/build/index.html'

For some reason, the server is trying to resolve a file that doesn't exist (!?). Looks like the Server from "socket.io" is not initialized properly as this request should be consumed by Server's middleware.

Server code

    import * as express from "express";
    import * as http from "http";

    const httpServer = http.createServer(app); // Where app is the initialized Express App
    const wsServer = new Server(httpServer);

    wsServer.on('connection', (socket) => {
      console.log('a user connected', {socket});
      socket.on('ccc', data => {
        console.log('message from client', data);
        socket.emit('server-message', 'gotcha');
      });
      socket.on('disconnect', () => {
        console.log('user disconnected');
      });
    });

Client code

    this.socket = io(
      "http://localhost:4000",
      {
        autoConnect: false,
        reconnection: false,
        reconnectionDelay: 2000,
        transports: ['websocket'],
      },
    );
    this.socket.connect();
    this.socket.emit('client-message', 'test');

[dennisat]

socket.io provides the attach method, something that doesn't exist in engine.io.

Anybody that has this problem, the only quick solution is what described here: #4135 .

[darrachequesne]

Your first example should work properly, as long as you use httpServer.listen() and not app.listen():

import * as express from "express";
import * as http from "http";
import { Server } from "socket.io";

const app = express.default();
const httpServer = http.createServer(app); // Where app is the initialized Express App
const wsServer = new Server(httpServer);

wsServer.on('connection', (socket) => {
  console.log('a user connected', {socket});
  socket.on('ccc', data => {
    console.log('message from client', data);
    socket.emit('server-message', 'gotcha');
  });
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

httpServer.listen(3000);

Reference: https://socket.io/docs/v4/server-initialization/#with-express

Error: ENOENT: no such file or directory, stat '/Users/xxxx/dev/xxxx/xxxx/packages/web-app/build/index.html'

This error seems totally unrelated to Socket.IO. Could you please check?

[dennisat]

This wasn't reported as an error, it was QA topic.