662 讀數

如何使用 Dyte 和 ReactJs 构建实时代码共享平台

经过 Vishal Pratap Singh15m2023/04/24

太長; 讀書

在本教程结束时，我们将创建一个“实时代码共享平台”，允许用户共享代码并进行视频和音频通话。 🎉💻🥳

featured image - 如何使用 Dyte 和 ReactJs 构建实时代码共享平台

代码共享是编程的一个重要方面。

随着远程工作和虚拟协作的兴起，开发人员需要可靠的代码共享工具来提供实时通信、视频和音频会议以及友好的用户界面。 Codeshare.io就是这样一个例子。

但今天，我们要卷起袖子，使用Dyte.io构建我们自己的代码共享游乐场。系好安全带！ 🎢 Dyte 是一个对开发人员友好的平台，它提供强大的 SDK 以在我们的产品中构建实时体验。在此博客中，我们将带您完成使用 Dyte.io 和 ReactJs 构建代码共享平台的过程。开始吧！ 🏃

第 0 步：设置 Dyte 帐户

首先，我们需要设置一个 Dyte 帐户。为此，首先访问 Dyte.io，然后点击开始构建。在下一页上，使用 Google 或 GitHub 帐户登录以获取您的免费 Dyte 帐户 🎉。您将在左侧边栏的 API 密钥选项卡下找到您的 API 密钥。确保您的 API 密钥安全，不要与任何人共享。

第 1 步：设置环境

在我们深入编码之前再打一个检查点。

我们将使用 Node.js（一种流行的 JavaScript 运行时环境）和 create-react-app（一种使用预配置设置生成 React 项目的工具）。

首先，我们将创建三个文件夹client 、 server和plugin 。

注意：🧑‍💻 如果您使用的是 Mac，您应该在系统设置中关闭“AirPlay Receiver”，因为它默认占用端口 5000。

仅供参考，这就是本博客末尾的final folder structure 。

我们将继续使用下面的命令安装Dyte CLI。

 $ npm install -g @dytesdk/cli

继续授权部分并使用以下命令选择组织。

 $ dyte auth login $ dyte auth org

有关详细信息，请访问Dyte CLI 文档。

第 2 步：设置新的自定义插件

要开始构建自定义 Dyte 插件，我们将使用以下命令克隆Dyte Plugin Template 。插件模板让我们可以更快上手。

 $ git clone https://github.com/dyte-in/react-plugin-template.git

该模板使用@dytesdk/plugin-sdk并允许我们创建自己的实时插件，与 Dyte 会议无缝协作。它有很多有趣的功能可以帮助我们在几分钟内解决复杂的问题。现在，我们将使用“npm install”命令安装依赖项。

 $ npm install

接下来，我们将通过运行以下命令添加几个依赖项。

 $ npm i @uiw/react-codemirror @codemirror/lang-javascript uuid

在这里，我们添加了react-codemirror ，它提供了一个带有语言支持的预构建代码编辑器。我们还安装了 UUID，这将帮助我们通过函数调用生成 UUID。这很快就会派上用场。

现在我们已经设置好了所有内容，我们可以使用此命令来启动和测试我们的自定义插件设置。

 $ npm start

第 3 步：试用我们的新自定义插件

要尝试使用我们新的自定义插件，我们必须访问http://staging.dyte.io

在这里，系统会提示我们创建一个新会议。非常简单，只需添加您的姓名和会议名称，然后点击Create 。在下一页上，它会要求您join会议。点击加入，你就进去了。

在右下角找到Plugins按钮，然后单击它以显示所有现有插件。我们对名为的插件感兴趣，点击launch它会在会议中显示您的插件🤯。

我们已经准备好了一切。现在，我们可以开始编写一些实际代码了！

让我们从我们的代码编辑器组件开始。

第 4 步：创建我们的代码编辑器

让我们开始创建我们自己的代码编辑器🧑‍💻。

