Creating the WebSocket Dependency File
 

• In your Lovable project editor, create a new file named package.json. This file tells your project which extra libraries it needs.
• Add the following code into package.json to include the WebSocket library:

  
  {
    "name": "websocket-app",
    "version": "1.0.0",
    "main": "app.js",
    "dependencies": {
      "ws": "latest"
    }
  }
      

• This file works like a shopping list for your project. The system will automatically download the ws library when it sees this list.

 
Creating the WebSocket Server File
 

• Create a new file called websocket.js. This file will have all the code for handling WebSocket connections.
• Copy and paste the following code into websocket.js. This sets up a server that listens for real-time connections:

  
  const WebSocket = require('ws');
  
  const wss = new WebSocket.Server({ port: 8081 });
  wss.on('connection', function connection(ws) {
    console.log('A new client connected');
    ws.on('message', function incoming(message) {
      console.log('Received: %s', message);
  // Echo the message back to the client for demonstration
  ws.send('Echo: ' + message);
  
    });
    // Send a welcome message once the client connects
    ws.send('Welcome to the WebSocket server!');
  });
      

  
  

 
Integrating the WebSocket Server with Your Main Application
 

• Open your main application file, for example app.js.
• At the top of your app.js file, add code to start your HTTP server and import your WebSocket server. This makes sure both work together:

  
  const express = require('express');
  const http = require('http');
  
  const app = express();
  const server = http.createServer(app);
  // This line starts the WebSocket server defined in websocket.js
  require('./websocket');
  // A simple route for your web application
  app.get('/', (req, res) => {
    res.send('Hello from Express and WebSocket combined!');
  });
  // Start the HTTP server on port 8080
  server.listen(8080, () => {
    console.log('Server is running on http://0.0.0.0:8080');
  });
      

  
  

 
Connecting from the Client Side
 

• Create a new file named client.js. This file is for your front-end code that connects to the WebSocket server.
• Add the following code into client.js. This makes your browser talk to the server:

  
  // Open a connection to the WebSocket server running on port 8081
  const socket = new WebSocket('ws://localhost:8081');
  
  // When the server sends a message, log it to the console
  socket.addEventListener('message', function(event) {
    console.log('Message from server:', event.data);
  });
  // When the connection opens, send a test message to the server
  socket.addEventListener('open', function(event) {
    socket.send('Hello Server!');
  });
      

  
  


• If you have an HTML file, include client.js by adding this script tag just before the closing </body> tag:
  

  
  <script src="client.js"></script>
      

  
  

 
Testing Your Real-Time Features
 

• With these files in place, your project now supports real-time communication using WebSockets.
• When a user visits your application in a browser, they will get a WebSocket connection to the server, and real-time messages will be exchanged.
• Check the console messages in both your server and browser to see the communication in action.

 
Creating Your Dependency File
 

• In your Lovable project, create a new file called package.json where you list your project’s dependencies. Since Lovable doesn’t provide a terminal, you need to add the dependencies directly in this file. Copy and paste the following code:

  
  {
    "name": "websocket-app",
    "version": "0.0.1",
    "dependencies": {
      "ws": "^8.12.0"  /_ This is the WebSocket library for Node.js _/
    },
    "scripts": {
      "start": "node server.js"
    }
  }
      

• This file tells Lovable which libraries your project needs. The ws package is used to create a WebSocket server, which is central to adding real-time features.

 
Setting Up the WebSocket Server
 

• Create a new file named server.js in your project directory. This file will run your WebSocket server.
• Paste the following code into server.js:

  
  const WebSocket = require('ws');  // Import the WebSocket library
  
  // Create a server that listens on port 8080
  const wss = new WebSocket.Server({ port: 8080 }, () => {
    console.log('WebSocket server is running on ws://localhost:8080');
  });
  // Listen for client connections
  wss.on('connection', function connection(ws) {
    console.log('A new client connected!');
    // When a message is received from a client, log it
    ws.on('message', function incoming(message) {
      console.log('Received: %s', message);
  // Best practice: Echo the message back to the client
  ws.send(`Server received: ${message}`);
  
    });
    // Handle errors gracefully
    ws.on('error', function error(err) {
      console.error('WebSocket error:', err);
    });
  });
      

  
  


• This code sets up the WebSocket server to listen on port 8080, handles client connections, echoes messages back to clients, and logs any errors for troubleshooting purposes.

 
Setting Up the Client to Connect to WebSocket
 

• Create an index.html file that will act as the user interface for your project.
• Add the following HTML and JavaScript code into index.html:

  
  
  
    
      
      
    
    
      
  Real-Time WebSocket Connection