Translate this page:
Please select your language to translate the article


You can just close the window to don't translate
Library
Your profile

Back to contents

Software systems and computational methods
Reference:

Algorithm and software implementation of real-time collaborative editing of graphical schemes using Socket.IO library

Alpatov Aleksey Nikolaevich

ORCID: 0000-0001-8624-1662

PhD in Technical Science

Ph.D. of Engineering Sciences, Docent, Department of Instrumental and Application Software, Federal State Budget Educational Institution of Higher Education «MIREA — Russian Technological University»

78 Vernadsky Avenue, office G-225, Moscow region, 119454, Russia

alpatov@mirea.ru
Yurov Il'ya Igorevich

ORCID: 0009-0003-7121-4321

Master student, Department of Instrumental and Application Software, Federal State Budget Educational Institution of Higher Education «MIREA — Russian Technological University»

109383, Russia, Moscow region, Moscow, Polbina str., 35k2, 912

frit_027@mail.ru

DOI:

10.7256/2454-0714.2024.1.70173

EDN:

PQMMUM

Received:

20-03-2024


Published:

31-03-2024


Abstract: In the modern world, teamwork is becoming more and more common. Different participants may be in different places, but they still need to work together on the same project, including graphic diagrams. An important aspect of this approach is the ability to observe changes made by other participants in real time. This allows, first of all, to reduce the frequency of conflicts when simultaneously editing the same schema element. However, existing solutions for sharing data in real-time collaborative editing of graphical diagrams face a number of problems, such as delays in data transmission. The subject of research in this article is the development of a minimum viable web application that allows users to perform collaborative graphical editing of a canvas in real time. The object of the study is a model of the process of collaborative editing in real time, taking into account the resolution of emerging conflicts. The research methodology is based on a theoretical approach to identifying mathematical formulas that describe changes in the state of a document when it is jointly edited by users. The characteristics of the use of the HTTP and WebSocket protocols in multi-user client-server applications are given. To use the WebSocket protocol, the Socket.IO library is used. The application server is built using the Express framework. The authors' main contribution to the topic is a model of the real-time collaborative editing process, as well as a mechanism for detecting conflicts for any number of users and a conflict resolution function for each pair of conflicting changes when online collaborative editing of documents. Within the framework of this study, an algorithm for collaborative editing of graphic schemes in real time is additionally proposed and its implementation in the form of a software system is given. The algorithm proposed as a result of the study in the JavaScript programming language can be used as a basis for developing more rich web applications using the Socket.IO library and be the object of future research affecting multi-user interaction and real-time conflict resolution.


Keywords:

HTTP protocol, WebSocket protocol, client-server application, collaborative editing, conflict detection, conflict resolution, JavaScript programming language, graphic scheme, algorithm, event driven

This article is automatically translated.

Introduction

The HTTP protocol appeared at the end of the 20th century and during this time became the predominant data transfer technology used in the development of client-server applications in a web environment [1]. The HTTP protocol is based on the principle of "request-response", when the client sends the desired request, for example, GET or POST, and the server, depending on the type of request, performs the necessary actions and returns the necessary data to the client. To implement an algorithm for co-editing graphical schemes in real time, the HTTP protocol reveals significant disadvantages: the lack of bidirectional and full-duplex communication between system components [2]. As a result, the process of exchanging mouse cursor coordinates between the server and clients when drawing lines in the browser can cause delays and put additional load on the server.

The WebSocket protocol lacks the indicated disadvantages. The technology allows the web server and the browser to exchange data over the same connection simultaneously in both directions [3]. The server can send a message at any time to all clients who have previously established a connection with it. Similarly, any client can send the necessary data to the server over the same connection [4].

But when using the WebSocket protocol without auxiliary libraries, the implementation of an algorithm for co-editing graphical diagrams in real time will require the development of additional procedures to ensure the smooth and stable operation of system components. As part of this work, a solution to this problem will be proposed through the use of a JavaScript library Socket.IO , which adds event management, automatic reconnection upon disconnection, multiplexing and other functions [5].

Real-time collaborative editing process model

Let's say there are two users, A and B, who work on the same graphical scheme in different processes. Let D(t) represent the current state of the document at time t in the process of co-editing the graphic scheme. Let's assume that each user makes changes to a document independently of other users, and all changes are synchronized in real time.

Then the process of joint editing can be described by the following formula:

