Real time collaborative editors – how do they work
I like reviewing how things are done under the hood. Web development is not my specialty. So I’m checking how real time collaborative editors work.
Codeshare.io is an application that allows collaborative coding. It’s great for reviewing a piece of code with somebody. Even for remote coding interviews. Its engine is a code editor powered by codemirror that uses WebSockets.
Awwapp is a real time collaborative whiteboard. Great for discussing topics that needs drawing support or even just playing with someone.
How do real time collaborative editors work?
Technically, establishing a full duplex TCP socket connection using the technology called WebSockets. This technology is present in the internet for about 10 years.
Minimum example with NodeJS and Socket.io
I created a minimum example using nodejs and socket.io for a textarea HTML element. No external editors used. In this example, text updates bidirectionally between all connections. Easy to see how it works.
I have uploaded it at Github here: minimum real time collaborative editor example.
Hope you enjoy!