Custom Element that encapsulates Palindrom, and channels its callback calls into DOM events.
<palindrom-connection remote-url="http://you.palindrom.url"></palindrom-connection>For the mean time, you can use it seamlessly with Polymer 1.x using palindrom-polymer. In the near future there will be middlewares for React and Vue.
Install the component using Bower:
$ bower install palindrom-connection --saveOr download as ZIP.
-
Import Web Components' polyfill, if needed:
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
-
Import Custom Element:
<link rel="import" href="bower_components/palindrom-connection/palindrom-connection.html">
-
Start using it!
<palindrom-connection remote-url="http://you.palindrom.url"></palindrom-connection>
It establishes the Palindrom connection when attached. All the changes made in browser are sent to the server via WebSocket or HTTP, as JSON Patches. All the changes from server are also received and propagated to your HTML using DOM events.
| Attribute | Options | Default | Description |
|---|---|---|---|
| debug | Boolean |
false |
Set to true to enable debugging mode |
| listen-to | String |
document.body |
DOM node to listen to (see PalindromDOM listenTo attribute) |
| local-version-path | JSONPointer |
/_ver#c$ |
local version path, set to falsy do disable Versioned JSON Patch communication |
| obj | Proxy |
{} |
notifies Object that will be synced |
| ot | Boolean |
true |
false to disable OT |
| ping-interval-s | Number |
5 |
Interval in seconds between heartbeat patches, 0 - disable heartbeat |
| purity | Boolean |
false |
true to enable purist mode of OT |
| remote-url | String |
window.location |
The remote's URL |
| remote-version-path | JSONPointer |
/_ver#s |
remote version path, set it to falsy to disable Double Versioned JSON Patch communication |
| use-websocket | Boolean |
true |
Set to false to disable WebSocket (use HTTP) |
| Name | Description |
|---|---|
| patch-applied | Fired when patch gets applied |
| patch-received | Fired when patch gets received |
| patch-sent | Fired when patch gets send |
| socket-state-changed | Fired when web socket state changes |
| reconnection-countdown | Fired when reconnecting. has milliseconds property in details, denoting number of milliseconds to scheduled reconnection |
| reconnection-end | Fired after successful reconnection |
See Palindrom docs.
pingIntervalS is directly forwarded to Palindrom, reconnection-countdown and reconnection-end events are directly based on respective callbacks.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
In order to develop it locally we suggest to use polyserve tool to handle bower paths gently.
- Install the global NPM modules bower & polyserve:
npm install -g bower polyserve - Make a local clone of this repo:
git clone git@github.com:Palindrom/palindrom-connection.git - Go to the directory:
cd palindrom-connection - Install the local dependencies:
bower install - Start the development server:
polyserve -p 8000 - Open the demo: http://localhost:8000/components/palindrom-connection/
- Open the test suite: http://localhost:8000/components/palindrom-connection/test/
For detailed changelog, check Releases.
MIT