feat(Query): LiveQuery

Author: leeyeh

demo/index.html

@@ -14,7 +14,7 @@ <h2><a href="https://leancloud.cn">为开发加速</a></h2>
       <input type="text" id='code'/>
       <button id="verify">verify</button>
     </div>
-    <script src="../dist/av.js"></script>
+    <script src="../dist/av-live-query.js"></script>
     <script src="./test.js"></script>
   </body>
 </html>

demo/test.js

@@ -1,10 +1,10 @@
-var av = void 0;
+var AV;
 
 // 检测是否在 Nodejs 环境下运行
 if (typeof process !== 'undefined' && process.versions && process.versions.node) {
-  av = require('../dist/node/av');
+  AV = require('../live-query');
 } else {
-  av = window.AV;
+  AV = window.AV;
 }
 
 // 初始化
@@ -16,7 +16,7 @@ var region = 'cn';
 // const appKey = 'be2YmUduiuEnCB2VR9bLRnnV';
 // const region = 'us';
 
-av.init({ appId: appId, appKey: appKey, region: region });
+AV.init({ appId: appId, appKey: appKey, region: region });
 
 av.Captcha.request().then(captcha => {
   captcha.bind({
@@ -28,3 +28,9 @@ av.Captcha.request().then(captcha => {
     error: console.error,
   });
 });
+new AV.Query('Todo').subscribe().then(subscription => {
+  subscription.on('create', console.log);
+  subscription.on('update', console.log);
+  subscription.on('delete', console.log);
+  // subscription.unsubscribe();
+});

gulpfile.babel.js

@@ -35,59 +35,37 @@ const uploadCDN = (file) => {
   return file;
 };
 
-gulp.task('clean-dist', () => {
+gulp.task('clean-dist', () =>
   gulp.src([
-    'dist/*.js',
-    'dist/*.map'
+    'dist/**/*.*',
   ]).pipe(clean({
-    force: true}
-  ));
-});
+    force: true
+  }))
+);
 
 // 编译浏览器版本
-gulp.task('bundle-browser', shell.task('npm run build:browser'));
-gulp.task('bundle-rn', shell.task('npm run build:rn'));
-gulp.task('bundle-weapp', shell.task('npm run build:weapp'));
-
-gulp.task('uglify', ['bundle-browser', 'bundle-weapp'], shell.task([
-  'npm run uglify:browser',
-  'npm run uglify:weapp',
-]));
-
-gulp.task('clean-node', () => {
-  return gulp.src(['dist/node/**/*.*'])
-    .pipe(clean({force: true}));
-});
+gulp.task('bundle-browser', ['clean-dist'], shell.task('npm run build:browser'));
+gulp.task('bundle-rn', ['clean-dist'], shell.task('npm run build:rn'));
+gulp.task('bundle-weapp', ['clean-dist'], shell.task('npm run build:weapp'));
 
 // 编译出 Node 版本
