WebViewer is a powerful JavaScript-based PDF Library that is part of the Apryse SDK. It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate, and manipulate PDFs that can be embedded into any web project.
This is a WebViewer sample to show how you can construct a real time collaboration server for WebViewer through WebSocket, SQLite3, and Node.js server.
The below diagram depicts the structure of the real time collaboration sample app.
Before you begin, make sure your development environment includes Node.js. This sample requires version 13 of Node.js.
git clone https://github.com/ApryseSDK/webviewer-realtime-collaboration-sqlite3-sample.git
cd webviewer-realtime-collaboration-sqlite3-sample
npm install
npm start
In case your Windows development machine has restrictions on accessing port 8181, an error will return code: 'EACCES' and port: 8181. To solve this error, the easiest solution is to change to one accessible port. In Windows find the ports that are restricted with netsh interface ipv4 show excludedportrange protocol=tcp. To change the port, find the two locations in the files below and update to the new port:
//\server\annotationHandler.js
`const wss = new WebSocket.Server({ port: 8181});`
//\client\index.js
const url = `ws://${hostName}:8181`;
- Run a WebViewer instance with the
npm startcommand. An instance of the WebViewer will run on port 3000 using your default browser. - Open up two other browsers, one in incognito mode and another separate instance using a different major browser, all listening to port 3000.
- Create annotations with the annotations tools on one of the browsers, and observe the annotations appear on the other two browsers in real time.
- You can also access the real time server from a different device in the same network via replacing
localhostin your URL to the server's IP address.
If you are also using PDFTron's Android SDK, you can find the corresponding Android sample that will work out-of-box with this project: Android CollabWebSocketSample.
Refer to a running sample on Apryse SDK showcase page.
Any submission to this repo is governed by these guidelines.
For licensing, refer to License.