My partner and I are working on an application that allows people to collaborate in real time on an online music playlist. To achieve this goal, we utilized WebSockets to broadcast our changes across multiple browsers. WebSockets makes communication possible between users’ browsers and a server. This allows us to make changes on a host playlist and update other clients with new changes. The Ruby gem Faye is a publish-subscribe messaging system that enables clients to send information in real time, such as chat messages. This is how we accomplished the chatbox and playlist updates using Faye.

Firstly, Faye runs as a middleware layer because we need to talk to the Faye server which handles all the publishing and subscribing. Publishing is sending out what changes are made and those changes are reflected on the subscriber’s browsers. Here you can see the chat in action. In our chat form, we want to submit the message to our Faye server to broadcast to all subscribers. By default, the form will submit a post request to a Rails controller and let that controller handle the information. However, we used Javascript to prevent the default action and instead written our post request in JQuery. The $post function hits our chat messages controller where we tell Faye to broadcast the information that we want to the subscribers. And lastly, we tell the clients to subscribe to the Faye server when the page is rendered. The subscribe method tells the client, in JQuery, what element to look for on the page and in this case we append a new table row with the information we want to display.

Using the same methology, all elements on the page can be broadcasted amongst multiple clients.