-gulp.task('babel-node', ['clean-node'], () => {
+gulp.task('babel-node', ['clean-dist'], () => {
   return gulp.src('src/**/*.js')
     .pipe(babel())
     .pipe(gulp.dest('dist/node/'));
 });
 
-gulp.task('clean-demo', () => {
-  return gulp.src(['demo/test-es5.js'])
-    .pipe(clean());
-});
-
-// 编译 Demo 中的代码
-gulp.task('babel-demo', ['clean-demo'], () => {
-  return gulp.src('demo/*.js')
-    // .pipe(sourcemaps.init())
-    .pipe(babel())
-    .pipe(concat('test-es5.js'))
-    // .pipe(sourcemaps.write("."))
-    .pipe(gulp.dest('demo/'));
-});
-
 // 上传到 CDN
 gulp.task('upload', () => {
   [
     './dist/av-min.js',
     './dist/av-weapp-min.js',
     './dist/av.js',
     './dist/av-weapp.js',
+    './dist/av-live-query-min.js',
+    './dist/av-live-query-weapp-min.js',
+    './dist/av-live-query.js',
+    './dist/av-live-query-weapp.js',
   ].map(uploadCDN).map(file => `${file}.map`).map(uploadCDN);
 });
 
@@ -97,7 +75,5 @@ gulp.task('build', [
   'bundle-browser',
   'bundle-rn',
   'bundle-weapp',
-  'uglify',
-  'clean-node',
   'babel-node'
 ]);

live-query.js

@@ -0,0 +1 @@
+module.exports = require('./dist/node/index-live-query');

package.json

@@ -14,14 +14,16 @@
     "build:browser": "CLIENT_PLATFORM=Browser webpack --config webpack/browser.js",
     "build:rn": "CLIENT_PLATFORM=ReactNative webpack --config webpack/rn.js",
     "build:weapp": "CLIENT_PLATFORM=Weapp webpack --config webpack/weapp.js",
-    "uglify:browser": "cd dist; uglifyjs av.js -m -c -o av-min.js --in-source-map av.js.map --source-map av-min.js.map; cd ..;",
-    "uglify:weapp": "cd dist; uglifyjs av-weapp.js -m -c -o av-weapp-min.js --in-source-map av-weapp.js.map --source-map av-weapp-min.js.map; cd ..;",
-    "build": "gulp build",
+    "build": "gulp build && npm run build:live-query",
+    "build:live-query": "export LIVE_QUERY=1 && npm run build:browser && npm run build:rn && npm run build:weapp",
     "prepublishOnly": "./script/check-version.js"
   },
   "dependencies": {
     "debug": "^2.2.0",
     "es6-promise": "^4.0.5",
+    "eventemitter3": "^2.0.3",
+    "leancloud-realtime": "^3.5.0-beta.0",
+    "leancloud-realtime-plugin-live-query": "^1.0.0-beta.1",
     "localstorage-memory": "^1.0.1",
     "md5": "^2.0.0",
     "qiniu": "^6.1.11",
@@ -30,7 +32,7 @@
   },
   "devDependencies": {
     "babel-core": "^6.4.0",
-    "babel-loader": "^6.2.8",
+    "babel-loader": "^7.0.0",
     "babel-plugin-istanbul": "^2.0.0",
     "babel-preset-es2015": "^6.3.13",
     "babel-register": "^6.14.0",
@@ -49,7 +51,6 @@
     "mocha": "^3.0.0",
     "nyc": "^8.1.0",
     "should": "^11.1.0",
-    "uglify-js": "git+https://github.com/Swaagie/UglifyJS2.git#fcb4f2f21584dc5b21af4c10e17733e1686135e4",
     "weapp-polyfill": "^1.1.0",
     "webpack": "^2.2.0-rc.3"
   },
@@ -63,11 +64,18 @@
     "./src/utils/localstorage.js": "./src/utils/localstorage-browser.js",
     "./src/utils/parse-base64.js": "./src/utils/parse-base64-browser.js",
     "./src/ua/comments.js": "./src/ua/comments-browser.js",
-    "./dist/node/index.js": "./dist/av.js"
+    "./dist/node/index.js": "./dist/av.js",
+    "./dist/node/index-live-query.js": "./dist/av-live-query.js"
   },
   "react-native": {
     "./src/utils/localstorage.js": "./src/utils/localstorage-rn.js",
-    "./dist/node/index.js": "./dist/av-rn.js"
+    "./dist/node/index.js": "./dist/av-rn.js",
+    "./dist/node/index-live-query.js": "./dist/av-live-query-rn.js"
+  },
+  "weapp": {
+    "./src/polyfills/index.js": "./src/polyfills/index-weapp.js",
+    "./dist/node/index.js": "./dist/av-weapp.js",
+    "./dist/node/index-live-query.js": "./dist/av-live-query-weapp.js"
   },
   "typings": "./storage.d.ts",
   "types": "./storage.d.ts",

src/av.js

@@ -9,10 +9,16 @@ const AV = global.AV || {};
 
 // All internal configuration items
 AV._config = {
-  userAgent,
   serverURLs: {},
   useMasterKey: false,
   production: null,
+  realtime: null,
+};
+
+// configs shared by all AV instances
+AV._sharedConfig = {
+  userAgent,
+  liveQueryRealtime: null,
 };
 
 /**
@@ -43,38 +49,54 @@ AV._getAVPath = function(path) {
   return "AV/" + AV.applicationId + "/" + path;
 };
 
+const hexOctet = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+const uuid = () => `${hexOctet()}${hexOctet()}-${hexOctet()}-${hexOctet()}-${hexOctet()}-${hexOctet()}${hexOctet()}${hexOctet()}`;
+
 /**
  * Returns the unique string for this app on this machine.
  * Gets reset when localStorage is cleared.
  * @private
  */
 AV._installationId = null;
