使用Webrtc和React Js在网络上共享跨平台的点对点文件

const express = require("express");  const http = require("http");  const app = express();  const server = http.createServer(app);  const socket = require("socket.io");  const io = socket(server);  const users = {};  const socketToRoom = {};  
  io.on('connection', socket => {      socket.on("join room", roomID => {          if (users[roomID]) {              const length = users[roomID].length;              if (length === 2) {                  socket.emit("room full");                  return;              }              users[roomID].push(socket.id);          } else {              users[roomID] = [socket.id];          }          socketToRoom[socket.id] = roomID;          const usersInThisRoom = users[roomID].filter(id => id !== socket.id);  
          socket.emit("all users", usersInThisRoom);      });  
      socket.on("sending signal", payload => {          io.to(payload.userToSignal).emit('user joined', { signal: payload.signal, callerID: payload.callerID });      });  
      socket.on("returning signal", payload => {          io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: socket.id });      });  
      socket.on('disconnect', () => {          const roomID = socketToRoom[socket.id];          let room = users[roomID];          if (room) {              room = room.filter(id => id !== socket.id);              users[roomID] = room;              socket.broadcast.emit('user left', socket.id);          }      });  });  
  server.listen(process.env.PORT || 8000, () => console.log('server is running on port 8000'));

import React, { useEffect, useRef, useState } from "react";import io from "socket.io-client";import Peer from "simple-peer";import styled from "styled-components";import streamSaver from "streamsaver";
const Container = styled.div`    padding: 20px;    display: flex;    height: 100vh;    width: 90%;    margin: auto;    flex-wrap: wrap;`;
const worker = new Worker("../worker.js");
const Room = (props) => {    const [connectionEstablished, setConnection] = useState(false);    const [file, setFile] = useState();    const [gotFile, setGotFile] = useState(false);
    const chunksRef = useRef([]);    const socketRef = useRef();    const peersRef = useRef([]);    const peerRef = useRef();    const fileNameRef = useRef("");
    const roomID = props.match.params.roomID;
    useEffect(() => {        socketRef.current = io.connect("/");        socketRef.current.emit("join room", roomID);        socketRef.current.on("all users", users => {            peerRef.current = createPeer(users[0], socketRef.current.id);        });
        socketRef.current.on("user joined", payload => {            peerRef.current = addPeer(payload.signal, payload.callerID);        });
        socketRef.current.on("receiving returned signal", payload => {            peerRef.current.signal(payload.signal);            setConnection(true);        });
        socketRef.current.on("room full", () => {            alert("room is full");        })
    }, []);
    function createPeer(userToSignal, callerID) {        const peer = new Peer({            initiator: true,            trickle: false,        });
        peer.on("signal", signal => {            socketRef.current.emit("sending signal", { userToSignal, callerID, signal });        });
        peer.on("data", handleReceivingData);
        return peer;    }
    function addPeer(incomingSignal, callerID) {        const peer = new Peer({            initiator: false,            trickle: false,        });
        peer.on("signal", signal => {            socketRef.current.emit("returning signal", { signal, callerID });        });
        peer.on("data", handleReceivingData);
        peer.signal(incomingSignal);        setConnection(true);        return peer;    }
    function handleReceivingData(data) {        if (data.toString().includes("done")) {            setGotFile(true);            const parsed = JSON.parse(data);            fileNameRef.current = parsed.fileName;        } else {            worker.postMessage(data);        }    }
    function download() {        setGotFile(false);        worker.postMessage("download");        worker.addEventListener("message", event => {            const stream = event.data.stream();            const fileStream = streamSaver.createWriteStream(fileNameRef.current);            stream.pipeTo(fileStream);        })    }
    function selectFile(e) {        setFile(e.target.files[0]);    }
    function sendFile() {        const peer = peerRef.current;        const stream = file.stream();        const reader = stream.getReader();
        reader.read().then(obj => {            handlereading(obj.done, obj.value);        });
        function handlereading(done, value) {            if (done) {                peer.write(JSON.stringify({ done: true, fileName: file.name }));                return;            }
            peer.write(value);            reader.read().then(obj => {                handlereading(obj.done, obj.value);            })        }
    }
    let body;    if (connectionEstablished) {        body = (            <div>                <input onChange={selectFile} type="file" />                <button onClick={sendFile}>Send file</button>            </div>        );    } else {        body = (            <h1>Once you have a peer connection, you will be able to share files</h1>        );    }

    let downloadPrompt;    if (gotFile) {        downloadPrompt = (            <div>                <span>You have received a file. Would you like to download the file?</span>                <button onClick={download}>Yes</button>            </div>        );    }
    return (        <Container>            {body}            {downloadPrompt}        </Container>    );};
export default Room;

let array = [];self.addEventListener("message", event => {    if (event.data === "download") {        const blob = new Blob(array);        self.postMessage(blob);        array = [];    } else if (event.data === "abort") {        array = [];    } else {        array.push(event.data);    }})