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

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.

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

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.

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

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

@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);

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

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.

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("")

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

i have also done the proper indentation as well.

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);