这篇文章是关于什么的？
在本文中，您将学习如何构建与JIRA，Monday和Trello相同的看板。我们将使用 React、Socket.io 和 React 漂亮的 DND 使用漂亮的拖放功能来做到这一点。用户将能够登录、创建和更新各种任务以及添加注释。
Novu – 第一个开源通知基础架构
只是关于我们的快速背景。Novu 是第一个开源通知基础架构。我们基本上帮助管理所有产品通知。它可以是应用内（类似于开发人员社区中的铃铛图标 – Websockets），电子邮件，短信等。
我们还将在Hacktoberfest 期间发送一些很棒的赃物
什么是 Socket.io？
Socket.io 是一个流行的 JavaScript 库，它允许我们在 Web 浏览器和 Node.js 服务器之间创建实时、双向通信。它是一个高性能且可靠的库，经过优化，能够以最小的延迟处理大量数据。它遵循 WebSocket 协议并提供更好的功能，例如回退到 HTTP 长轮询或自动重新连接，这使我们能够构建高效的实时应用程序。
如何与 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
//
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/292063.html