add getstream.io 2 keys

Author: maearon

app/channels/message_channel.rb

@@ -0,0 +1,11 @@
+# app/channels/message_channel.rb
+class MessageChannel < ApplicationCable::Channel
+  def subscribed
+    # Stream from a channel based on the current user's ID or another identifier
+    stream_from "message_channel_#{current_user.id}"
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+end

app/controllers/messages_controller.rb

@@ -14,6 +14,13 @@ def create
     end
   end
 
+  def unread_count
+    # Assuming you have a method to fetch unread count for the current user
+    unread_count = Message.where(user_id: current_user.id, read: false).count
+
+    render json: { unreadCount: unread_count }
+  end
+
   private
     def set_room
       @room = Room.find(params[:room_id])

app/javascript/channels/chat_channel.js

@@ -1,15 +1,25 @@
-import consumer from "./consumer"
+import { createConsumer } from "@rails/actioncable"
 
-consumer.subscriptions.create("ChatChannel", {
-  connected() {
-    // Called when the subscription is ready for use on the server
-  },
+const consumer = createConsumer()
 
-  disconnected() {
-    // Called when the subscription has been terminated by the server
-  },
+document.addEventListener("DOMContentLoaded", () => {
+  const room = document.getElementById("chat-room-id").value
+  const chatChannel = consumer.subscriptions.create(
+    { channel: "ChatChannel", room: room },
+    {
+      received(data) {
+        console.log("Received message:", data.message)
+        // Handle the received message (e.g., append to chat log)
+      },
+      sendMessage(message) {
+        this.perform('send_message', { message: message })
+      }
+    }
+  )
 
-  received(data) {
-    // Called when there's incoming data on the websocket for this channel
-  }
-});
+  // Example usage
+  document.getElementById("send-button").addEventListener("click", () => {
+    const message = document.getElementById("message-input").value
+    chatChannel.sendMessage(message)
+  })
+})

app/models/message.rb

@@ -1,4 +1,15 @@
 class Message < ApplicationRecord
   belongs_to :room
   broadcasts_to :room
+
+  after_create_commit :broadcast_unread_count
+
+  private
+
+  def broadcast_unread_count
+    # Replace this with your logic to calculate unread messages
+    unread_count = Message.where(user_id: self.user_id, read: false).count
+
+    ActionCable.server.broadcast("message_channel_#{self.user_id}", { unread_count: unread_count })
+  end
 end

client/.env-example

@@ -1,6 +1,6 @@
 POSTGRES_PRISMA_URL=postgresql://postgres:@localhost:5432/ruby_rails_boilerplate_development
 POSTGRES_URL_NON_POOLING=postgresql://postgres:@localhost:5432/ruby_rails_boilerplate_development
-NEXT_PUBLIC_STREAM_KEY=
-STREAM_SECRET=
+NEXT_PUBLIC_STREAM_KEY=6cqupfrs4qh3
+STREAM_SECRET=djkppj5rnre3bfqvraufhv8asfkbtngjpx8np7xhnumnege5542sg4vvcx7wx5xq
 NEXT_PUBLIC_UPLOADTHING_APP_ID=
 CRON_SECRET=

client/README.md

@@ -2,6 +2,44 @@
 
 A full-stack social media app with infinite loading, optimistic updates, authentication, DMs, notifications, file uploads, and much more.
 
-Watch the free tutorial on YouTube: https://www.youtube.com/watch?v=TyV12oBDsYI
+Watch the free tutorial on YouTube PART 1: https://www.youtube.com/watch?v=TyV12oBDsYI
+
+Timestamps:
+0:00 - Project overview
+16:54 - Project & IDE setup (create-next-app, Shadcn UI, Prettier Tailwind plugin, Prisma, extensions)
+40:52 - DB setup (Vercel Postgres + Prisma ORM)
+46:02 - Lucia Auth setup (username, email, password login)
+2:35:11 - Navbar, SessionProvider, user button
+3:17:41 - Dark mode (next-themes)
+3:24:00 - Responsive sticky sidebar/bottom bar
+3:34:21 - Creating posts (TipTap editor)
+3:52:06 - Loading posts server-side (server component)
+4:08:42 - Trending topics sidebar (unstable_cache, Suspense)
+4:35:25 - React Query introduction (useQuery, QueryClient, QueryClientProvider, ReactQueryDevTools)
+4:52:59 - Ky setup
+4:57:46 - useInfiniteQuery (infinite loading, cursor-based pagination, react-intersection-observer)
+5:22:29 - React Query cache mutation (useMutation, setQueriesData vs invalidateQueries)
+5:41:21 - Deleting posts
+6:08:50 - Follow feature (React Query optimistic updates)
+6:53:47 - Following feed (Shadcn UI customization)
+7:01:21 - User profile page (generateMetadata, loading.tsx, not-found.tsx)
+
+Watch the free tutorial on YouTube PART 2: https://www.youtube.com/watch?v=1nKETjqJluI&t
+
+Timestamps:
+0:00 - User tooltip & react-linkify-it
+30:26 - Update user profile & upload avatar (UploadThing, react-cropper, react-image-file-resizer)
+1:42:48 - Post media uploads (image & video)
+2:38:48 - Drag & drop and copy-paste uploads
+2:46:07 - Cron job to delete orphaned uploads (Vercel cron)
+2:57:52 - Post details page
+3:14:58 - Likes feature (optimistic updates)
+3:35:14 - Bookmarks feature
+3:50:27 - Comments feature (with infinite loading)
+4:49:02 - Notifications feature (Prisma transactions)
+5:39:06 - Direct messages feature (Stream Chat)
+7:20:36 - Google signin (OAuth2, Lucia)
+7:48:20 - Search feature (+ rewrites)
+8:01:51 - Deployment (Vercel, custom install command)
 
 ![thumbnail 7](https://github.com/user-attachments/assets/686b37e4-3d16-4bc4-a7f2-9d152c3addf5)