where D 0 is the initial state of the document before the start of editing, ?D i(t) are the changes made by the ith user at time t, n is the number of users involved in editing.

Thus, the current state of the document D(t) is the sum of the initial state of the document and all the changes made by each user in real time. This approach reflects the dynamics of the process of joint editing of a graphic scheme in web applications and takes into account the contribution of each participant to the formation of the final state of the document.

Various conflicts may arise during the joint editing of documents online (conflict of insertion, deletion, formatting, moving, etc.) [6]. Let's look at the process of data conflicts in a web application for collaborative document editing. Let's assume that each user who edits a graphical diagram has his own local set of data about the state of the document. Let D A(t) and D B(t) represent the current state of the document for user A and user B at time t. Then a conflict can be defined as follows: a conflict occurs if users A and B have made changes to the same node or connection of the graphic scheme during time period t — the time interval during which changes can be considered conflicting.

In other words, both users start editing the document at time t 0. User A has made changes to the document, resulting in a change in its state from D(t 0) to D A(t 1) at time t 1, or D A(t 1) = D(t 0) + ?D A(t 1). User B has also made changes to the document, which causes its state to change from D(t 0) to D B(t 2) at time t 2 or D B(t 1) = D(t 0) + ?D B(t 2). Now if t 1 < t 2, then there is a conflict, since both users made changes to the document at different times.

The formula for determining edit time conflicts can be written as follows:

where n is a node or link, (n, t) represents the change made by the user to node or link n at time t.

The conflict detection formula for any number of users n can be written as follows:

where n is a node or connection.

If the same changes are detected for users A and B in the same node or connection during the interval t, then this is considered an editing conflict.

Let

— this is a set of changes made by the user U i at time t, where k i is the number of changes.

For each change ? i,j(t), we define its compatibility with the current state of the document as C i,j = f(? i,j(t), D(t)). Then the conflict of compatibility of changes (two changes are incompatible) is determined by

Then, for each pair of conflicting changes, you can apply a conflict resolution function of the form

where ? i,j,k,l(t) is the result of resolving the conflict between changes ? i,j(t) and ? k,l(t) at time t, ? i,j(t) and ? k,l(t) are changes that conflict with each other, D(t) represents the current state of the document at time t.

The g function is used to resolve the conflict between these two changes. It accepts two conflicting changes ? i,j(t) and ? k,l(t) as well as the current state of the document D(t) and returns the resolved change. Her task is to determine which of these changes should be applied to the document. The g function can be implemented using various conflict resolution algorithms and strategies and depending on the nature of the conflict. For example, if the changes ? i,j(t) and ? k,l(t) are not mutually exclusive, the function g can combine them into one change. Practically, this can be used to resolve a situation where one change inserts text and another change adds formatting to that text, they can be combined into a single change that inserts text with formatting. So ? 1(t) represents a change that inserts Text 1 into position Pos 1, and ? 2(t) represents a change that adds Format 2 formatting to this text. Then the function g will take the following form:

where ? merged(t) is a combined change that inserts Text 1 using Format 2 formatting at position Pos 1.

An algorithm for co-editing graphical diagrams in real time

The implementation of the algorithm should begin with writing the backend of the application. A server with the right port can be created in various ways, but in this study the minimalistic Express framework was used [7]. After that, initialize the io instance using the Server class provided by the library Socket.IO by passing a previously created server object to its constructor [8]. After receiving the WebSocket server, you need to add event listeners and handlers for them. In this algorithm, the server waits for two events: connection and draw. When the first event occurs, the server generates a color event and transmits a random HEX color code for the user's graphic lines to the newly connected client. When the draw event occurs, the server sends the received coordinates of the mouse cursor movement point of a particular user to all other clients of the system over the same connection. Figure 1 shows the code of the described part of the algorithm with an instance of io.

Figure 1. The server part of the algorithm with an io instance

