How to configure Socket.io to work with LWC OSS?

Question

I am trying to use socket.io library with LWC OSS and followed the below steps:

1. Created LWC OSS app using the command npx create-lwc-app my-app

2. Installed socket.io library using the command npm install socket.io

3. Updated scripts/server.js as below:

    // Simple Express server setup to serve the build output
    const compression = require('compression');
    const helmet = require('helmet');
    const express = require('express');
    const path = require('path');
    const server = require('http').createServer(express);
    const io = require('socket.io')(server);
   
    const app = express();
    app.use(helmet());
    app.use(compression());
   
    const HOST = process.env.HOST || 'localhost';
    const PORT = process.env.PORT || 3001;
    const DIST_DIR = './dist';
   
    io.on('connection', (client) => {
        console.log(`client connected`);
        client.on('disconnect', () => { 
            console.log(`Client disconnected`);
         });
      });
   
    app.use(express.static(DIST_DIR));
   
    app.use('*', (req, res) => {
        res.sendFile(path.resolve(DIST_DIR, 'index.html'));
    });
   
    server.listen(3001, () => {
        console.log('listening on port 3001');
    });
   

4. Updated src/client/modules/my/app/app.js as below:

    import { LightningElement } from 'lwc';
    import io from 'socket.io';
   
    export default class App extends LightningElement {
   
        connectedCallback() {
            //eslint-disable-next-line
            var socket = io();
        }
    }
   

5. Ran the command npm run watch and get the below error:

            ERROR in ./node_modules/socket.io/dist/index.js
    Module not found: Error: Can't resolve 'fs' in '/home/John/workspace/my-app/            node_modules/socket.io/dist'
     @ ./node_modules/socket.io/dist/index.js 27:13-26
     @ ./src/client/modules/my/app/app.js
     @ ./src/client/index.js
     @ multi ./node_modules/error-overlay-webpack-plugin/lib/entry-basic.js ./node_modules/             error-overlay-webpack-plugin/lib/entry-devserver.js? ./src/client/index.js
    (node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory,        stat       '/initrd.img'
    (node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error              originated either by throwing inside of an async function without a catch block, or by              rejecting a promise which was not handled with .catch(). (rejection id: 1)
    (node:25805) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.         In      the future, promise rejections that are not handled will terminate the Node.js      process with a       non-zero exit code.
    (node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory,        stat       '/initrd.img.old'
    (node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error              originated either by throwing inside of an async function without a catch block, or by              rejecting a promise which was not handled with .catch(). (rejection id: 2)
    (node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory,        stat       '/vmlinuz'
    (node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error              originated either by throwing inside of an async function without a catch block, or by              rejecting a promise which was not handled with .catch(). (rejection id: 3)
    (node:25805) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory,        stat       '/vmlinuz.old'
    (node:25805) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error              originated either by throwing inside of an async function without a catch block, or by              rejecting a promise which was not handled with .catch(). (rejection id: 4)
   

6. When I launch url http://localhost:3001, it shows the below error:

    ./node_modules/socket.io/dist/index.js
    Module not found: Can't resolve 'fs' in '/home/John/workspace/my-app/      node_modules/socket.io/dist'
   

Quick google search shows that this is a common known issue with webpack bundling and there are some recommended solutions like in this Module not found: Error: Can't resolve 'fs' Using Webpack but I am confused as where to make change like this.

I am guessing lwc-services.config.js need to be updated to resolve this error but I am not sure as what that change is. Can someone help me here?

Answer 1

Looks like the module that you are using is for the server-side and not the client-side socket.io lib you need. Use the client site script instead.

You can just use the <script> tag in your HTML index.html and import the socket.io js file for the client site

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost');
</script>

You can use the server-side module that you have in your express server.