Ask A Question

Notifications

You’re not receiving notifications from this thread.

Group Chat with ActionCable: Part 3 Discussion

Chris,

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

Omar

Reply

Chris,

(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.

Reply

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

Reply

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

Reply

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.

Reply

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. 👍

Reply

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...

Reply
Ishita Singh Bhadoria 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.

Reply
Ishita Singh Bhadoria 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();
}
});
});

}).call(this);

Reply

@ishitasinghbhadoria:disqus
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.

https://uploads.disquscdn.c...

Reply

@excid3:disqus
I think we don't need (created_at) and reverse
https://github.com/gorails-...

@chatroom.messages.limit(100).each
it will work the same as default.

Reply

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
      e.preventDefault()
      $(this).submit()

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

$("#new_chat_message").submit()

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

Reply

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

Your help is appreciated. My chatrooms.coffee is :

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

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

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

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

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

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

body.val("")
Reply

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 ?

Reply

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
e.preventDefault()
$(this).submit()

when i inspect console im getting the following errors

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

Reply

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

Reply

i have also done the proper indentation as well.

Reply

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.

Reply

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);
Reply
Join the discussion
Create an account Log in

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

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

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

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

    © 2024 GoRails, LLC. All rights reserved.