使用 Node.js、React 和 Websocket 构建看板

这篇文章是关于什么的？

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

.GIF

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

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

.GIF
我们还将在Hacktoberfest 期间发送一些很棒的赃物

什么是 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

//

                                                        
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/292063.html