GithubHelp home page GithubHelp logo

wechat-mina-ddp's Introduction

Warning(Experimental)

This is just a pilot project, please used with caution in production

Wrap Meteor DDP for wechat-mina(微信小程序)

inspired by react-native-meteor

Meteor-like methods for wechat-mina

example for ddp test wechat-mina-ddp-example

Todos

Local cache for mimimongo

Support meteor-streamer

How to use meteor-streamer for wechat-mina

You must add meteor-streamer to your meteor project

cd wxMeteor  // Your meteor project
meteor add meteor-streamer

Create streamer at server

cd wxMeteor/server
touch streamer.js
vi streamer.js

Write a streamer

msgStreamer = new Meteor.Streamer('message');

msgStreamer.allowRead('all');
msgStreamer.allowWrite('all');


Meteor.startup(function(){
  Meteor.setInterval(function(){
    msgStreamer.emit("message", {msg: "hello"});
  }, 1000);
});

Use it At wx-mina

// Meteor streamer
var Streamer = require('./meteor/stream/Streamer');
wx.Streamer = Streamer;

var msgStreamer = new Streamer("message");
wx.msgStreamer = msgStreamer;
msgStreamer.on('message', function(msg) {
  console.log(msg);
});

Then You wxapp will get a message for per second

API

Meteor DDP connection

Meteor.connect(url, options)

Connect to a DDP server. You only have to do this once in your app.

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs);

    // User Meteor.connect(endpoint, options);
    var Meteor = require('./meteor/Meteor')
    var _ = Meteor.underscore;
    Meteor.connect('ws://localhost:3000/websocket');
    wx.Meteor = Meteor;
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

Use at pages

//index.js
//获取应用实例
var app = getApp()
var Meteor = wx.Meteor;
var util = require('../../utils/util.js')
var _ = Meteor.underscore;

function sortMessage(msgArr){
  if (!_.isArray(msgArr)) {
    return msgArr;
  }
  return msgArr.sort(function(a, b){
    return new Date(b._updateAt) - new Date(a._updateAt);
  });
}

Page({
  data: {
    messages: [],
    userInfo: {},
    inputValue: ""
  },
  //事件处理函数
  bindKeyInput: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  sendMessage: function(e) {
    var self = this;
    var msg = this.data.inputValue;
    if (!msg || msg.length < 1) {
      return;
    }
    Meteor.call("sendMessage", msg, function(err, result) {
      if (!err) {
        self.setData({
          inputValue: ""
        })
        console.log("发送成功");
      }
    })
  },
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    });
    // 数据订阅
    var subReady = Meteor.subscribe('message.all');
    var DDP = Meteor.getData().ddp;
    Meteor.Tracker.autorun(function(){
      console.log("message.all 订阅状态",subReady.ready())
    });
    DDP.on("added", ({collection, id, fields}) => {
      this.setData({
        messages: sortMessage(Meteor.collection(collection).find())
      })
    });
    DDP.on("changed", ({collection, id, fields}) => {
      this.setData({
        messages: sortMessage(Meteor.collection(collection).find())
      })
    });
    DDP.on("removed", ({collection, id}) => {
      this.setData({
        messages: sortMessage(Meteor.collection(collection).find())
      })
    });
  }
})

Arguments

Meteor.connect(url, options)

  • url string required
  • options object Available options are :
    • autoConnect boolean [true] whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.
    • autoReconnect boolean [true] whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.
    • reconnectInterval number [10000] the interval in ms between reconnection attempts.

Meteor.disconnect()

Disconnect from the DDP server.

Meteor methods

Availables packages

Convenience packages

Example `var Meteor = require('./meteor/Meteor');``

  • Meteor.EJSON
  • Meteor.Tracker
  • Meteor.JSON
  • Meteor.underscore

ReactiveDict

See documentation.

Meteor.Accounts

Meteor.ddp

Once connected to the ddp server, you can access every method available in ddp.js.

  • Meteor.ddp.on('connected')
  • Meteor.ddp.on('added')
  • Meteor.ddp.on('changed')
  • ...

Author

Thanks for react-native-meteor

Want to help ?

Pull Requests and issues reported are welcome ! :)

wechat-mina-ddp's People

Contributors

lhz516 avatar micjoyce avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

wechat-mina-ddp's Issues

Error when reconnecting

当server断开重连后,出现这个error,并且每发送任何DDP message都会出现这个error,同时多接受一次message(console每行最左边显示数量都是2)。
_20161113181725
我已经分别试过设置autoConnect为true和false然后手动重连都会出现这个症状

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.