如何用 react + 野狗 实现聊天室?
2017年7月13日

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

使用 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 。

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

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

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

代码中,首先要让 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 是野狗的数据存储产品名,参考

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

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

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

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;
}

结语

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