在 ReactJS 中实现 WebRTC

由于 WebRTC 默认存在于每个浏览器中，因此无需在 ReactJs 中安装任何软件包。我们将在 NodeJS 和 ReactJS 中使用 SocketIO 库进行通信。

在本文中，我们将制作一个 Zoom 克隆应用程序，用于点对点通信，其中用户可以创建一个会议室，另一个用户可以通过 ID 加入该会议室。

在 ReactJS 中实现 WebRTC

由于 WebRTC 需要服务器和客户端，因此预先要求在服务器端安装 socket.io，在客户端安装 socket.io-client。

首先，让我们看看服务器的实现，打开 index.jsx 文件，从 socket.io 中导入服务器，并为服务器提供端口号，以便在该端口上运行连接初始化。

您可以从文档中找到这段简单的代码，服务器初始化。

const { Server } = require('socket.io')

const io = new Server(3050, {
  cors: true
}) //server will run on this port

io.on('connection', (socket) => {
  console.log('Socket connected', socket.id)
})

现在，让我们从客户端部分开始。为了导航到另一个页面，我们使用了 “react-router-dom “包。

为等候屏幕创建一个组件，其中包括一个加入房间的表单。

创建 WaitingScreen 后，在客户端创建一个 Socket 上下文。

|- src
  |- context
    |- SocketContext
    |- SocketProvider

现在，在 index.js 文件中用 SocketProvider 将组件封装起来，然后再次启动服务器，就能看到类似这样的内容，你会得到一个 20 个字符的字符串，这就是我们的 socket.id，这个标识符是唯一的，它会在用户刷新页面后发生变化。

现在，为server编写加入房间的逻辑，当用户提交表单时，将数据传递给服务器。

const { Server } = require('socket.io')

const io = new Server(3050, {
    cors: true
})

const emailToSocketId = new Map()
const socketIdToEmail = new Map()

io.on('connection', (socket) => {
    console.log('Socket Connected :>> ', socket.id);

    socket.on('join:room', (data) => {
        emailToSocketId.set(data?.email, socket.id)
        socketIdToEmail.set(socket.id, data?.email)

        io.to(socket.id).emit('join:room', data) //send back to user for acknowledge that now you can join the room
    })
})

参考 Piyush Garg WebRTC YouTube 视频：https://youtu.be/2C1E-AkCjNg