PubNub, React.js 및 ES6를 사용하여 협업을 촉진하는 웹 애플리케이션 만들기
- 王林원래의
- 2023-08-30 13:05:011278검색
이전 튜토리얼에서는 PubNub의 데이터 흐름 네트워크를 사용하여 IoT 장치를 프로토타입하고 하드웨어 센서에서 데이터 시각화를 만드는 방법을 시연했습니다. 이 튜토리얼에서는 DOM을 매우 효율적으로 조작할 수 있는 React.js와 차세대 JavaScript인 ES6와 함께 PubNub을 사용하여 실시간 협업 웹 애플리케이션을 구축하는 방법을 보여 드리겠습니다.
라이브 데모: 협업 스티커 메모
저는 동일한 Stickie Note 앱의 두 가지 버전을 만들었습니다. 하나는 CDN 호스팅 React 버전을 사용하여 CodePen에서 호스팅한 버전이고 다른 하나는 패키지 관리자를 사용하여 GitHub에서 호스팅한 버전입니다. 이 튜토리얼에서는 후자의 "라이트" 버전을 사용하고 있습니다. npm, webpack, JSX용 Babel, ES6 등 모든 기능을 사용하여 앱을 빌드하는 방법을 안내해 드리겠습니다.
전제조건
계속 진행하려면 다음이 필요합니다.
-
<li>React에 대한 기본 이해
<li>종속성 다운로드, 설치 및 관리를 위한 npm 패키지 관리자에 대해 알아보세요
<li>브라우저용 JavaScript 및 기타 리소스를 번들로 묶기 위한 webpack 모듈 빌더에 대한 실무 지식을 얻으세요(grunt 또는 gulp와 유사하게 작동함)
<li> 컴퓨터에 Node.js와 npm이 설치되어 있습니다
이 튜토리얼에서는 React 사용을 시작하는 방법을 다루지 않습니다. 그러나 다른 많은 훌륭한 Envato Tuts+ 튜토리얼에서 더 많은 것을 배울 수 있습니다.
무엇을 할 예정인가요
이제 PubNub을 사용하여 간단한 웹 애플리케이션을 구축해 보겠습니다. PubNub은 실시간 애플리케이션과 IoT 장치를 쉽게 구축하고 확장할 수 있는 글로벌 인프라를 제공하는 데이터 스트리밍 네트워크(DSN)입니다. 여기에서는 공유 가능한 "스티커 메모"를 만듭니다. 앱의 사용자 흐름은 다음과 같습니다.
-
<li>사용자 로그인.
<li>사용자가 이름을 입력하면 앱은 마지막 50개의 메모를 검색합니다(사용 가능한 경우).
<li>사용자가 노트보드에 내용을 입력한 후 Enter 키를 눌러 제출합니다.
<li>새 스티커 메모는 브라우저 및 현재 온라인에 있는 다른 모든 브라우저에 다른 스티커 메모와 함께 표시됩니다.
자, 시작해 보세요!
소프트웨어 패키지 설치
앱 디렉터리에서 npm init를 실행하여 package.json 파일을 설정한 다음 모듈을 설치합니다.
프런트엔드용 정적 리소스를 컴파일, 연결, 축소 및 압축하는 webpack 모듈 빌더를 설치하세요.
$ npm install webpack --save-dev
로컬 서버를 실행하려면 웹팩 웹 서버를 설치하세요:
$ npm install webpack-dev-server --save-dev
React, React DOM 및 CSS 애니메이션 추가 기능 설치:
$ npm install React React-dom React-addons-css-transition-group --save
JSX와 ES6을 사용하려면 Babel을 설치하세요. 우리는 컴파일러 Babel의 도움을 받아 차세대 JavaScript인 ES6(ES 2015)으로 작성할 것입니다.
$ sudo npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save
실시간 커뮤니케이션을 위해 PubNub 설치:
$ npm install pubnub --save
애플리케이션 구조 및 웹 서버 구성<code class="inline"><p></p>
다음과 유사한 애플리케이션 구조를 만듭니다.
으아아아 및 webpack.config.js
구성:으아아아
이 GitHub 저장소에서 전체 구성 파일을 확인하세요.
watch: true기본적으로 진입점 파일(최상위 파일)과 출력 대상을 설정하고, webpack 명령을 실행하면 모든 js(및 .jsx) 파일이 단일 파일로 빌드됩니다. 또한
index.html 파일 만들기
index.html 파일에 bundle.js
스크립트를 포함하세요.
으아아아
id=”container”또한 본문에
Webpack 개발 서버 실행
다음 명령을 사용하여 개발 서버를 실행할 수 있습니다:
$ ./node_modules/.bin/webpack-dev-server
또는 다음 줄을 추가하여 package.json에 설정할 수도 있습니다.
으아아아
npm start이 방법으로
브라우저에서 http://localhost:8080/webpack-dev-server/로 이동하면 애플리케이션(지금까지는 빈 HTML 페이지)이 실행되는 것을 볼 수 있습니다.
p>
ES6을 사용하여 React 구성 요소 만들기
webpack.config.js에서 구성한 진입점을 기반으로 애플리케이션 디렉터리에서 새 app.jsx
파일을 엽니다. 파일 확장자에서 알 수 있듯이 JSX JavaScript 구문 확장을 사용합니다. 🎜首先，导入 app.jsx 所需的模块和文件：
import React from 'react'; import ReactDOM from 'react-dom'; import StickieList from './stickieList'; import 'pubnub';
ES6 中新引入的 import 语句用于导入从外部模块或脚本导出的函数、对象或基元。
然后使用此 ES6 类声明定义一个类 CollabStickies，它扩展了 React.Component 类。这相当于 ES5 中的 React.createClass 方法：
class CollabStickies extends React.Component {
constructor(props) {
super(props);
this.state = {
stickieList: []
}
}
componentWillMount() {
… // will explain later
}
...
render() {
return (
<div>
<StickieWritable username={this.props.username} color={this.props.color} />
<StickieList stickieList={this.state.stickieList} />
</div>
);
}
}
在构造函数中，您将设置此可变数据（stickieList 数组）的初始状态。每次收到新的便笺时，我们都会使用 this.setState() 更新数组。
在渲染函数中，使用 JSX 定义类似 HTML 模板的虚拟 DOM 元素。在本例中，包含自定义组件 StickieWritable 和 StickieList。您可以将可变的 props 和 states 传递给要使用的组件。我们稍后将定义它们。
当你构建应用程序时，Babel 会将所有这些 ES6 和 JSX 语法转换为浏览器可以正常渲染的 ES5。
使用数据绑定渲染 DOM 节点
使用 ReactDOM.render()（react-dom 包自带的），在 DOM 节点上渲染 CollabStickies 组件您的 HTML。
ReactDOM.render(
<CollabStickies username={username} color={color} />,
document.getElementById('container')
);
在这里，您会注意到用户名和颜色 props。此数据用于 CollabStickies 组件并传递给其子组件。
这些值应该从用户登录中获取；但是，为了简化本练习的应用程序，我们只需使用一个简单的 window.prompt() 来获取用户名，然后在加载应用程序时提供随机颜色的便笺。
var username = window.prompt('Your name');
const colors = ['yellow', 'pink', 'green', 'blue', 'purple'];
var color = colors[~~(Math.random() * colors.length)];
虽然我在这里使用的是浏览器原生的提示对话框，但实际上，我建议您创建另一个具有登录功能的 UI 组件，或者使用第三方对话框组件。您可以找到许多可重用的组件，例如 Elemental UI 的 Modal 和 Material UI 的 Dialog。
使用 PubNub 进行协作
现在，您将使用 PubNub 使应用程序具有协作性。
PubNub 是一个全球分布式数据流网络，可让您轻松构建实时应用程序。其核心功能是发布/订阅，可同时在多个用户之间发送和接收数据。
在此应用程序中，任何“登录”的人都可以在便签上发布消息并与其他用户共享。
要在您的应用中使用 PubNub，请确保 pubnub 模块已安装并导入到您的文件顶部。
正在初始化 PubNub
首先，您需要对其进行初始化以创建 Pubnub 对象的实例。您在实例化过程中需要 API 密钥，因此请注册 PubNub 以获取您自己的密钥。
const publish_key = 'pub-c-1d17120...'; // your pub key
const subscribe_key = 'sub-c-85bdc...'; // your sub key
const pubnub = require('pubnub').init({
publish_key : publish_key,
subscribe_key : subscribe_key,
ssl: true,
uuid: username
});
const channel = 'stickie-notes';
在这里，您将从“登录”过程中获得的用户名分配为 uuid，唯一标识符。 （在本练习中，我们将用户输入的任何字符串作为 uuid，但实际上，您需要一个真正的登录系统，以便每个 uuid 实际上是唯一的，没有重复！）
另外，请注意，对于这些全局常量值，我使用 ES6 const 声明，而不是 var 。在 ES6 中， const 充当只读变量，表示对值的常量引用。在后面的示例中，您还将看到新引入的 let，它是一个块作用域局部变量。
订阅消息
要创建可共享笔记应用程序，您将使用 PubNub 的 publish() 方法将您的笔记发送给每个人，而 subscribe() 让其他用户接收所有笔记。每次有人发布新笔记时，都会自动调用 subscribe() 方法。
在您的 React 应用程序中，让我们在 componentWillMount() 中调用 subscribe()，该函数在应用程序生命周期中发生初始渲染之前立即调用。
componentWillMount() {
pubnub.subscribe({
channel: channel,
restore: true,
connect: () => this.connect(),
message: (m) => this.success(m)
});
}
订阅方法是异步的，当每个操作成功完成时，会调用 message 回调。在回调中，我们通过设置 stickieList 数组的状态来更新便签列表，该数组在开头的构造函数中定义。
在 React 中，使用 setState 修改数据会自动更新视图。
success(m) {
let newList = [m].concat(this.state.stickieList);
this.setState({stickieList: newList});
}
我们稍后将创建视图（UI 组件）。
在订阅回调中，您可能已经注意到带有箭头的有趣语法，=>。这称为箭头函数，其语法比 ES5 函数表达式更短。此外，此表达式按词法绑定 this 值。再次强调，通过 Babel，我们可以利用所有 ES6 的强大功能！
此外，我们还使用可选的 connect 回调到订阅方法来检索“历史记录”。当第一次建立与 PubNub 的连接时，这将获取过去的数据。
connect() {
pubnub.history({
channel: channel,
count: 50,
callback: (m) => {
m[0].reverse();
for (var v of m[0]) {
let newList = this.state.stickieList.concat(v);
this.setState({stickieList: newList});
}
}
});
}
history() 是 PubNub 存储和回放功能的一部分，在本例中，它从 PubNub 获取最后 50 条消息。在 success 回调中，也通过在此处设置 stickieList 数组的状态来更新视图。
发布消息
让我们创建一个类，StickieWritable。它是一个需要用户输入的便签组件。
它的渲染效果如下：
render() {
return (
<div className={'stickie-note writable ' + this.props.color}>
<textarea type='text' placeholder='Your new note...' onKeyUp={this.handleTextChange.bind(this)} />
</div>
);
}
在textarea中，监听onKeyUp事件，每次触发该事件时，调用handleTextChange函数检查是否键是返回/输入键。请注意，我在调用函数时绑定了 this 。与 React.createClass()（React 的 ES5 方法创建类）不同，ES6 类不会自动将方法绑定到对象的实例，因此您需要自己绑定它。 （有几种不同的方法可以实现同一目标。）
在handleTextChange函数中，将文本和用户数据发布到PubNub：
var data = {
username: this.props.username,
color: this.props.color,
text: e.target.value,
timestamp: Date.now()
};
pubnub.publish({
channel: channel,
message: data,
callback: e.target.value = '' // resetting the text field
});
现在，当用户在记事本中键入一些文本并按回车键时，该消息将发送到 PubNub，并且所有其他用户同时接收该消息（在 1/4 秒内！）。
创建 UI 组件
应用程序 UI 由一些 UI 组件组成，如下所示：
1. CollabStickies
2. StickieWritable
3.贴纸
4。粘性列表
组件 1 和 2 已经处理完毕，所以让我们创建组件 3，一个单独的便签组件。
创建一个新文件stickie.jsx以使用 JSX 呈现 UI。与 StickieWritable 组件不同，这是一个只读 UI 组件，没有 UX 功能。它只有一个 render() 函数，可以使用 prop 数据绘制带有文本的便签。
基本上，每次用户从另一个用户收到新消息时，该消息都会在新的粘性组件中呈现。
import React from 'react';
import ReactDOM from 'react-dom';
export default class Stickie extends React.Component {
render() {
return (
<div className={'stickie-note ' + this.props.color} >
<p className='note'>{this.props.text}</p>
<p className='username'>{this.props.username}</p>
</div>
);
}
}
接下来，我们将创建另一个 UI 组件 stickieList.jsx，它是该组件的容器，并包含一堆便签纸。
p>
动画组件
将 Stickie.jsx 和所有其他依赖项导入到 StickieList.jsx 中。在这里，我使用 ReactCSSTransitionGroup 插件和自定义 Web 字体。
import React from 'react'; import ReactDOM from 'react-dom'; import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup'; import Stickie from './stickie'; import webfontloader from 'webfontloader'
您可以使用 npm 安装 Web 字体加载器：
$ npm install webfontloader
然后您可以加载您选择的任何自定义字体。您可以查看源代码，了解如何导入自定义 Google 字体。
在 render() 中，使用 ES6 箭头函数和 map() 迭代数组，并使用 stickieList 进行渲染您刚刚创建的每个 Stickie 组件：
export default class StickieList extends React.Component {
render() {
let items = (this.props.stickieList || []).map((item) =>
<li key={item.username + '-' + item.timestamp} >
<div className="stickieWrapper">
<Stickie text={item.text} color={item.color} username={item.username}/>
</div>
</li>);
return (
<ReactCSSTransitionGroup transitionName='animation' transitionEnterTimeout={500} transitionLeaveTimeout={500} component='ul' id="stickiesList">
{items}
</ReactCSSTransitionGroup>
)
}
}
定义的组件可以使用 <reactcsstransitiongroup></reactcsstransitiongroup> 进行动画处理。设置 transitionName，您需要在 CSS 中使用它来定义动画样式。另外，请注意 <li> 中的关键属性。当您使用 <reactcsstransitiongroup></reactcsstransitiongroup> 时，您需要为每个列表使用唯一的键来为每个组件设置动画。
React 添加了额外的类名。例如，当你的 transitionName 是 'animation' 时，你还会有 'animation-enter', ' Animation-enter-active'、'animation-leave' 和 'animation-leave-active'。
以下是 /css/style.css 中的代码：
.animation-enter {
opacity: 0.1;
transform: scale(1.3);
transition: all 1s ease-out;
}
.animation-enter.animation-enter-active {
opacity: 1;
transform: scale(1);
}
...
现在，您刚刚使用 React 和 PubNub 构建了一个实时协作应用程序！我希望您喜欢本教程！
이 GitHub 저장소에서 CSS를 포함한 전체 코드를 볼 수 있습니다. 이 튜토리얼에서는 "라이트" 버전인 app-lite.jsx를 사용하고 있지만 app.jsx에서 더 많은 기능을 확인할 수 있습니다. p>
채팅 애플리케이션, 멀티플레이어 게임, 거래 애플리케이션 등과 같은 더 많은 실시간 애플리케이션을 구축하는 데 관심이 있다면 PubNub으로 가서 더 많은 리소스를 찾아보세요!
더 많은 반응을 원하시나요?
React 기술을 극대화하는 것을 특별히 목표로 하는 과정이 있습니다. 이 과정에서는 React 및 Redux를 사용하여 최신 웹 애플리케이션 구축을 시작합니다. 처음부터 시작하여 이 두 라이브러리를 사용하여 완전한 웹 애플리케이션을 구축하게 됩니다.
가장 간단한 아키텍처부터 시작하여 기능별로 애플리케이션 기능을 천천히 구축해 보세요. 도구, 감속기, 라우팅과 같은 기본 개념에 대해 배우게 됩니다. 또한 스마트 및 단순 구성 요소, 순수 구성 요소, 비동기 작업과 같은 몇 가지 고급 기술에 대해서도 알아봅니다. 마지막으로 간격을 두고 반복하여 학습할 수 있는 완전한 플래시카드 앱을 만듭니다.
관심이 있으신가요? 보자!
참고자료
-
<li>
PubNub: IoT, 모바일 및 웹 애플리케이션을 위한 글로벌 실시간 데이터 스트리밍 네트워크
<li>
PubNub JavaScript SDK 튜토리얼
<li> React: 사용자 인터페이스 생성을 위한 JavaScript 라이브러리
<li> ES6: ECMAScript 2015 언어 사양
<li> 웹팩: 모듈 생성기
위 내용은 PubNub, React.js 및 ES6를 사용하여 협업을 촉진하는 웹 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!