Foxit PDF SDK for Web: Collaboration

Enabling multiple people to work on the same PDF is more important than ever before. Not only because of its role in the ‘going paperless’ approach that countless companies are utilizing across the globe, but also because of the benefits to your document workflows and productivity. In a world where streamlining business processes is key, this brings working remotely to the next level, as even though you are not in the same office as a colleague, you can still see the exact same version of a live document as they do. 

Quickly run collaboration example 

Please refer to quickly-run-samples to start the service, and then open the following address in the browser to access the collaboration example: 

http://127.0.0.1:8080/examples/UIExtension/collaboration/index.html(opens new window) 

Working principle 

First, open the API reference, there are collaboration related interfaces and classes as shown below: 

Among them, the operative keys are these: 

5. CollaborationCommunicator 

6. This interface is the communication bridge between the browser and the server. It is responsible for connecting to the server, creating a collaborative session, synchronizing data, etc. In the /examples/UIExtension/collaboration directory, there is a sockjs based communicator, you may refer to its implementation for more details. 

7. CollaborationDataHandler 

8. Suppose we have two client devices: client A and client B. When client A creates an annotation, its related annotation data will be sent to the server, where data will be further forwarded to the client B. When client B receives the data, it immediately repeats the same operation as the client A based on the data content. At this point, the data synchronization is realized. The above operation process of client B is implemented by the CollaborationDataHandler interface, which defines two methods: 

• accept(data: CollaborationData): Promise<boolean> 

• This method will be called and used to determine whether the current CollaborationDataHandler interface should handle the data when the data arrives. 
• receive(data: CollaborationData, builtinHandler?: CollaborationDataHandler) 
• When the accept() method returns true, this method will be called with two parameters. The first is the currently received collaborative data and the second is a built-in data handler. In some custom cases, you should decide whether to call the built-in data handler, since if the built-in data handler is called when the operation action is not defined in COLLABORATION_ACTION, there is no longer to do other synchronizing operations. 

9. CollaborationSessionInfo 

10. When the client opens a PDF file, it will send a request to the server to create a new session. This session contains a unique shareId and information about the current PDF file. In this way, after sharing the link with the shareId to other users, the other users can open this link and see the original PDF file and start the collaboration session. 

11. UserCustomizeCollaborationData 

12. Our API design allows users to customize collaborative operations. You can send custom collaborative data through the PDFViewer.collaborate API, and then receive the custom collaborative data in the custom CollaborationDataHandler to perform synchronization. 

13. COLLABORATION_ACTION 

14. Enumerations of the built-in collaboration actions. 

How does the collaboration work? The following section explain a complete process in details. 

Note: Our collaboration example uses Node.js as the backend server and uses websocket as a communication channel to establish a long connection for collaboration. 

15. Client A opens a PDF document, where the document information will be sent to server to start a new session with a unique shareId. In the browser, you will see the address like this: http://localhost:8080/examples/UIExtension/collaboration/index.html?shareId=2MF8Rp7-Q 

16. Client A shares the collaborative link to other clients, who will be connected to the same server once they open the link. 

17. Client A performs an action to create an annotation for example. The action operation data is sent to server synchronously on the background, and then forwarded to other clients. 

18. When other clients receive the synchronizing data, Web SDK will find the first data handler that accept the operation data, and process the received data using the CollaborationDataHandler, and then output the same action of the Client A on screen. 

At this point, a complete collaborative operation is completed!