Build a React.js P2P File Sharing Project in Node.js & Express Using Socket.io Rooms in Browser

Introduction

In this tutorial, we'll walk through the process of building a Peer-to-Peer (P2P) file sharing application using React.js, Node.js, Express, and Socket.io. This project will help you understand how to manage real-time file sharing and utilize Socket.io rooms for effective communication between users. Whether you're looking to enhance your web development skills or create a practical application, this guide is designed to provide clear, actionable steps.

Step 1: Set Up Your Development Environment

To get started, you need to set up your development environment.

• Install Node.js: Download and install Node.js from the official website.
• Create a New Project Directory:

  mkdir p2p-file-sharing
  cd p2p-file-sharing
  

• Initialize a New Node.js Project:

  npm init -y
  

• Install Required Packages:

  npm install express socket.io cors
  

Step 2: Create the Server Using Express

Next, you'll need to set up your server with Express and Socket.io.

• Create a New File: Create a file named server.js.
• Set Up Basic Server Code:

  const express = require('express');
  const http = require('http');
  const socketIo = require('socket.io');
  const cors = require('cors');
  
  const app = express();
  const server = http.createServer(app);
  const io = socketIo(server, {
      cors: {
          origin: "*",
          methods: ["GET", "POST"]
      }
  });
  
  app.use(cors());
  app.get('/', (req, res) => {
      res.send('Server is running');
  });
  
  server.listen(5000, () => {
      console.log('Server is running on port 5000');
  });
  

Step 3: Implement Socket.io for Real-Time Communication

Now, set up real-time communication using Socket.io.

• Add Socket.io Events:

  io.on('connection', (socket) => {
      console.log('New client connected');
  
      socket.on('disconnect', () => {
          console.log('Client disconnected');
      });
  });
  

Step 4: Setup the Client with React

You will need to create the client-side application using React.

• Create React App:

  npx create-react-app client
  cd client
  

• Install Socket.io Client:

  npm install socket.io-client
  

Step 5: Create File Sharing Logic

Now, develop the file sharing functionality.

• Setup Socket.io in Client:

  • In your App.js, import and initialize Socket.io:

    import io from 'socket.io-client';
    const socket = io('http://localhost:5000');
    

• Implement File Upload and Download:

  • Use an <input> of type file to allow users to select files.
  • Emit an event on file selection:

    const handleFileChange = (event) => {
        const file = event.target.files[0];
        socket.emit('file', file);
    };
    

• Listen for Incoming Files:

  socket.on('file', (file) => {
      // Logic to handle received file
  });
  

Step 6: Create Socket.io Rooms for P2P Sharing

Enhance your application by using Socket.io rooms to separate different file-sharing sessions.

• Join a Room:

  socket.emit('joinRoom', roomId);
  

• Handle Room Events on the Server:

  socket.on('joinRoom', (roomId) => {
      socket.join(roomId);
  });
  

Conclusion

In this tutorial, we've covered the essential steps to build a P2P file sharing application using React, Node.js, Express, and Socket.io. You set up a server, implemented real-time communication, and enabled file sharing through rooms.

Next Steps

• Experiment with file types and sizes for sharing.
• Implement user authentication for secure file sharing.
• Explore additional features like file previews or chat functionality.

By following these steps, you can expand your understanding of web development and real-time applications significantly. Happy coding!