实现一个“无服务器”架构的聊天效果。

使用 create-react-app-now 项目

git clone https://github.com/xkawi/create-react-app-now

cd create-react-app-now
now

这样就可以看到一个 react 项目运行在了 now 的平台上了，而且是支持路由的（ /about 刷新无压力）。

使用野狗监听数据

首先要到 https://www.wilddog.com/dashboard/ 新建一个数据库，例如 meituandemo 。

野狗这里，每一个数据库都有一个链接可以直接打开，例如

https://meituandemo.wilddogio.com

甚至每一项数据都有链接对应，例如

https://meituandemo.wilddogio.com/messageboard/message2/content

在上述链接打开的页面中，直接就可以对数据进行编辑，真是超级的傻瓜了。

代码中，首先要让 react 项目连接到 meituandemo 这个数据库：

创建 database.js

import Wilddog from 'wilddog'

const config = {
  syncURL: "https://meituandemo.wilddogio.com"
}

Wilddog.initializeApp(config)

export default Wilddog

然后到 App.js 中添加

  msgRef = Wilddog.sync().ref().child("messages")

  componentDidMount() {
    this.msgRef.on("value", (snapshot) => {
        let msg = snapshot.val()
        console.log(msg)
    }
  }

介绍一下，上面的 sync 是野狗的数据存储产品名，参考

https://docs.wilddog.com/sync/Web/guide/concept.html

Wilddog.sync().ref() 可以拿到整个数据库的指针，也可以专门拿到子节点的指针，也就是.child("messages")。

Sync 服务是实时数据，所以数据一般不是“读取”，而是用“监听”这个概念，参考：

https://docs.wilddog.com/sync/Web/guide/retrieve-data.html

一旦数据库中的数据有变化，就会触发客户端代码，从而拿到新数据，例如

ref.on('value', function(snapshot) {
    ...
})

提交数据到野狗

还是用那个指针，然后

ref.push(data)

即可，应该说是极为傻瓜化的。

最终代码

和233期中给的代码是一样的：

App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom'
import About from './About';
import './App.css';
import wilddog from './database'


const MsgList = ({msgs}) => {
  let listString = Object.keys(msgs).map(id => (
    <li key={id}>{msgs[id].content}</li>
  ))
  return (
    <ul className="msg-list">
      {listString}
    </ul>
  )
}

class App extends Component {

  state = {
    msgList: {}
  }

  msgRef = wilddog.sync().ref().child("messages")

  componentDidMount() {
    this.msgRef.on("value", (snapshot) => {
        let msgList = snapshot.val()
        this.setState({
          msgList
        })
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.msgRef.push({
      "content" : this.msgInput.value
    })
    this.msgInput.value = ''
  }
  render() {
    return (
      <div className="app">
        <MsgList msgs={this.state.msgList} />
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={value => this.msgInput = value} />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

const BasicApp = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
)

export default BasicApp;

database.js

import Wilddog from 'wilddog'

const config = {
  syncURL: "https://meituandemo.wilddogio.com"
}

Wilddog.initializeApp(config)

export default Wilddog

App.css

.msg-list {
  border: 2px solid gray;
  height: 200px;
  overflow: auto;
}

input {
  border: 2px solid gray;
}

结语

无服务器架构确实有很多优势，以后我自己在项目中也会多用。