In the client part of the algorithm, first of all, initialize the socket instance and subscribe it to two events: color and draw. In the handler of the first event, the strokeStyle variable will store the color received from the server. In turn, in the draw handler, the client will receive the coordinates of the mouse cursor of another user from the server and build a graphic line on his screen using them using the special drawLine() function. It is worth noting that the line itself is displayed using standard JavaScript tools, namely the Canvas API tool [9].

 Then you need to initialize the necessary variables with initial values, get the canvas element from the HTML code of the page and bind three events to it: mousedown (the user clicked the mouse on the graphic area), mousemove (the user moves the mouse with the button held down) and mouseup (the user lowered the mouse button) [10]. Each of these events has its own handler. When the mousedown event occurs, the algorithm saves the initial coordinates of the startX and startY mouse cursor to the previously created mouse object and sets the isDraw variable to true. At the mousemove event, if the isDraw value is true, the following endX and endY coordinates of the mouse cursor are saved, after which all data is sent to the server via the web socket connection of the draw event and a graphical line of the current user is built.

Then, the endX and endY values are written to the properties of the mouse startX and startY object, respectively. Figure 2 shows the mousemove event handler code.

Figure 2. mousemove event handler code

When the last mouseup event occurs, the isDraw variable is set to false.

After starting the server locally, you can test the algorithm by drawing a few simple geometric shapes in three different browsers. The result is shown in Figure 3.

Figure 3. The result of the algorithm

Conclusion

We can conclude that using the Socket library.IO it is possible to implement applications for joint editing of graphic schemes in real time based on the described algorithm. The method proposed in this paper has shown its stability and ease of implementation. It is worth noting that this algorithm is awaiting improvements if, for example, it is necessary to draw smooth graphic shapes with one mouse movement, which will require additional future research. Nevertheless, the resulting algorithm is a convenient basis for more complex programs.

References
1. Knyazev, A.A., Kondratiev, A.N., & Dubrovsky, N.S. (2023). Evolution and features of the HTTP protocol. Innovative potential for the development of society: the view of young scientists: a collection of scientific articles of the 4th All-Russian Scientific Conference of Advanced Developments, 176-178.
2. Kovaliuk, D., Kovaliuk, O.O., Pinaieva, O., Kotyra, A., & Kalizhanova, A. (2019). Optimization of web-application performance. Symposium on Photonics Applications in Astronomy, Communications, Industry, and High-Energy Physics Experiments (WILGA).
3. Gursesli, M.C., Selek, M.E., Samur, M.O., Duradoni, M., Park, K., Guazzini, A., & Lanatà, A. (2023). Design of Cloud-Based Real-Time Eye-Tracking Monitoring and Storage System. Algorithms, 16, 355.
4. Gorchakov, A.Y. (2018). Development of a client architecture for an instant messaging system using WebSocket technology. Gagarin Readings-2018: Collection of abstracts of the XLIV International Youth Scientific Conference, 2, 209.
5. Shabanov, A.E. (2022). Review of the socket.io library. Information and computer technologies in economics, education and social sphere, 1(35), 56-62.
6. Tsareva, E.V. (2016). Resolving conflict situations during synchronization of multi-user online applications. Bulletin of Tomsk State University. Management, computing and information science, 1(34), 79-91.
7. Chernyshev, Y.R. (2023). Development and self-hosting of a web application based on the Express.js framework. Student science – a look into the future: Proceedings of the XVIII All-Russian Student Scientific Conference, 5, 291-293.
8. Karam, S., & Abdulrahman, B.F. (2022). Using Socket.io Approach for Many-to-Many Bi-Directional Video Conferencing. AL-Rafidain Journal of Computer Sciences and Mathematics.
9. Macklon, F., Viggiato, M., Romanova, N., Buzon, C., Paas, D., & Bezemer, C. (2022). A Taxonomy of Testable HTML5 Canvas Issues. IEEE Transactions on Software Engineering, 49, 3647-3659.
10. Kochitov, M.E. (2019). Drawing with a computer mouse on the canvas of a browser web page using the Canvas tool. Postulate, 8(46), 25.

First Peer Review

Peer reviewers' evaluations remain confidential and are not disclosed to the public. Only external reviews, authorized for publication by the article's author(s), are made public. Typically, these final reviews are conducted after the manuscript's revision. Adhering to our double-blind review policy, the reviewer's identity is kept confidential.
The list of publisher reviewers can be found here.