-AV._getInstallationId = function() {
+AV._getInstallationId = () => {
   // See if it's cached in RAM.
   if (AV._installationId) {
     return AV.Promise.resolve(AV._installationId);
   }
 
   // Try to get it from localStorage.
-  var path = AV._getAVPath("installationId");
-  return AV.localStorage.getItemAsync(path).then(function(_installationId){
+  const path = AV._getAVPath('installationId');
+  return AV.localStorage.getItemAsync(path).then((_installationId) => {
     AV._installationId = _installationId;
     if (!AV._installationId) {
       // It wasn't in localStorage, so create a new one.
-      var hexOctet = function() {
-        return Math.floor((1+Math.random())*0x10000).toString(16).substring(1);
-      };
-      AV._installationId = (
-        hexOctet() + hexOctet() + "-" +
-        hexOctet() + "-" +
-        hexOctet() + "-" +
-        hexOctet() + "-" +
-        hexOctet() + hexOctet() + hexOctet());
-      return AV.localStorage.setItemAsync(path, AV._installationId);
+      AV._installationId = _installationId = uuid();
+      return AV.localStorage.setItemAsync(path, _installationId).then(() => _installationId);
     }
-    else {
-      return _installationId;
+    return _installationId;
+  });
+};
+
+AV._subscriptionId = null;
+AV._refreshSubscriptionId = (path = AV._getAVPath('subscriptionId')) => {
+  const subscriptionId = AV._subscriptionId = uuid();
+  return AV.localStorage.setItemAsync(path, subscriptionId).then(() => subscriptionId);
+};
+AV._getSubscriptionId = () => {
+  // See if it's cached in RAM.
+  if (AV._subscriptionId) {
+    return AV.Promise.resolve(AV._subscriptionId);
+  }
+
+  // Try to get it from localStorage.
+  const path = AV._getAVPath('subscriptionId');
+  return AV.localStorage.getItemAsync(path).then((_subscriptionId) => {
+    AV._subscriptionId = _subscriptionId;
+    if (!AV._subscriptionId) {
+      // It wasn't in localStorage, so create a new one.
+      _subscriptionId = AV._refreshSubscriptionId(path);
     }
+    return _subscriptionId;
   });
 };
 

src/index-live-query.js

@@ -0,0 +1,8 @@
+const AV = require('./index');
+
+const { Realtime } = require('leancloud-realtime/core');
+const { LiveQueryPlugin } = require('leancloud-realtime-plugin-live-query');
+Realtime.__preRegisteredPlugins = [LiveQueryPlugin];
+AV._sharedConfig.liveQueryRealtime = Realtime;
+
+module.exports = AV;

src/index.js

@@ -5,6 +5,7 @@
  * Copyright 2016 LeanCloud.cn, Inc.
  * The LeanCloud JavaScript SDK is freely distributable under the MIT license.
  */
+require('./polyfills');
 
 const AV = require('./av');
 
@@ -26,6 +27,7 @@ require('./object')(AV);
 require('./role')(AV);
 require('./user')(AV);
 require('./query')(AV);
+require('./live-query')(AV);
 require('./captcha')(AV);
 require('./cloudfunction')(AV);
 require('./push')(AV);

src/init.js

@@ -78,6 +78,7 @@ AV.init = function init(options, ...params) {
     serverURLs,
     disableCurrentUser = false,
     production,
+    realtime,
   } = options;
   if (AV.applicationId) throw new Error('SDK is already initialized.');
   if (process.env.CLIENT_PLATFORM && masterKey) console.warn('MasterKey is not supposed to be used in browser.');
@@ -95,6 +96,14 @@ AV.init = function init(options, ...params) {
     AV._config.serverURLs,
     serverURLs
   ), disableAppRouter);
+  if (realtime) {
+    AV._config.realtime = realtime;
+  } else if (AV._sharedConfig.liveQueryRealtime) {
+    AV._config.realtime = new AV._sharedConfig.liveQueryRealtime({
+      appId,
+      region,
+    });
+  }
 };
 
 // If we're running in node.js, allow using the master key.

src/live-query.js

@@ -0,0 +1,72 @@
+const EventEmitter = require('eventemitter3');
+const Promise = require('./promise');
+const { inherits } = require('./utils');
+const { request } = require('./request');
+
+module.exports = (AV) => {
+  const LiveQuery = AV.LiveQuery = inherits(EventEmitter, {
+    constructor(id, client) {
+      EventEmitter.apply(this);
+      this.id = id;
+      this._client = client;
+      this._client.register(this);
+      client.on('message', this._dispatch.bind(this));
+    },
+    _dispatch(message) {
+      message.forEach(({
+        op,
+        object,
+        query_id: queryId,
+        updatedKeys,
+      }) => {
+        if (queryId !== this.id) return;
+        const target = AV.parseJSON(Object.assign({
+          __type: object.className === '_File' ? 'File' : 'Object',
+        }, object));
+        if (updatedKeys) {
+          this.emit(op, target, updatedKeys);
+        } else {
+          this.emit(op, target);
+        }
+      });
+    },
+    unsubscribe() {
+      this._client.deregister(this);
+      return request({
+        method: 'POST',
+        path: '/LiveQuery/unsubscribe',
+        data: {
+          id: this._client.id,
+          query_id: this.id,
+        },
+      });
+    },
+  }, {
+    init: (query, {
+      subscriptionId: userDefinedSubscriptionId = AV._getSubscriptionId(),
+    } = {}) => {
+      if (!AV._config.realtime) throw new Error('LiveQuery not supported. Please use the LiveQuery bundle. https://url.leanapp.cn/enable-live-query');
+      if (!(query instanceof AV.Query)) throw new TypeError('LiveQuery must be inited with a Query');
+      const { where, keys } = query.toJSON();
+      return Promise.resolve(userDefinedSubscriptionId)
+        .then(subscriptionId =>
+          request({
+            method: 'POST',
+            path: '/LiveQuery/subscribe',
+            data: {
+              query: {
+                where,
+                keys,
+                className: query.className,
+              },
+              id: subscriptionId,
+            },
+          }).then(({
+            query_id: queryId,
+          }) => AV._config.realtime.createLiveQueryClient(subscriptionId)
+            .then(liveQueryClient => new LiveQuery(queryId, liveQueryClient))
+          )
+        );
+    },
+  });
+};