The simplest example of how ActionCable works - tracks whether a user is online or not.
Alternatives To Realtime_user_tracking
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Rails6,6744,577487 days ago61July 31, 202317apache-2.0JavaScript
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
React_on_rails4,984419920 days ago196July 31, 202315mitRuby
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.
Awesome Opensource Apps2,859
2 months ago36
:house::information_source: Curated list of awesome open source crafted web & mobile applications - Learn, Fork, Contribute & Most Importantly Enjoy!
a day ago76otherTypeScript
A full featured Live Chat, Support & Marketing platform, alternative to Intercom, Drift, Crisp, etc ...
3 months ago64mitRuby
Automated code review for GitHub pull requests.
React Webpack Rails Tutorial1,704
2 days ago12mitRuby
Example of integration of Rails, react, redux, using the react_on_rails gem, webpack, enabling the es7 and jsx transpilers, and node integration. And React Native! Live Demo:
a day ago49gpl-3.0TypeScript
A free, open source, self-hosted customer feedback tool 🦊
12 days ago38agpl-3.0Ruby
Free, open source mental health communication web app to share experiences with loved ones
Charting Library Examples1,149
a month ago94mitRuby
Examples of Charting Library integrations with other libraries, frameworks and data transports
Bootstrap Loader1,0272,081165a month ago69March 07, 20236mitJavaScript
Load Bootstrap styles and scripts in your Webpack bundle
Alternatives To Realtime_user_tracking
Select To Compare

Alternative Project Comparisons

HitCounts Heroku react router

Count Online Users

Count Online Users - tracks whether a user is online or not(has opened webpage in browser), showing a green button "Online" at the user card and changes the users counter at the subheader. Built with RoR and React framework, deployed to Heroku.

Table of Contents


This project only shows the current online user on the home page. This is useful for creating presence features like showing a green dot next to a user name if they're online. Based on RailsGuide - ActionCable Example 1: User Appearances To do that, it create each user automatically by unique ip address and type of device. To tracks users used Rails Action Cable with Redis and WebSocket technology. For fronted - used React.

How it works with Action Cable(works strangely because of cookies): demo

The user ID is stored in cookies, so if you just change the device type in the browser, the change does not occur, you also need to clear the cookies. Better for testing to open one tab in incognito mode.


Main tasks:

  • Create a service that counts users which opened current page of website
  • Display counter for all users on the same page
  • The user should be created/find automatically according to the request parameters(ip,devise)
  • React for rendering Frontend part

Deployed to Heroku and available online. It used redistogo Heroku addons to automatic setup and run Redis server.

Getting started


The setups steps expect following tools installed on the system.

1. Check out the repository
git clone
cd realtime_user_tracking
2. Create database.yml file

By default this repo create database count_online_users_development, edit the database configuration as required and provide correct username and password from your PostgreSQL.

3. Create and setup the database, bundle and yarn

Run the following commands to create and setup the database and all required libraries.

rails db:create
rails db:setup
rails db:migrate
rails db:seed # create 3 default user on database

bundle install

yarn install
4. Start the Rails server

You can start the rails server using the command: rails s.

And now you can visit the site with the URL http://localhost:3000

5. Deployment to Heroku instructions

Here is instruction how to deploy this app to Heroku:

heroku login - login to your profile
heroku create count-online-users - create new heroku app with specific name
heroku addons:add redistogo - this addons create redis server heroku config --app count-online-users | grep REDISTOGO_URL - this command show you unique url to your redis server on heroku, copy them and past on config/cable.yml

  adapter: redis
  url: redis://redistogo:[email protected]:10775/

Then add configuration to the config/environments/production.rb

Rails.application.configure do
  # Configuration for Action Cable and WebSockets
  config..web_socket_server_url = "wss://"

  # Allowed Request Origin 
  config.action_cable.allowed_request_origins = ['', '']

git add -A; git commit -m "update redis conf" - commit changes git push heroku master - push you project to Heroku server
heroku run rake db:migrate - run migration on Heroku server
heroku pg:reset - drop database on Heroku server
heroku open - open and test your website

6. Other useful commands

rails new count_online_users --webpack=react --database=postgresql -T - create a new app with React and PostgreSQL
rails g model User name:string ip_address:string device:string visits:integer online:boolean
rails db:setup
rails g serializer User name ip_address device, emoji, last_seen_at, visits, online
rails g channel Activity
yarn add react-router-dom
yarn add axios
yarn add styled-components
git checkout redis_for_heroku -- config/cable.yml - get changes from specific files from another branch git merge --squash fix_updating_when_user_returned - squash all changes from a branch to the master


Feel free to send us feedback on Twitter or file an issue. Feature requests are always welcome.

Popular Reactjs Projects
Popular Ruby On Rails Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Ruby On Rails
Redis Server