为此，我们将首先创建一个组件，然后使用我们之前安装的CodeMirror包。首先，在src/containers中名为CodeEditor.js文件中创建一个新的React Functional Component ，并粘贴以下代码。

 <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]}/>

CodeMirror 组件提供了一个预建的代码编辑器。它带有各种语法突出显示功能。

第 5 步：处理代码更改

为了处理实时代码更改，让我们首先创建一个名为code的新状态

import { useEffect, useState, useRef } from "react"; const [code, setCode] = useState("function add(a, b) { return a + b;}");

现在，我们将创建一个handleCodeChange函数，只要使用plugin.emit()函数在CodeMirror中的代码发生更改，它就会发出事件。

在这里，我们正在发射一个具有两个属性的对象。第一个是随机生成的user id ，第二个是我们的整个代码。

 import { useEffect, useState, useRef } from "react"; import CodeMirror from '@uiw/react-codemirror'; import { javascript } from '@codemirror/lang-javascript'; const CodeEditor = ({ plugin }) => { const [code, setCode] = useState("function add(a, b) {return a + b;}"); const [userId, setUserId] = useState() const handleCodeChange = async (code) => { plugin.emit(`CODE_CHANGE`, { code, user }) } return ( <> <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]} /> </> ); } export default CodeEditor;

第 6 步：监听代码更改事件

当其他人更改代码时，我们需要监听事件。为此，我们将使用plugin.on()函数，如下所示。该函数接受event name作为参数并接收代码更改。

这里要注意的另一件事是，只有当它是由其他用户发送时，我们才必须更新我们当前的代码。为此，我们需要放置一个简单的条件语句if(data.user != userId){}

 import { useEffect, useState, useRef } from "react"; import CodeMirror from '@uiw/react-codemirror'; import { javascript } from '@codemirror/lang-javascript'; import {v4} from 'uuid'; const user = v4() const CodeEditor = ({ plugin }) => { const [code, setCode] = useState("function add(a, b) {\n return a + b;\n}"); const [userId, setUserId] = useState() useEffect(() => { if (plugin) { const startListening = async () => { plugin.on(`CODE_CHANGE`, (data) => { if(data.user != user) { setCode(data.code) } }); } startListening() } }, [plugin]) const handleCodeChange = async (code) => { plugin.emit(`CODE_CHANGE`, { code, user }) } return ( <> <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]} /> </> ); } export default CodeEditor;

在这个组件中，我们使用 CodeMirror 创建一个代码编辑器。使用plugin.emit()函数调用，对编辑器的任何更改都会向会议中的所有用户发出一个事件CODE_CHANGE 。 emit函数将eventName和data作为参数。

在下一步中，我们需要将 CodeEditor 组件导入到Main.tsx文件中。您的文件应如下所示。 👇

 import { useDytePlugin } from '../context' import CodeEditor from './CodeEditor'; const Main = () => { const plugin = useDytePlugin(); return ( <div style={{ height: "100%" }}> <CodeEditor plugin={plugin} /> </div> ) } export default Main

我们的“协作代码编辑器插件”的代码 😉 现已准备就绪。没有代码编辑器，第一个代码编辑器是怎么写出来的😂？开个玩笑，我们已经准备好我们的插件 🎉。

要结帐，请打开staging.dyte.io并继续操作。输入您的姓名和会议标题以加入会议。点击加入会议。打开Localhost Dev插件，一切顺利。

第 7 步：发布我们的组件

🧑‍💻 现在，是时候发布我们的内容了，这是一个使用Dyte CLI的简单过程。为此，我们必须首先构建我们的插件，然后运行dyte plugins publish命令。

 $ dyte plugins create $ npm run build $ cp dyte-config.json ./build/dyte-config.json $ cd build $ dyte plugins publish

第 8 步：开始使用我们的代码共享平台

现在我们已经构建了有助于我们在代码上进行协作的插件，我们可以开始构建使用该插件的平台。

让我们从客户端开始。在client文件夹中，我们将使用create-react-app设置一个新的ReactJS项目，并使用以下命令创建我们的 React 应用程序。

 $ npx create-react-app .

