Notebook import – an essential functionality of Apache Zeppelin. Of course the application provides a feature where you can create notes and share it; what if you want to use your notes in a different zeppelin server? Here comes the necessity of notebook import functionality.

I happened to encounter an issue where the notebook import failed for an upload size over 1 MB, which is a conventional bug that any developer in software industry faces in any application which has an import functionality in it. The right-away solution would be either to increase the size of the upload limit if the application owner approves, or to add a validation to warn the Zeppelin user to upload a notebook with a size less than 1 MB. This is a conventional solution and appears to be implemented with ease. But it had its own way of behaving complex when I had to implement.

The complexity of the implementation was due to the fact that it involved web sockets, which acts as a mediator for server-client interaction in Apache Zeppelin. The implementation demanded a thorough understanding of the work flow cycle of web socket in Apache Zeppelin, as in how it sends an event from the client side to the server side and how the server side java file responds back with the data and how the client uses the data after its reception.

An explanation on this would be helpful for any one who is trying to have a grip on understanding Angular Websocket service.

For any event that occurs on the client side, the webSocketEvents would be caught and the websocketEvents.factory.js (https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/components/websocketEvents/websocketEvents.factory.js) is triggered. Once it is triggered, the web socket connection is created and a ping operation is done in order to initiate interaction with the server.

When there is an ‘import file’ event, the controller.js will trigger the  websocketMsg.service.js (https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/components/websocketEvents/websocketMsg.service.js).  This will in turn trigger a new event for import file, which will make a call to the Zeppelin server.

There is an onMessage method in the server side which receives the file and imports it.

After the note file is imported, the message is broadcasted to the web socket from the server, and on receiving the message, the acknowledgement is broadcasted by the web socket to the client side.

After getting a grip on this, I made use of web sockets to send an event, receive the data, broadcast, catch and render it on the client side.

So understanding about the work flow of web sockets really helped me in solving the issue. This blog can be a one-time-look-guide which would help developers to implement angular web sockets in any project.