In the article, the authors describe in detail the problems of existing methods of interaction in web applications, focusing on the disadvantages of the HTTP protocol for collaboration tasks and offering the use of WebSocket with a library as a solution. Socket.IO . The research methodology is represented by the development of a model of the collaborative editing process and an algorithm that implements this model in real time. Special attention is paid to conflict handling while making changes by different users at the same time. The methodology combines theoretical analysis and practical development, demonstrating the example of web application development. The relevance of the study is obvious, given the growing need for online collaboration tools. Modern web technologies offer new opportunities for the development of such applications, and the search for optimal solutions in this area is of great interest. The scientific novelty lies in the development of a specific algorithm using the Socket library.IO for solving the problem of joint editing of graphic schemes. A special feature is a detailed description of the conflict handling mechanism that occurs when editing a single document at the same time. The article has a clear structure, including an introduction, a description of the problem, the development of a process model, a description of the algorithm and a conclusion. The presentation style is scientific, the content is presented logically and consistently. Illustrations and diagrams effectively complement the text, contributing to a better understanding of the material. The bibliography contains relevant sources, which indicates the careful approach of the authors to the study of the subject. The list of references is a mixture of works on theoretical foundations and practical developments in the field of web technologies. The article will be of interest to both computer science researchers and practicing developers interested in creating collaborative editors and real-time applications. The findings highlight the potential of using the Socket library.IO to solve the problem of collaborative editing of graphical diagrams, and also indicate the possibilities of further research in this direction, including performance optimization and user interface improvement. The authors confidently demonstrate how their development can serve as the basis for more complex and functional collaboration systems. They also note the need for further research to solve specific problems, for example, the implementation of more complex graphical shapes and integration with other real-time interaction tools. The article is of considerable interest to the scientific community and practitioners in the field of software development for collaboration. The material is presented in an accessible, reasoned manner and provided with the necessary examples and illustrations. However, the authors may be invited to finalize the following aspects: a more detailed discussion of the potential limitations of the proposed solution and a more in-depth analysis of existing alternative approaches to real-time collaborative editing. This will strengthen the position of the work in the context of modern research and development. I also recommend splitting Figure 4 into several parts (in the form of separate drawings) with their detailed description. Based on the above, I recommend the article for publication after completing the minor improvements mentioned above, in order to further strengthen the argumentation and validity of the selected decisions.

Second Peer Review

Peer reviewers' evaluations remain confidential and are not disclosed to the public. Only external reviews, authorized for publication by the article's author(s), are made public. Typically, these final reviews are conducted after the manuscript's revision. Adhering to our double-blind review policy, the reviewer's identity is kept confidential.
The list of publisher reviewers can be found here.

The subject of the research in the reviewed article is the algorithm and software implementation of joint editing of graphic schemes in real time using the library Socket.IO . The research methodology is based on the generalization of information from scientific publications on the topic under study, the software implementation of the proposed algorithm. The authors attribute the relevance of the work to the presence of significant shortcomings in the HTTP protocol for implementing an algorithm for co-editing graphical schemes in real time (lack of bidirectional and full-duplex communication between system components), due to which the process of exchanging mouse cursor coordinates between the server and clients when drawing lines in the browser can cause delays and put additional load on the server. The scientific novelty of the reviewed research, according to the reviewer, consists in suggestions for using the JavaScript library Socket.IO which, when editing graphics schemes together, adds event management, automatic reconnection when the connection is disconnected, multiplexing and other functions. The following sections are structurally highlighted in the article: Introduction, a model of the real-time collaborative editing process, an algorithm for collaborative editing of graphical schemes in real time, Conclusion, Bibliography. The authors consider a situation where two users are working on the same graphical scheme in different processes, each user makes changes to the document independently of other users, and all changes are synchronized in real time. The publication shows the server side of the algorithm, implemented using the minimalistic Express framework. According to the authors, the use of the WebSocket protocol allows the web server and the browser to exchange data over the same connection simultaneously in both directions, the server can send a message at any time to all clients who previously established a connection with it. As a result of the study, the authors conclude that using the Socket library.IO it is possible to implement applications for joint editing of graphic schemes in real time based on the described algorithm. The bibliographic list includes 10 sources – publications of domestic and foreign scientists on the topic of the article, to which there are targeted links in the text confirming the existence of an appeal to opponents. Among the significant disadvantages of the publication, it should be noted that Figure 4 is not readable, and judging by the text of the article, it reflects the results of the study in the form of a generalized scheme of the proposed algorithm for joint editing of graphic schemes in real time. The article reflects the results of the research conducted by the authors, corresponds to the direction of the journal "Software Systems and Computational Methods", contains elements of scientific novelty and practical significance, may be of interest to readers, but needs to be finalized in accordance with the comment made.