Client Side code Shayan sobhanian-058778888

Client -Side Code

We now need to write the client-side code for the live chat feature. But first, we need to make one small change to the new message form.

Open app/views/messages/index.html.erb and change the form_for statement to add remote: true, as shown in Listing 6-14.

<h2>Messages</h2>

<%= form_for :message, remote: true do |form| %>

<%= form.text_field :body %>

<%= form.submit 'Send Message' %>

<% end %>

Listing 6-14.Messages Index View changed to a remote form

This change means that the message create request is done as a JavaScript AJAX request, so the browser won’t automatically reload the page after the form is submitted.

Now edit the generated messages channel CoffeeScript file, app/assets/javascripts/channels/messages.coffee. As you can see, the default callbacks for connected, disconnected, and received are stubbed out for you. Since we simply want to append any message HTML partials that are received via the channel, simply add the jQuery statement as shown in Listing 6-15.

App.messages = App.cable.subscriptions.create "MessagesChannel",

connected: ->

# Called when the subscription is ready for use on the server

disconnected: ->

# Called when the subscription has been terminated by the server

received: (data) ->

# Called when there's incoming data on the websocket for this

# channel

$('#messages').append(data)

Listing 6-15.The client-side Messages Channel code