@bradlymathews
- So, you add this link into your libraries.
'
https://cdn.ably.com/lib/ably.min-1.js'
The new library adds in some special functions specific to ably.
- Then you add in these functions to your preloaded JavaScript.
You need the 'const anyName = new Ably.Realtime.Promise('youAblyAuthKey');'.
You need a variable setup that represents a specific ably channel as well. You can see I have a few. The channel can be called anything and does not need to be setup before hand. It is created simply by it existing when the preload initializes. These channels allow you to organize different data structures and control what happens on the recieving end when the data pushes into the app.
You also need a function that you will call in your app when it is time to propagate data to all app instances. This function references a specific channel variable and returns it.
- then you can setup the initializing JS query in your app.
I have my query set like,
await drawingsSync().subscribe('drawingProgress', message => {
if(!!message.data) activeItems.setIn([message.data.catalogId], message.data.inProgress);
});
I'm using an await just so that I can pause the app on load until I'm certain the ably connection is fully established. It connects faster then I can perceive so probably not really necessary to have the await.
So, it subscribes to one of the channels setup in the preload. You could have is subscribe to multiple channels. This function is what actually gets triggered when something is sent over the channel. The message has a .data which will hold the JSON if you choose to send JSON. In my case, in the trigger function, I check that there is actually data in the .data object and then add it into a temp state.
- Then you can send data to the channel from any script using a special function.
I have hightlighted this function.
drawingsSync().publish('drawingUpdate', updatedItem);
The drawingsSync() function is a function that was created in the preload that returns one of the channel variables.
So, that how it is hooked up. I don't completely understand how it is possible for it to work though. What I am always wondering is, "how the hell is that function setup in the JS page load query getting triggered when I am not directly triggering it?". There is clearly something magical happening within the ably library. But, it does work and it does work with great stability. I have never had it not work.
Something to note, unlike pusher, the app that sends out the data to a channel will also receive the same data that it sends.
