野狗 实时通信引擎 实现留言板 身份认证 入门版

使用下面的命令行，搭建完基本脚手架

vue init webpack demo

基本结构

image.png

新建dog-module.js

import * as wilddog from 'wilddog'

var config = {
// 你的应用url
  syncURL: 'https://wd089270fflahv.wilddogio.com/'
}
wilddog.initializeApp(config)

export default wilddog

修改App.vue

<template>
  <div id="app">
    <p v-for="item in msg" v-html="item.name"></p>
    <div>
      <input v-model="info" >
      <input type="button" value="message" @click="pushMsg">
    </div>
    <input v-model="email" >
    <input v-model="pwd" >
    <input type="button" @click="addUser" value="新增用户">
    <input type="button" @click="loginUser" value="登录用户">
    <input type="button" @click="currentUser" value="当前用户">
    <br>
    <input v-model="username">
    <input type="button" @click="updateUserInfo" value="修改当前用户">
  </div>
</template>

<script>
  import wilddog from './dog-module'

  export default {
    name: 'app',
    data () {
      return {
        info: null,
        msg: null,
        email: null,
        pwd: null,
        username: null
      }
    },
    methods: {
      updateUserInfo () {
        wilddog.auth().currentUser.updateProfile({
          displayName: 'name',
          photoURL: 'https://example.com/path/photo.jpg'
        }).then(function (res) {
          // 更新成功
          console.log('res', res)
        })
      },
      loginUser () {
        let email = this.email
        let pwd = this.pwd
        wilddog.auth().signInWithEmailAndPassword(email, pwd)
          .then(function () {
            console.info('login success, currentUser->', wilddog.auth().currentUser)
          }).catch(function (err) {
            console.info('login failed ->', err)
          })
      },
      addUser () {
        let email = this.email
        let pwd = this.pwd
        wilddog.auth().createUserWithEmailAndPassword(email, pwd)
          .then(function (user) {
            console.info('user created.', user)
          }).catch(function (err) {
            console.info('create user failed.', err)
          })
      },
      currentUser () {
     /*   wilddog.auth().onAuthStateChanged(function (user) {
          if (user) {
            console.log(user)
          } else {
            console.log('no user')
          }
        }) */
        var user = wilddog.auth().currentUser
        if (user != null) {
          // 用户已登录
          console.log(user)
        } else {
          // 没有用户登录
          console.log('no user')
        }
      },
      submitMsg () {
        var ref = wilddog.sync().ref('messageboard')
        ref.set({
          'name': 'ann'
        })
      },
      pushMsg () {
        var ref = wilddog.sync().ref('messageboard')
        console.log('this.info', this.info)
        ref.push({
          'name': this.info
        })
        this.info = ''
      }
    },
    mounted () {
      let ref = wilddog.sync().ref('messageboard')
      ref.on('value', (snapshot) => {
        this.msg = snapshot.val()
        console.log('snapshot.val()', Object.keys(this.msg))
        // 获取该节点 集合下的所有数据个数
      })
    }
  }
</script>

以上是实现一个基本的留言demo，回头在上复杂的案例。