Make Video Sharing Web App — Part III — Comment

Make Video Sharing Web App — Part II — Sync

This is a third entry of the journal of developing video sharing web app, VidU (Video with You). Please check out my first entry if you haven’t. In this entry, I will explain how I implemented Sync Mode through which multiple users can sync the playback position of the YouTube video to watch it together.

Here is a list of entries for this journal series.

Part I — Intro

Part II — Sync Mode

Part III — Comment

Part IV — Deployment with HTTPS, PostgreSQL, Nginx

Part V — Video Chat

Part VI — UI/UX

Part VII — Misc and Conclusion

How Comment Works

If you know NicoNico or Bilibili (Japanese and Chinese Video sharing platforms), you know how our comment works. The user makes comments on the video, and the comments “flow” on the video.

Comments flow on top of the video

The UI of this functionality is implemented by other person. I put the link to the author’s page here.

I implemented realtime feature of the comments functionality. Basically, when a user submits a comment,

1. The comment is stored in the database
2. The comment posted event is notified to everyone who is currently in the room, and show up realtime

The comment works as a chat message so that everyone in the room can see new comments without reloading the page. Make comments show up in real time is really cool because you can get immediate feedback from your friends.

I implemented by utilizing Pusher. As described in the previous Part II, Pusher enables real time communication between users. When a user enters the room, the browser subscribes to this particular room’s channel. In this channel, the frontend listens to “new-comments-posted” event. When a user submits a comment, “new-comments-posted” event is notified to everyone who subscribes to the room along with the content of the comment. Thus, the frontend processes the new comment to display on top of the video.

This same logic is used for bookmark and chatroom functionalities.

I will post the link to the github page to this project soon!

Thanks for reading so far. Next post will be about deployment of the app to the cloud! Stay tuned!