接下来，让我们通过运行以下命令来安装Dyte和code-editor的依赖项：

 $ npm i @dytesdk/react-ui-kit @dytesdk/react-web-core react-simple-code-editor

🎬 现在，让我们使用 npm start 启动我们的开发服务器：

 $ npm start

第 9 步：构建布局

让我们打开src文件夹中的app.js文件。我们将删除此文件的内容并添加以下代码片段👇。

 import Layout from './components/Layout' function App() { return ( <Layout /> ); } export default App;

接下来，我们将编写Layout组件，我们将使用我们的徽标、标题和会议 UI 创建布局。

我们将使用多个库（包括DyteMeeting和 PrismJS）来构建协作代码编辑器和会议 UI。

 import Meet from "./Meeting" const Layout = () => { return ( <> <div style={{ padding: "30px", display: "flex", justifyContent: "space-between", alignItems: "center" }}> <img src="https://dyte.io/blog/content/images/2021/09/Dyte-Logo.svg" height={"70px"}/> <span style={{ fontSize: "30px", color: "#3e75fd" }}>Collaborative Code Editor</span> <img style={{ opacity: "0"}} src="https://dyte.io/blog/content/images/2021/09/Dyte-Logo.svg" height={"80px"}/> </div> <div style={{ height: "88vh" }} ><Meet /></div> </> ) } export default Layout

第 10 步：会议组件

🧑‍💻 首先，我们需要在文件client/src/utils/api.js中创建一些实用函数

const createMeeting = async () => { const resp = await fetch("http://localhost:3000/meetings", { method: "POST", body: JSON.stringify({ title: "New Code pair" }), headers: { "Content-Type": "application/json" } }) const data = await resp.json() console.log(data) return data.data.id; } const joinMeeting = async (id) => { const resp = await fetch(`http://localhost:3000/meetings/${id}/participants`, { method: "POST", body: JSON.stringify({ name: "new user", preset_name: "group_call_host" }), headers: { "Content-Type": "application/json" } }) const data = await resp.json() console.log(data) return data.data.token; } export { createMeeting, joinMeeting }

这些功能与我们的后端对话以创建会议和添加参与者。对于会议创建，我们将title作为可选参数传递。

为了添加参与者，我们将name参数（可选）、 picture参数（可选）和preset_name参数（必需）与meetingId一起传递。

我们的会议组件的时间。为此，我们将使用 Dyte UI 工具包 ✨，它可以非常轻松地将实时音频/视频共享集成到您的应用程序中。是的，这 10-15 行代码完成了所有繁重的工作🏋🏼‍♂️。

 import { useState, useEffect, useRef } from "react"; import { DyteMeeting, provideDyteDesignSystem } from "@dytesdk/react-ui-kit"; import { useDyteClient } from "@dytesdk/react-web-core"; import { createMeeting, joinMeeting } from "../utils/api"; const Meet = () => { const meetingEl = useRef(); const [meeting, initMeeting] = useDyteClient(); const [userToken, setUserToken] = useState(); const [meetingId, setMeetingId] = useState(); const createMeetingId = async () => { const newMeetingId = await createMeeting(); setMeetingId(newMeetingId); }; useEffect(() => { const id = window.location.pathname.split("/")[2]; if (!id) { createMeetingId(); } else { setMeetingId(id); } }, []); const joinMeetingId = async () => { if (meetingId) { const authToken = await joinMeeting(meetingId); await initMeeting({ authToken, modules: { plugin: true, devTools: { logs: true, plugins: [ { name: "Collaborative-code-editor", port: "5000", id: "<your-plugin-id>", }, ], }, }, }); setUserToken(authToken); } }; useEffect(() => { if (meetingId && !userToken) joinMeetingId(); }, [meetingId]); useEffect(() => { if (userToken) { provideDyteDesignSystem(meetingEl.current, { theme: "dark", }); } }, [userToken]); return ( <> {userToken && meetingId ? ( <DyteMeeting mode="fill" meeting={meeting} ref={meetingEl} /> ) : ( <div>Loading...</div> )} </> ); }; export default Meet;

