All threads / Group Chat with ActionCable: Part 3 Discussion
Ask A Question


You’re not receiving notifications from this thread.

Group Chat with ActionCable: Part 3 Discussion


Would it be possible to have one on Map APIs like mapbox or google maps api please :)



(1) With regards to APIs, I would like to learn more about authenticating users across multiple apps. Let's say you have a core Rails API app that is consumed by several other Rails or client-side applications. Figuring out "who" is doing what always seemed to be the tricky part for me. Just passing a token in the URL or POSTed in the body never seemed very secure to me.

(2) One feature I would especially like to see is how to include associations in an API via the URL.

For instance, let's say you have Users, Posts and Comments, and you want to retrieve a single Post but you also want the User (author) and the related Comments in a single API call instead of having to make 3 calls.

In Rails I would do: Post.includes(:user, :comments).find(1)

In an API I would "like" to do: api/v1/posts/1?includes=[user,comments]

I had to build this kind of functionality into an API I worked on recently because the consumers of the API needed that flexibility (especially if you have 3+ consumers of the API, you can't make custom endpoints for all of them so have to give the consumer some control). But the code I had to write to make it work felt very clunky and difficult to manage.

Chris, can you also show how to upload images inside the channel in real-time using ActionCable?

I'm not sure I would use ActionCable for uploading files. I would probably just send them like normal using AJAX.

Hi Chris,

At 10:54 you write in the .coffee file $(#new_message), but in how I'm implementing this my form looks like <%= form_for :message, url: group_chat_path %> so I don't think the js can grab an id of #new_message. Do you have any suggestions for how I should update this piece of coffee code? Otherwise I'll just to try rewrite my forms successfully.

You can add your own ID or class to any element you have in your form and change that query to match. I just use that because it's auto-generated and easy to use, so you can use the autogenerated one for your form, or specify your own and that should do the trick. 👍

Cool! Another question on this. I'm just doing the console log part and I'm getting error:

Uncaught ReferenceError: e is not defined

Do you know why that'd be? I have this in my coffee file.

$(document).on "turbolinks:load", ->
$("#new_message").on "keypress", (e) ->
console.log e.keyCode

Hmm, not sure. It looks correct assuming each of those lines is tabbed over properly

$(document).on "turbolinks:load", ->
$("#new_message").on "keypress", (e) ->
console.log e.keyCode

Note to self. Tabs matter. Thanks! Is it a js thing or coffee thing?

Just coffeescript because they removed curly braces. They use tabbing to denote which block it is a part of instead (like Python).

This is definitely a noob mistake, but if you're not following along exactly with the app Chris is building, make sure you include the actioncable related JS files in application.js so that things actually load. That took longer than it should have to figure out...

Ishita Singh Bhadoria ·

@excid3:disqus Hi , the enter thing is not working i am even not able to get the values of character in the console.

Ishita Singh Bhadoria ·

@excid3:disqus i am getting the following error when trying to get the enter thing working :
Uncaught ReferenceError: $ is not defined at line 2 and line 10 of :
(function() {
$(document).on("turbolinks:load", function() {
return $("#new_message").on("keypress", function(e) {
if (e && e.keyCode === 13) {
return e.preventDefault();


Your code is not coffee script.
1. do you have jquery-rails gemin your project?
2. Do you loaded jquery in application.js?

I also use jquery and it work for me. I have uploaded the screenshot.


I think we don't need (created_at) and reverse

it will work the same as default.

This may help some of you.

If you find that this code doesn't work:

$(document).on "turbolinks:load", ->
  $("#new_message").on "keypress", (e) ->
    if e && e.keyCode == 13

Try changing the last line to reflect an ID, like this:


For some reason, using (this) didn't seem to work for me, but using the ID worked great.

I follow the instruction, the message are not saved to the database.

Your help is appreciated. My is :

handleVisiblityChange = ->
$strike = $(".strike")
if $strike.length > 0
chatroom_id = $("[data-behavior='messages']").data("chatroom-id")

$(document).on "turbolinks:load", ->
$(document).on "click", handleVisiblityChange

$("#new_message").on "keypress", (e) ->
if e && e.keyCode == 13

$("#new_message").on "submit", (e) ->

chatroom_id = $("[data-behavior='messages']").data("chatroom-id")
body        = $("#message_body")

App.chatrooms.send_message(chatroom_id, body.val())


Checking with the console, find the following error message. It appears the code does not work well with I18n multi-language support.

Failed to execute 'querySelector' on 'Document': '/?locale=en' is not a valid selector.

Ane one could help ?

hey chris. i followed everything through but i dont understand why submit does not work when i click enter. i have exactly you wrote it. can you please help

$(document).on "turbolinks:load", ->
$("#new-message").on "keypress", (e) ->
if e && e.keycode == 13

when i inspect console im getting the following errors

Uncaught ReferenceError: jQuery is not defined
at transition.self-6ad2488465135ab731a045a8ebbe3ea2fc501aed286042496eda1664fdd07ba9.js?body=1:60

Like the error message says here, you're missing jQuery. Add jQuery to your app and you'll be set.

i have also done the proper indentation as well.

Are you still having trouble? Did you get it working Syed? I'm no expert, but my team and I got it working on our app, and I'll try to help as much as I can.

Using rails 6, I couldn't get the coffeescript to work, so I converted it to javascript

Put this in your chatroom show page as a workaround under the message input form.

(function() { $(document).on("turbolinks:load", function() { return $("#new_message").on("keypress", function(e) { if (e && e.keyCode === 13) { e.preventDefault(); $(this).submit(); return e.currentTarget.submit(); } }); }); }).call(this);
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 70,078+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.