Open jollen opened 8 years ago
有了 Web of Things 初體驗後,應該會對 React 元件與 IoT 的關係有了好奇心。React 在 IoT 的全端開發,最簡單的使用情境就是:製作能接收 Server Push 的 React 元件。
另外,還有一件事情也吸引我的目光:Flux 模式。把 Flux 模式用在這裡,似乎是再好不過了,因為,根據 Flux 模式的設計:我們可以用 Actions 來調用 REST API。把思路放大一下:Actions 是用來與 Backend 互動的單元,運用這個觀念,或許可以實現一個簡單的 Flux 程式庫,並在 Action 裡建立與 WebSocket Server 的連線。
一個簡單的範例由此而生。先下載與運行 react-websocket-biolerplate 範例:
react-websocket-biolerplate
$ git clone https://github.com/jollen/react-websocket-biolerplate.git $ cd react-websocket-biolerplate $ npm install $ gulp compile
使用瀏覽器開啟 dist/index.html 文件即可,你會看到來自 wot.city 服務器的即時數據。
dist/index.html
wot.city
src/App.jsx
server
gulp compile
這個範例的實現觀念非常簡單:
react-websocket-flux
onMessage
Flux 模式運用在這幾個地方:
WebsocketActions.connect()
componentDidMount
WebsocketStore.addMessageListener
componentWillUnmount
WebsocketStore.removeMessageListener
以下是完整的實現步驟說明。根據此,也能為現有的 React 元件注入 WebSocket 功能。
import React, { Component } from 'react'; import { render } from 'react-dom'; // 1. 引入 'react-websocket-flux' import { WebsocketStore, WebsocketActions } from 'react-websocket-flux'; export class MyComponent extends Component { constructor(props, context) { super(props, context); // 2. 初始化 this.state this.state = { temperature: -1 }; // 3. WebSocket 的 'onMessage' callback this.onMessage = this.onMessage.bind(this); // 4. 連線到 WebSocket Server WebsocketActions.connect(this.props.server); } componentDidMount() { // 5. 將 'onMessage' 註冊到 react-websocket-flux WebsocketStore.addMessageListener(this.onMessage); } componentWillUnmount() { // 將 'onMessage' 從 react-websocket-flux 解除註冊 WebsocketStore.removeMessageListener(this.onMessage); } onMessage(data) { // 6. Deserialize: 從 Server 推送過來的 JSON data 取出資料,並放入 this.state this.setState({ temperature: data.temperature }); console.log(data) } render() { return ( <div> <h1>{this.state.temperature}</h1> </div> ); } }
在 React 應用程式裡,引入你的元件使用:
wss://wot.city/object/testman/viewer
範例片斷如下:
// 我的 React 元件 import { MyComponent } from './Component'; // 加入 server prop render( <MyComponent server="wss://wot.city/object/testman/viewer"> </MyComponent>, document.getElementById('content') );
本文的完整範例 react-websocket-biolerplate.git。
有了 Web of Things 初體驗後,應該會對 React 元件與 IoT 的關係有了好奇心。React 在 IoT 的全端開發,最簡單的使用情境就是:製作能接收 Server Push 的 React 元件。
另外,還有一件事情也吸引我的目光:Flux 模式。把 Flux 模式用在這裡,似乎是再好不過了,因為,根據 Flux 模式的設計:我們可以用 Actions 來調用 REST API。把思路放大一下:Actions 是用來與 Backend 互動的單元,運用這個觀念,或許可以實現一個簡單的 Flux 程式庫,並在 Action 裡建立與 WebSocket Server 的連線。
範例
一個簡單的範例由此而生。先下載與運行
react-websocket-biolerplate
範例:使用瀏覽器開啟
dist/index.html
文件即可,你會看到來自wot.city
服務器的即時數據。src/App.jsx
,並修改server
propgulp compile
命令重新編譯文件觀念
這個範例的實現觀念非常簡單:
react-websocket-flux
模組,這是一個簡單 Flux 實現react-websocket-flux
裡後,透過onMessage
接收即時數據Flux 模式運用在這幾個地方:
WebsocketActions.connect()
與 WebSocket 服務器建立連線onMessage
事件回調函數componentDidMount
lifecycle 裡調用WebsocketStore.addMessageListener
註冊onMessage
callbackcomponentWillUnmount
lifecycle 裡調用WebsocketStore.removeMessageListener
解除註冊Put All Together
以下是完整的實現步驟說明。根據此,也能為現有的 React 元件注入 WebSocket 功能。
在 React 應用程式裡,引入你的元件使用:
server
prop 指定 WebSocket 服務器 URIwss://wot.city/object/testman/viewer
測試數據範例片斷如下:
小結
本文的完整範例 react-websocket-biolerplate.git。