我们现在已经准备好代码共享平台的 UI 🎉

第 11 步：准备好后端

🧑‍💻 Dyte提供了多种强大的API，提升开发者体验，满足广泛的开发者需求。

我们可以管理 Dyte 的组织、会议、会议、录音、webhook、直播、分析等等。

为了简化流程，我们将使用 Express with Node 创建一个后端，这将有助于身份验证、会议创建和添加参与者。 ✨

要在项目文件夹中开始，请按照以下步骤操作：

 $ mkdir server && cd server

我们将从安装几个依赖项开始，cd 进入“服务器”目录，然后使用以下命令。

 $ npm init -y $ npm install express cors axios dotenv $ npm install -g nodemon

首先，让我们创建一个.env文件来将我们的 API 密钥存储在server/src中。您可以在 Dyte Dashboard 上找到这些密钥。

 DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY>

我们还添加一些脚本 ✍️ 来帮助我们运行我们的server应用程序。在您的package.json文件中的scripts标签内添加以下行。

 "start": "node dist/index.js", "dev": "nodemon src/index.js"

现在让我们创建我们的文件和文件夹。我们所有的代码都将位于server/src文件夹中。在src中创建另一个文件夹utils 。

在src中初始化文件index.js ，在utils中初始化dyte-api.js 。现在让我们在src中添加我们的.env文件，它将保存我们的 API 机密。

打开src/.env文件并向其中添加以下行。将占位符值替换为来自 Dyte 仪表板的 API 机密。

 DYTE_ORG_ID=<YOUR-DYTE-ORG-ID> DYTE_API_KEY=<YOUR-DYTE-API-KEY>

我们现在可以开始编写代码了。让我们从创建用于访问 Dyte API 的axios配置开始。

打开utils/dyte-api.js并输入以下代码。

此代码将有助于与 Dyte API 和身份验证进行通信。

 const axios = require('axios'); require('dotenv').config(); const DYTE_API_KEY = process.env.DYTE_API_KEY; const DYTE_ORG_ID = process.env.DYTE_ORG_ID; const API_HASH = Buffer.from( `${DYTE_ORG_ID}:${DYTE_API_KEY}`, 'utf-8' ).toString('base64'); const DyteAPI = axios.create({ baseURL: 'https://api.cluster.dyte.in/v2', headers: { Authorization: `Basic ${API_HASH}`, }, }); module.exports = DyteAPI;

接下来，我们将编写路由。

我们的前端将在这些路由上进行通信以创建会议并将参与者添加到会议中。

让我们打开index.js并添加以下代码片段。👇

 const express = require('express'); const cors = require('cors'); const DyteAPI = require('./utils/dyte-api') const PORT = process.env.PORT || 3000; const app = express(); app.use(cors("http://localhost:3001")); app.use(express.json()); app.post('/meetings', async (req, res) => { const { title } = req.body const response = await DyteAPI.post('/meetings', { title, }); return res.status(response.status).json(response.data); }); app.post('/meetings/:meetingId/participants', async (req, res) => { const meetingId = req.params.meetingId const { name, picture, preset_name } = req.body const client_specific_id = `react-samples::${name.replaceAll(' ', '-')}-${Math.random().toString(36).substring(2, 7)}`; const response = await DyteAPI.post(`/meetings/${meetingId}/participants`, { name, picture, preset_name, client_specific_id, }); return res.status(response.status).json(response.data); }); app.listen(PORT, () => { console.log(`Started listening on ${PORT}...`) });

哒哒！ 🎩✨ 我们做到了！

现在，我们终于可以尝试我们的代码共享平台，以便在与我们的朋友和队友编码时进行协作。

有了我们闪亮的新代码编辑器和 Dyte 满足所有设置，我们终于可以试用我们的平台了！