标签：jira Monday Trello demo 基础架构 数据传输

这篇文章是关于什么的？

在本文中，您将学习如何构建与JIRA，Monday和Trello相同的看板。我们将使用 React、Socket.io 和 React 漂亮的 DND 使用漂亮的拖放功能来做到这一点。用户将能够登录、创建和更新各种任务以及添加注释。

Novu - 第一个开源通知基础架构

只是关于我们的快速背景。Novu 是第一个开源通知基础架构。我们基本上帮助管理所有产品通知。它可以是应用内（类似于开发人员社区中的铃铛图标 - Websockets），电子邮件，短信等。

什么是 Socket.io？

Socket.io 是一个流行的 JavaScript 库，它允许我们在 Web 浏览器和 Node.js 服务器之间创建实时、双向通信。它是一个高性能且可靠的库，经过优化，能够以最小的延迟处理大量数据。它遵循 WebSocket 协议并提供更好的功能，例如回退到 HTTP 长轮询或自动重新连接，这使我们能够构建高效的实时应用程序。.GIF

如何与 Socket.io & React 建立实时连接.js

在这里，我们将为项目设置项目环境。您还将学习如何将 Socket.io 添加到 React 和 Node.js 应用程序中，以及如何连接两个开发服务器，以便通过 Socket.io 进行实时通信。

创建包含名为客户端和服务器的两个子文件夹的项目文件夹。

mkdir todo-list
cd todo-list
mkdir client server

通过终端导航到客户端文件夹并创建一个新的 React.js 项目。

cd client
npx create-react-app ./

安装 Socket.io 客户端 API 和 React Router。React Router 是一个 JavaScript 库，它使我们能够在 React 应用程序中的页面之间导航。

npm install socket.io-client react-router-dom

从 React 应用程序中删除徽标和测试文件等冗余文件，并更新文件以显示 Hello World，如下所示。App.js

function App() {
    return (
        <div>
            <p>Hello World!</p>
        </div>
    );
}
export default App;

导航到服务器文件夹并创建一个文件。package.json

cd server & npm init -y

安装 Express.js、CORS、Nodemon 和 Socket.io Server API。

Express.js 是一个快速、简约的框架，它提供了几个用于在 Node.js 中构建 Web 应用程序的功能。CORS 是一个 Node.js 包，允许不同域之间的通信。

Nodemon 是一个 Node.js 工具，它在检测到文件更改后会自动重新启动服务器，Socket.io 允许我们在服务器上配置实时连接。

npm install express cors nodemon socket.io

创建一个文件 - Web 服务器的入口点。index.js

touch index.js

使用 Express.js 设置一个简单的 Node.js 服务器。下面的代码片段会在您在浏览器中访问 时返回一个 JSON 对象。http://localhost:4000/api

//
 
 
标签：jira,Monday,Trello,demo,基础架构,数据传输	

来源：  


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。