Working with Socket.io using dataProcessor

Gantt
#1

Hi,

Does dataProcessor work when using websocket (Socket.io) with a node/mongodb backend? As it currently only works using REST API AFAIK.

Or what are the alternative available?

Thanks.

#2

Hello Joseph,
The Data Processor uses only RESTful API. It has several transaction methods like "POST" and "REST" but it doesn’t work in a different way:
https://docs.dhtmlx.com/gantt/desktop__server_side.html#technique
I don’t specialize in node.js and MongoDB and we didn’t check node.js with MongoDB so I cannot tell you if it works correctly there or if you need to apply an additional configuration to make it work.

But it should work correctly in a node.js application with an SQL database:
https://docs.dhtmlx.com/gantt/desktop__howtostart_nodejs.html

#3

Hi @ramil,

Thanks. As I have tried to use dataProcessor with REST but seem to have some issue when I tested it awhile back. Currently, am using my own way to update the data to store in backend through web-socket implementation. It’s working fine.

I was only trying out to see if I could tap onto dataProcessor to do it through WS.

Regards,

#4

Hi,

I came across data processor and I should be able to use custom routing to push CUD event through websocket right?

For the sample list with the following…

var dp = gantt.createDataProcessor(function(mode, taskState, data, rowId) {
		var workData = [];

		if (localStorage[mode]) {
			workData = JSON.parse(localStorage[mode]);
		}

		switch(taskState) {
			case "create":
				workData.push(data);
			break;
			case "update":
				var itemIndex = workData.findIndex(function(entry, index) {
					return entry.id == rowId;
				});
				workData[itemIndex] = data;
			break;
			break;
			case "delete":
				var itemIndex = workData.findIndex(function(entry, index) {
					return entry.id == rowId;
				});
				workData.splice(itemIndex, 1);
			break;
		}
		
		localStorage[mode] = JSON.stringify(workData);
	});

Is this automatically triggered whenever I make a call to gantt.addTask, gantt.updateTask and gantt.deleteTask? Meaning to say, if I do a gantt.addTask, workData.push(data); will be triggered automatically as it’s a create action.

Thanks.

#5

Hello Joseph,
Yes, you can use custom routing, sorry that I didn’t tell you that it is possible to use that option.

If you use the Data Processor, it will always try to send changes to the server side when you create, modify(update) and delete tasks and links.
Here is the sample with your code, which shows the output in the web console:
http://snippet.dhtmlx.com/217e34d6e
And here are other snippets, where Gantt sends the changes to the server side with custom routing:
https://snippet.dhtmlx.com/0763f65c2

https://snippet.dhtmlx.com/87d4edc67

#6

Thanks @ramil. May be useful for my case. Will try it out.

#7

Hi @ramil,

Can I just verify that I can use dataProcessor as a standalone function that that do anything I like for each of the action?

var dp = gantt.createDataProcessor(function(entity, action, data, id) { 
    switch(action) {
        case "create":
           // call my internal method to create in backend db
           console.log('create');
        break;
        case "update":
           // call my internal method to update in backend db
           console.log('update');
        break;
        case "delete":
           // call my internal method to delete in backend db
           console.log('delete');
         break;
   }
});

And that dataProcessor logic will be processed only after any events, or rather onBefore[Entity][Action] and onAfter[Entity][[Action]?

So if I call gantt.addTask will trigger onBeforeTaskAdd > onAfterTaskAdd > dataProcessor - Create.
Similarly for gantt.updateTask and gantt.deleteTask?

In that case, how about if I am doing a batchUpdate method call? Cause within the batchUpdate method, it would call gantt.updateTask, does that mean that dataProcessor - Update will be called one by one, or also as a batch? If it is by batch, how would that work exactly?

Thanks.

#8

Hello Joseph,

Can I just verify that I can use dataProcessor as a standalone function that that do anything I like for each of the action?

Yes, you can create a Data Processor and add your code to update the data on the server side.

And that dataProcessor logic will be processed only after any events, or rather onBefore[Entity][Action] and onAfter[Entity][[Action]?

So if I call gantt.addTask will trigger onBeforeTaskAdd > onAfterTaskAdd > dataProcessor - Create.
Similarly for gantt.updateTask and gantt.deleteTask?

The Data Processor will try sending the changes to the server-side only after Gantt events:

onBeforeTaskAdd > onAfterTaskAdd > dataProcessor - Create.

It works the same way for updating and deleting tasks.

Also, the Data Processor has its own events, for example, onBeforeDataSending allows you to define if the changes should be sent to the server or not:
https://docs.dhtmlx.com/api__refs__dataprocessor.html

In that case, how about if I am doing a batchUpdate method call? Cause within the batchUpdate method, it would call gantt.updateTask, does that mean that dataProcessor - Update will be called one by one, or also as a batch? If it is by batch, how would that work exactly?

The batchUpdate method allows you to update all tasks at once and apply and repaint the changes at once instead of doing that each time you update a task.
However, it doesn’t work the same way for the data processor. If you want to send all changes at once, in addition to the batchUpdate method, you need to turn on the second parameter in the setTransactionMode option:
https://docs.dhtmlx.com/api__dataprocessor_settransactionmode.html
Unfortunately, that method works only in the “POST” transaction mode.
Here is an example of how it works:

http://snippet.dhtmlx.com/264f415eb

#9

Hi @ramil,

Alright, I will look more into it, and play around with it.

Noted, thanks!

I’ll come back after I tried out some of the features, and if I have any more questions.