TransWikia.com

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

Salesforce Asked by javanoob on January 28, 2021

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?

One Answer

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.

Answered by Mohith Shrivastava on January 28, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP