使用 PubNub、React.js 和 ES6 創建促進協作的 Web 應用程式-js教程-PHP中文網

首頁

web前端

js教程

使用 PubNub、React.js 和 ES6 創建促進協作的 Web 應用程式

王林

Aug 30, 2023 pm 01:05 PM

在先前的教學中，我示範如何製作物聯網裝置原型，並使用 PubNub 的資料流網路從硬體感測器建立資料視覺化。在本教程中，我將向您展示如何使用 PubNub 以及 React.js 和下一代 JavaScript ES6 建立即時協作 Web 應用程序，React.js 可以讓您非常有效率地操作 DOM。

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

現場示範：協作即時貼

我創建了同一個 Stickie Note 應用程式的兩個版本：我在此 CodePen 上託管的版本使用 CDN 託管的 React 版本，另一個版本位於 GitHub 上，使用套件管理器。在本教程中，我使用後者的“lite”版本。我將逐步介紹如何使用所有好東西來建立應用程式：npm、webpack、Babel for JSX 和 ES6！

#先決條件

要繼續操作，您需要：

本教學不介紹如何開始使用 React。不過，您可以從許多其他優秀的 Envato Tuts 教程中了解更多。

#你要做什麼

您現在將使用 PubNub 建立一個簡單的 Web 應用程式。 PubNub 是一個資料流網路 (DSN)，提供全球基礎設施，讓您可以輕鬆建置和擴展即時應用程式和物聯網設備。在這裡，您將建立可共享的「便籤」。這是應用程式的使用者流程：

現在，讓我們開始吧！

安裝軟體包

在您套用的目錄中，執行 npm init 來設定您的 package.json 文件，然後安裝這些模組。

#安裝 webpack 模組建構器，它可以為前端編譯、連接、縮小和壓縮靜態資源：

$ npm install webpack --save-dev

安裝 webpack Web 伺服器以執行本機伺服器：

$ npm install webpack-dev-server --save-dev

##安裝 React、React DOM 和 CSS 動畫附加元件：

$ npm install React React-dom React-addons-css-transition-group --save#安裝 Babel 以使用 JSX 和 ES6。我們將在編譯器Babel 的幫助下使用ES6 (ES 2015) 進行編寫，這是下一代JavaScript：

$ sudo npm install babel-loader babel-core babel-preset-es2015 babel- preset-react --save

#安裝 PubNub 以進行即時通訊：

$ npm install pubnub --save

#配置應用程式結構與Web伺服器

``

#建立與此類似的應用程式結構：

├── /app
│   ├── app.jsx
│   ├── stickie.jsx
│   ├── stickieList.jsx
├── /dist
├── /css
├── /images
├── /node_modules
├── index.html
├── package.json
└── webpack.config.js

並設定

webpack.config.js：

var webpack = require('webpack');
module.exports = {
  entry: './app/app.jsx',
  output: {path: './dist', filename: 'bundle.js'},
  watch: true,
  module: {...}
}

在此 GitHub 儲存庫上查看整個設定檔。

基本上，您正在設定一個入口檔案（頂級檔案）和輸出目的地，在執行 webpack 命令後，所有 js（和 .jsx）檔案將建置到單一檔案中。此外，透過設定

watch: true，您可以確保 webpack 會監視您的檔案變更並自動重建您的輸出檔案。

#建立index.html檔案

#將腳本

bundle.js包含在您的index.html檔案中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collaborative Stickies</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <section id="container"></section>
    <script src="dist/bundle.js"></script>
  </body>
</html>

此外，請注意正文中帶有

id=”container” 的元素。這是您的 React 應用程式將插入的位置。

執行 Webpack 開發伺服器

您可以使用下列指令執行開發伺服器：

$ ./node_modules/.bin/webpack-dev-server

或您可以透過新增以下行在 package.json 中進行設定：

"scripts": {
  "start": "webpack-dev-server"
},

這樣您就可以使用

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)];

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

虽然我在这里使用的是浏览器原生的提示对话框，但实际上，我建议您创建另一个具有登录功能的 UI 组件，或者使用第三方对话框组件。您可以找到许多可重用的组件，例如 Elemental UI 的 Modal 和 Material UI 的 Dialog。

使用 PubNub 进行协作

现在，您将使用 PubNub 使应用程序具有协作性。

PubNub 是一个全球分布式数据流网络，可让您轻松构建实时应用程序。其核心功能是发布/订阅，可同时在多个用户之间发送和接收数据。

在此应用程序中，任何“登录”的人都可以在便签上发布消息并与其他用户共享。

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

要在您的应用中使用 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 组件组成，如下所示：

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

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，它是该组件的容器，并包含一堆便签纸。

动画组件

将 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 构建了一个实时协作应用程序！我希望您喜欢本教程！

使用 PubNub、React.js 和 ES6 创建促进协作的 Web 应用程序

您可以在此 GitHub 儲存庫中查看完整程式碼，包括 CSS。儘管在本教程中，我使用的是“lite”版本 app-lite.jsx，但您可以查看 app.jsx 以了解更多功能。 p>

如果您有興趣建立更多即時應用程序，例如聊天應用程式、多人遊戲、交易應用程式等，請前往 PubNub 並查找更多資源！

想要更多反應嗎？

我們有一門專門針對盡可能提升您的 React 技能的課程。在本課程中，您將開始使用 React 和 Redux 建立現代 Web 應用程式。從零開始，您將使用這兩個庫來建立完整的 Web 應用程式。

您將從最簡單的架構開始，慢慢地逐一功能地建立應用程式。您將了解工具、減速器和路由等基本概念。您還將了解一些更高級的技術，例如智慧組件和啞組件、純組件和非同步操作。最後，您將創建一個完整的抽認卡應用程序，用於透過間隔重複進行學習。

#有興趣嗎？看看吧！

參考文獻

以上是使用 PubNub、React.js 和 ES6 創建促進協作的 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。