How to show changes to textarea live on website

Question

I've a website with several textareas I want all people accessing the website at the time to be able to write text in a 'textarea` so it is visible for everyone looking at the page at the time.

No security is needed, it's for a family game.

Is this something that is even possible?

Answer 1

I work a lot with real-time, here are a few alternatives and some demos I have created about the subject:

• Use socket.io or websockets to build a small two-way message relay system. You can see a sample of this in less than 100 lines to create a text area that works like a Google Docs document here: http://adelriosantiago.com/gitblog/eng/litepad. A demo and repository are included inside the article.

• Use shareDB if you want more flexibility. There is a sample of a textarea here which you can use as a starting point or you can use the boy.dog framework (disclaimer: I maintain boy.dog) especially if you don't want to start from scratch. With boy.dog you can make a real-time collaborative website in just 3 lines. It uses ShareDB internally and supports binding attributes like class and id to the real-time values.

• If you want a ready-made solution you can use Etherpad Lite. Etherpad is pretty much like a Google Docs document and there are many plugins to extend it.