使用 React 和 Node.js 构建简单的语音通话应用程序：分步指南

随着基于语音的通信的日益普及和先进技术的可用性，现在只需几行代码就可以构建语音呼叫应用程序。在本教程中，我们将使用 React 和 Node.js 构建一个简单的语音通话应用程序。

前提条件

在开始之前，请确保您已安装以下工具：

• Node.js：这是一个 JavaScript 运行时，允许您在服务器上运行 JavaScript。您可以从官方网站下载最新版本的 Node.js。
• React：这是一个用于构建用户界面的 JavaScript 库。您可以在官方网站上了解有关 React 的更多信息以及如何设置它。
• npm：这是 Node.js 的包管理器，允许您为项目安装和管理包（库和框架）。npm 包含在 Node.js 中，因此您不需要单独安装它。

创建服务器

构建我们的语音呼叫应用程序的第一步是设置服务器。我们将使用 Node.js 和 Express 框架来构建服务器。

1. 为您的项目创建一个新文件夹并在您的终端中导航到它。
2. 通过运行以下命令初始化项目

npm init -y

package.json这将在您的项目文件夹中创建一个文件。

3. 通过运行以下命令安装依赖项：

npm install express --save

这将安装 Express 框架并将其作为依赖项保存在您的package.json文件中。

4. 创建一个名为的新文件server.js并添加以下代码：

const express = require('express');
const app = express();

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

此代码设置服务器并侦听端口 3000 上的传入连接。

5. 通过在终端中键入以下命令来运行服务器：

node server.js

您应该在终端中看到消息“服务器侦听端口 3000”。

创建 React 应用程序

现在我们已经设置了服务器，让我们创建将用于拨打和接听语音电话的 React 应用程序。

6. 通过运行以下命令安装依赖项：

npm install react react-dom --save

这将安装 React 和 ReactDOM 库并将它们作为依赖项保存在您的package.json文件中。

7. 通过运行以下命令安装 create-react-app 工具：

npm install -g create -react-app

这将允许您使用单个命令创建一个新的 React 应用程序。

8. 通过运行以下命令创建一个新的 React 应用程序：

create-react-app client

这将创建一个名为clientReact 应用程序所需文件的新文件夹。

9.通过运行以下命令导航到该文件夹​​：

cd client

10. 通过在终端中键入以下命令来运行 React 应用程序：

nnpm start

集成 WebRTC

现在我们已经设置了服务器和 React 应用程序，让我们集成 WebRTC（Web 实时通信）以启用语音通话。WebRTC 是一种允许 Web 浏览器和设备之间进行实时通信的技术。

1. simple-peer通过运行以下命令安装库：

npm install simple-peer --save

这个库通过提供一个简单的 API 简化了 WebRTC 的实现。

2. 在您的server.js文件中，添加以下代码以导入simple-peer库并创建新的对等连接：

const  SimplePeer = require ( 'simple-peer' );

app.get('/peer', (req, res) => { 
  const peer = new SimplePeer({ initiator: true }); 
});

此代码创建一个名为的新路由，该路由/peer在被访问时创建一个新的对等连接。该initiator选项设置为true，这意味着此对等方将发起连接。

3. 在您的client文件夹中，打开src/App.js文件并导入simple-peer库：

 import SimplePeer from 'simple-peer';

4.在组件中添加一个发起调用的按钮App：

< button  onClick = {this.initiateCall} >发起呼叫</ button >

5.initiateCall给组件添加功能App：

initiateCall = () => {
  fetch('/peer')
    .then(res => res.json())
    .then(data => {
      const peer = new SimplePeer({ initiator: false });
    });
};

此函数向服务器上的路由发送请求，/peer并创建一个新的对等连接，并将initiator选项设置为false。这意味着这个对等点不会发起连接，而是等待另一个对等点发起连接。

6. 在组件中添加以下代码来App处理连接和数据交换：

peer.on('signal', data => {
  // Send the signal data to the other peer
});

peer.on('data', data => { 
  // 处理接收到的数据
});peer.on('connect', () => { 
  // 连接已经建立
});peer.on('close', () => { 
  // 连接已经关闭
});

signal当对等连接需要与另一个对等点交换信令数据时，会发出该事件。data当从另一个对等方接收到数据时，将发出该事件。建立connect连接时触发close事件，关闭连接时触发事件。

7. 在initiateCall函数中，使用以下代码将信号数据发送到其他对等点：

peer.signal(data);

这会将信号数据发送到另一个对等点，然后用它来建立连接。

8. 通过运行服务器和 React 应用程序并单击其中一台设备上的“发起呼叫”按钮来测试语音呼叫应用程序。您应该能够发出和接收声音

添加音频流

现在我们已经有了语音通话应用程序的基本结构，让我们添加音频流以启用实时音频通信。

1. 在您的文件中，从库server.js中导入getUserMedia方法：simple-peer

const { getUserMedia } = require ( 'simple-peer' );

2.在获取用户音频流的路由中添加如下代码：

getUserMedia ({ audio : true , video : false }, ( err, stream ) => { 
  if (err) { 
    console . error (err); 
    return ; 
  }

  // 将音频流发送给另一个对等点
});

这将获取用户的音频流并将其传递给回调函数。如果发生错误，它将被记录到控制台。

3.在组件中，从库App中导入useEffect

import { useEffect } from 'react';

4.在App获取用户音频流的组件中添加如下代码，并添加到对端连接中：

useEffect ( () => { 
  getUserMedia ({ audio : true , video : false }, ( err, stream ) => { 
    if (err) { 
      console . error (err); 
      return ; 
    }

     peer.addStream(stream);
  });
}, []);

这将useEffect在组件安装时使用挂钩获取用户的音频流并将其添加到对等连接。

5. 在App组件中，添加如下代码，播放对方的音频流：

peer.on('stream', stream => {
  const audioElement = new Audio();
  audioElement.srcObject = stream;
  audioElement.play();
});

这将创建一个新Audio元素并将其设置srcObject为来自其他对等点的音频流。然后将自动播放音频。

6. 再次测试语音通话应用程序，确保您可以听到对方的声音。

至此您已经使用 React 和 Node.js 成功创建了一个简单的语音通话应用程序。您现在可以以此为起点，构建具有视频支持、多连接等附加功能的更高级的语音呼叫应用程序。

相关阅读推荐：

《android语音通话开发，基于即构语音SDK快速实现音频通话》