Social Music App
Confused about "Social Music App"?
Let us know how we can improve our documentation:
This tutorial explains how to use Stream to build a scalable social network for music. In this example app, you can follow your friends, artists and playlists. We're going to support the following features:
Timeline/News Feed
Hashtags
@mentions
Likes & Comments
Notification Feed
Realtime Changes
Step 1: Setting Up The Feed Groups
Copied!First of all, we need to create feed groups for everything you can follow. For this app that will be: "user", "artist" and "playlist". Next, we'll need feeds to display the data. So we'll create the "timeline", "notification" and "tag" feeds groups. Take a moment to go to the dashboard and create these 6 feed groups. The "notification" feed group should be the "notification" feed type. The other 5 feed groups can be of the "flat" type.
Step 2: Follow Users, Artists and Playlists
Copied!The example below shows you how to follow users, artists and playlists.
Step 3: Posting An Update
Copied!Let's dive straight into an example of how to add an activity:
First of all, note how easy it is to add an activity. Certain fields like actor
, verb
and object
are mandatory. Message
is a custom field. You can add as many custom fields as you like. You can store numbers, strings, lists, and even objects.
The TO
field is comparable to how CC works for email. For a production app, we recommend storing the activity in your database and syncing it to Stream.
Step 4: Likes & Comments
Copied!When a user likes an activity or writes a comment, you'll want to do two things:
Notify the author of the original activity
Show the like/comment to followers
The example below uses the TO
support to write both to the user:chris
and notification:jack
feeds:
Step 5: Reading a Feed
Copied!It's easy to read a feed. You can use either offset
or id_lt
based pagination. For larger apps, we recommend filtering using id_lt
as it performs much better.
The notification feed also includes the count of unseen and unread activities.
Step 6: Realtime Changes
Copied!Stream allows you to listen to feed changes in realtime. You can use either websockets, SQS queues, or Webhooks to receive notifications. The following code creates a web socket connection to receive feed updates: