diff --git a/.travis.yml b/.travis.yml index 9ddbffd2..d6147e3c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,7 @@ dist: xenial language: python python: - - "3.6" + - "3.7" cache: - pip diff --git a/dev_requirements.txt b/dev_requirements.txt index f785eecc..63c51ccf 100644 --- a/dev_requirements.txt +++ b/dev_requirements.txt @@ -2,7 +2,7 @@ coveralls>=1.6.0 channels>=2.0 channels-redis daphne -Django>=2.0,<2.3 +Django>=2.0 django-bootstrap4 django-redis dpd-static-support>=0.0.4 diff --git a/django_plotly_dash/static/channels/js/websocketbridge.js b/django_plotly_dash/static/channels/js/websocketbridge.js new file mode 100644 index 00000000..d7b28451 --- /dev/null +++ b/django_plotly_dash/static/channels/js/websocketbridge.js @@ -0,0 +1,399 @@ +/*! + * Do not edit!. This file is autogenerated by running `npm run browserify`. + */ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.channels = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o config.maxReconnectionDelay) + ? config.maxReconnectionDelay + : newDelay; +}; +var LEVEL_0_EVENTS = ['onopen', 'onclose', 'onmessage', 'onerror']; +var reassignEventListeners = function (ws, oldWs, listeners) { + Object.keys(listeners).forEach(function (type) { + listeners[type].forEach(function (_a) { + var listener = _a[0], options = _a[1]; + ws.addEventListener(type, listener, options); + }); + }); + if (oldWs) { + LEVEL_0_EVENTS.forEach(function (name) { ws[name] = oldWs[name]; }); + } +}; +var ReconnectingWebsocket = function (url, protocols, options) { + var _this = this; + if (options === void 0) { options = {}; } + var ws; + var connectingTimeout; + var reconnectDelay = 0; + var retriesCount = 0; + var shouldRetry = true; + var savedOnClose = null; + var listeners = {}; + // require new to construct + if (!(this instanceof ReconnectingWebsocket)) { + throw new TypeError("Failed to construct 'ReconnectingWebSocket': Please use the 'new' operator"); + } + // Set config. Not using `Object.assign` because of IE11 + var config = getDefaultOptions(); + Object.keys(config) + .filter(function (key) { return options.hasOwnProperty(key); }) + .forEach(function (key) { return config[key] = options[key]; }); + if (!isWebSocket(config.constructor)) { + throw new TypeError('Invalid WebSocket constructor. Set `options.constructor`'); + } + var log = config.debug ? function () { + var params = []; + for (var _i = 0; _i < arguments.length; _i++) { + params[_i - 0] = arguments[_i]; + } + return console.log.apply(console, ['RWS:'].concat(params)); + } : function () { }; + /** + * Not using dispatchEvent, otherwise we must use a DOM Event object + * Deferred because we want to handle the close event before this + */ + var emitError = function (code, msg) { return setTimeout(function () { + var err = new Error(msg); + err.code = code; + if (Array.isArray(listeners.error)) { + listeners.error.forEach(function (_a) { + var fn = _a[0]; + return fn(err); + }); + } + if (ws.onerror) { + ws.onerror(err); + } + }, 0); }; + var handleClose = function () { + log('close'); + retriesCount++; + log('retries count:', retriesCount); + if (retriesCount > config.maxRetries) { + emitError('EHOSTDOWN', 'Too many failed connection attempts'); + return; + } + if (!reconnectDelay) { + reconnectDelay = initReconnectionDelay(config); + } + else { + reconnectDelay = updateReconnectionDelay(config, reconnectDelay); + } + log('reconnectDelay:', reconnectDelay); + if (shouldRetry) { + setTimeout(connect, reconnectDelay); + } + }; + var connect = function () { + log('connect'); + var oldWs = ws; + ws = new config.constructor(url, protocols); + connectingTimeout = setTimeout(function () { + log('timeout'); + ws.close(); + emitError('ETIMEDOUT', 'Connection timeout'); + }, config.connectionTimeout); + log('bypass properties'); + for (var key in ws) { + // @todo move to constant + if (['addEventListener', 'removeEventListener', 'close', 'send'].indexOf(key) < 0) { + bypassProperty(ws, _this, key); + } + } + ws.addEventListener('open', function () { + clearTimeout(connectingTimeout); + log('open'); + reconnectDelay = initReconnectionDelay(config); + log('reconnectDelay:', reconnectDelay); + retriesCount = 0; + }); + ws.addEventListener('close', handleClose); + reassignEventListeners(ws, oldWs, listeners); + // because when closing with fastClose=true, it is saved and set to null to avoid double calls + ws.onclose = ws.onclose || savedOnClose; + savedOnClose = null; + }; + log('init'); + connect(); + this.close = function (code, reason, _a) { + if (code === void 0) { code = 1000; } + if (reason === void 0) { reason = ''; } + var _b = _a === void 0 ? {} : _a, _c = _b.keepClosed, keepClosed = _c === void 0 ? false : _c, _d = _b.fastClose, fastClose = _d === void 0 ? true : _d, _e = _b.delay, delay = _e === void 0 ? 0 : _e; + if (delay) { + reconnectDelay = delay; + } + shouldRetry = !keepClosed; + ws.close(code, reason); + if (fastClose) { + var fakeCloseEvent_1 = { + code: code, + reason: reason, + wasClean: true, + }; + // execute close listeners soon with a fake closeEvent + // and remove them from the WS instance so they + // don't get fired on the real close. + handleClose(); + ws.removeEventListener('close', handleClose); + // run and remove level2 + if (Array.isArray(listeners.close)) { + listeners.close.forEach(function (_a) { + var listener = _a[0], options = _a[1]; + listener(fakeCloseEvent_1); + ws.removeEventListener('close', listener, options); + }); + } + // run and remove level0 + if (ws.onclose) { + savedOnClose = ws.onclose; + ws.onclose(fakeCloseEvent_1); + ws.onclose = null; + } + } + }; + this.send = function (data) { + ws.send(data); + }; + this.addEventListener = function (type, listener, options) { + if (Array.isArray(listeners[type])) { + if (!listeners[type].some(function (_a) { + var l = _a[0]; + return l === listener; + })) { + listeners[type].push([listener, options]); + } + } + else { + listeners[type] = [[listener, options]]; + } + ws.addEventListener(type, listener, options); + }; + this.removeEventListener = function (type, listener, options) { + if (Array.isArray(listeners[type])) { + listeners[type] = listeners[type].filter(function (_a) { + var l = _a[0]; + return l !== listener; + }); + } + ws.removeEventListener(type, listener, options); + }; +}; +module.exports = ReconnectingWebsocket; + +},{}],2:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.WebSocketBridge = undefined; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _reconnectingWebsocket = require('reconnecting-websocket'); + +var _reconnectingWebsocket2 = _interopRequireDefault(_reconnectingWebsocket); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +/** + * Bridge between Channels and plain javascript. + * + * @example + * const webSocketBridge = new WebSocketBridge(); + * webSocketBridge.connect(); + * webSocketBridge.listen(function(action, stream) { + * console.log(action, stream); + * }); + */ +var WebSocketBridge = function () { + function WebSocketBridge(options) { + _classCallCheck(this, WebSocketBridge); + + /** + * The underlaying `ReconnectingWebSocket` instance. + * + * @type {ReconnectingWebSocket} + */ + this.socket = null; + this.streams = {}; + this.default_cb = null; + this.options = _extends({}, options); + } + + /** + * Connect to the websocket server + * + * @param {String} [url] The url of the websocket. Defaults to + * `window.location.host` + * @param {String[]|String} [protocols] Optional string or array of protocols. + * @param {Object} options Object of options for [`reconnecting-websocket`](https://github.com/joewalnes/reconnecting-websocket#options-1). + * @example + * const webSocketBridge = new WebSocketBridge(); + * webSocketBridge.connect(); + */ + + + _createClass(WebSocketBridge, [{ + key: 'connect', + value: function connect(url, protocols, options) { + var _url = void 0; + // Use wss:// if running on https:// + var scheme = window.location.protocol === 'https:' ? 'wss' : 'ws'; + var base_url = scheme + '://' + window.location.host; + if (url === undefined) { + _url = base_url; + } else { + // Support relative URLs + if (url[0] == '/') { + _url = '' + base_url + url; + } else { + _url = url; + } + } + this.socket = new _reconnectingWebsocket2.default(_url, protocols, options); + } + + /** + * Starts listening for messages on the websocket, demultiplexing if necessary. + * + * @param {Function} [cb] Callback to be execute when a message + * arrives. The callback will receive `action` and `stream` parameters + * + * @example + * const webSocketBridge = new WebSocketBridge(); + * webSocketBridge.connect(); + * webSocketBridge.listen(function(action, stream) { + * console.log(action, stream); + * }); + */ + + }, { + key: 'listen', + value: function listen(cb) { + var _this = this; + + this.default_cb = cb; + this.socket.onmessage = function (event) { + var msg = JSON.parse(event.data); + var action = void 0; + var stream = void 0; + + if (msg.stream !== undefined) { + action = msg.payload; + stream = msg.stream; + var stream_cb = _this.streams[stream]; + stream_cb ? stream_cb(action, stream) : null; + } else { + action = msg; + stream = null; + _this.default_cb ? _this.default_cb(action, stream) : null; + } + }; + } + + /** + * Adds a 'stream handler' callback. Messages coming from the specified stream + * will call the specified callback. + * + * @param {String} stream The stream name + * @param {Function} cb Callback to be execute when a message + * arrives. The callback will receive `action` and `stream` parameters. + * @example + * const webSocketBridge = new WebSocketBridge(); + * webSocketBridge.connect(); + * webSocketBridge.listen(); + * webSocketBridge.demultiplex('mystream', function(action, stream) { + * console.log(action, stream); + * }); + * webSocketBridge.demultiplex('myotherstream', function(action, stream) { + * console.info(action, stream); + * }); + */ + + }, { + key: 'demultiplex', + value: function demultiplex(stream, cb) { + this.streams[stream] = cb; + } + + /** + * Sends a message to the reply channel. + * + * @param {Object} msg The message + * + * @example + * webSocketBridge.send({prop1: 'value1', prop2: 'value1'}); + */ + + }, { + key: 'send', + value: function send(msg) { + this.socket.send(JSON.stringify(msg)); + } + + /** + * Returns an object to send messages to a specific stream + * + * @param {String} stream The stream name + * @return {Object} convenience object to send messages to `stream`. + * @example + * webSocketBridge.stream('mystream').send({prop1: 'value1', prop2: 'value1'}) + */ + + }, { + key: 'stream', + value: function stream(_stream) { + var _this2 = this; + + return { + send: function send(action) { + var msg = { + stream: _stream, + payload: action + }; + _this2.socket.send(JSON.stringify(msg)); + } + }; + } + }]); + + return WebSocketBridge; +}(); + +exports.WebSocketBridge = WebSocketBridge; + +},{"reconnecting-websocket":1}]},{},[2])(2) +}); \ No newline at end of file diff --git a/django_plotly_dash/version.py b/django_plotly_dash/version.py index f2915eb7..29cdca89 100644 --- a/django_plotly_dash/version.py +++ b/django_plotly_dash/version.py @@ -23,4 +23,4 @@ ''' -__version__ = "1.1.5" +__version__ = "1.2.0" diff --git a/make_env b/make_env index 1b70d588..b5d31776 100755 --- a/make_env +++ b/make_env @@ -1,8 +1,8 @@ #!/usr/bin/env bash # -# Create a virtualenv. Note that python 3.5 is the minimal requirement +# Create a virtualenv. Note that python 3.6 is the minimal requirement # -virtualenv -p python3.5 env +virtualenv -p python3.6 env # source env/bin/activate # diff --git a/requirements.txt b/requirements.txt index ee3650b5..cdd00780 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,11 +1,11 @@ -dash -dash-core-components +dash<1.11 +dash-core-components==1.9.0 dash-html-components -dash-renderer +dash-renderer==1.3.0 plotly dpd-components dash-bootstrap-components -Django>=2,<2.3 +Django>=2,<3 Flask>=1.0.2 diff --git a/setup.py b/setup.py index baf99677..ec7cdfd8 100644 --- a/setup.py +++ b/setup.py @@ -41,13 +41,13 @@ 'Documentation': 'http://django-plotly-dash.readthedocs.io/', }, install_requires = ['plotly', - 'dash', + 'dash<1.11', 'dash-core-components', 'dash-html-components', 'dash-renderer', 'dpd-components', - 'Django>=2', + 'Django>=2,<3', 'Flask>=1.0.2'], - python_requires=">=3.5", + python_requires=">=3.6", )