#113 Kredis Live counter, HTTP vs Websocket Turbo Broadcasts

22/02/2023
Free
kredis hotwire turbo actioncable live update redis live counter websockets

In the two previous episodes we use Kredis to store website visitors and users online. Let's dive deeper into what Kredis is and other ways we can use it!

Redis is now baked into Rails by default.
Kredis let's you easily save and retrieve data from Redis.
Killer feature of Kredis - reference ActiveRecord objects with Redis attributes.
For example - sstore User preferences in Redis, not Postgresql.
There are a lot of usecases for Kredis, and in this video I explore just a few.

In THIS episode we will build a counter with a PLUS and MINUS button.
When clicked, the two buttons will be able to increase or decrease the counter respectively.
We will also use Turbo Streams to update the counter without having to refresh the page.
We will compare HTTP turbo streams that send updates only in the window where the action happened, with turbo stream broadcasts, that send updates to ALL the clients that have a page open.

Episode source code: https://github.com/corsego/113-kredis-counter/commit/7819719780b7bd46770b8d1cafc156674fa85df2
Blogpost - kredis overview: https://blog.corsego.com/gem-kredis-intro

0:00 Redis in Rails 7
1:09 install Kredis
1:39 use Kredis from Rails console, Kredis list (array)
2:30 Kredis unique list (array)
3:26 Kredis counter (integer)
3:54 display Kredis counter in Rails view
5:58 button to increment counter
7:16 button to decrement counter
8:05 refresh counter with HTTP Turbo Streams
11:20 push live counter updates with Turbo Stream Broadcasts that use ActionCable and Websockets
13:30 Works! Counter gets updated in all browser windows!

0
Sign in to join the conversation

Current playlist

#59 Hotwire Turbo Streams CRUD #60 Hotwire Turbo Streams Autocomplete Search #63 Hotwire Modals (the right way)
+28
Just enough Hotwire for Rails developers
#1

#59 Hotwire Turbo Streams CRUD

40:56
#2

#60 Hotwire Turbo Streams Autocomplete Search

27:28
#3

#63 Hotwire Modals (the right way)

21:15
#4

#65 Hotwire SPA: Flash Messages

27:34
#5

#66 StimulusJS: Targets, Values, Classes. Build a PRO dropdown

34:30
#6

#67 Streams: Infinite Scroll Pagination

18:06
#7

#68 Frames: Infinite Scroll Pagination

17:47
#8

#69 Frames + Streams: Infinite Scroll Pagination (Best approach)

08:40
#9

#70: Hotwire: Live form validations and previews

18:46
#10

#73 Hovercards with Hotwire Turbo Frames

14:03
#11

#75 ActsAsVotable: likes, bookmarks, hotwire, vote scopes, cached votes

52:20
#12

#80 Dynamic Forms with Turbo (not JS approach)

18:23
#13

#81 StimulusJS: Conditionally display form fields based on selected value

08:21
#14

#82 Chained Select Fields in a form. Gem City-State

22:56
#15

#84 Cookies Consent Banner

10:10
#16

#98 Inline editing attributes with Hotwire

14:38
#17

#99 Hotwire: Search and Infinite Pagination (Ransack with Pagy)

17:26
#18

#100 Browser tab title notifications

16:43
#19

#110 Realtime Online User Tracking with Actioncable, Kredis, Turbo Broadcasts

24:13
#20

#113 Kredis Live counter, HTTP vs Websocket Turbo Broadcasts

13:59
#21

#119 Trello Clone. Advanced Kanban Drag and Drop Sortable Lists with Hotwire

42:19
#22

#121 Turbo Broadcasts CRUD Demystified

24:20
#23

#143 Turbo Permanent: persist Audio Video and Search results while navigating pages

06:30
#24

#144 Why I am replacing Turbo Frames with Streams for ActsAsVotable?

09:17
#25

#148 DataTables without page refresh using Hotwire Turbo Frames

10:59
#26

#151 Advanced Hotwire modals

21:29
#27

#152 Custom Turbo Streams. How to redirect from a form that is inside a turbo frame?

20:37
#28

#153 Refactoring Hotwire Modals

10:03
#29

#156 Turbo 8 Morphing in real life

32:58
#30

#163 Instant page loads with Turbo 8 prefetch (aka InstantClick)

06:01
#31

#181 Search and Autocomplete French Company Information

00:00