Learn Enough Society

Certificate of Course Completion

app/assets/javascript/application.js

greeting_doubler('hello, world!');

greeting_doubler = function(phrase) {
  alert(phrase + " " + phrase);
};

JavaScript Console

Uncaught ReferenceError: greeting_doubler is not defined

app/assets/javascript/application.js

greeting_doubler = function(phrase) {
  alert(phrase + " " + phrase);
};
greeting_doubler('¡Hola, mundo!');

Browser alert

¡Hola, mundo! ¡Hola, mundo!

It works!!

Yes. By replacing target #messages-table with a target class like this:

message_appender = function(content) {
  $('.messages-table').append(content);
}
$(document).on('turbolinks:load', function() {
  message_appender('I\'m appended to CSS class .messages-table!');
});

Result is:

I'm appended to CSS class .messages-table!

app/assets/javascripts/application.js

$(document).on('turbolinks:load', function() {
  message_appender('I\'m from above lines of message_appender!');
});
message_appender = function(content) {
  $('.messages-table').append(content);
}

It's still working!

I'm from above lines of message_appender!

app/assets/javascript/messages.coffee

message_appender = content ->
  $('#messages-table').append(content)

$(document).on 'turbolinks:load', ->
  message_appender('hello, world! How\'s it going?')

It returns an error in the JavaScript console

Uncaught ReferenceError: content is not defined

app/assets/javascripts/channels/room.coffee

App.room = App.cable.subscriptions.create "RoomChannel",
  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
    alert data.username

Web browser make alert with username like this:

alice

app/assets/javascripts/channels/room.coffee

App.room = App.cable.subscriptions.create "RoomChannel",
  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
    console.log data.username

Web browser JavaScript Console print username

alice

• (client) Alice submits a new message using a remote form.
• (server) The Messages controller receives the submission, saves the message to the database, and broadcasts the result.
• (client) Because every user is subscribed to the Room channel, each client receives the broadcast and executes the received method, which appends the message HTML to the messages table for both Alice and Bob.

create a newline in the form after submition

removed f.submit from _message_form.html.erb

<div class="message-input">
  <%= form_for(@message, remote: true) do |f| %>
    <%= f.text_area :content %>
  <% end %>
</div>

Result: Message is not going to be brodcast or saved in the database due to missing submit action in the form

connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    include SessionsHelper

    identified_by :message_user

    def connect
      self.message_user = find_verified_user
    end

    private

    def find_verified_user
      if flase
        # current_user
      else
        reject_unauthorized_connection
      end
    end

  end
end

Terminal

An unauthorized connection attempt was rejected

JavaScript Console in the browser

> console.log($('#messages')[0].scrollHeight)

1212
undefined

a line above is not working from room.coffee or application.js while ```console.log('hello, world!'); is working from file

Reference: https://javascriptio.com/view/350605/cannot-read-property-scrollheight-of-null

Add " foobar" in embedded ruby code in the _message.html.erb

<div class="message">
  <div class="message-user">
    <%= message.user.username %>:
  </div>
  <div class="message-content">
    <%= message.content + " foobar" %>
  </div>
</div>

Browser

bob: hello foobar

Blockquote appears as normal text without style

Added style on blockquote element and it appears to be inlined block with light gray background

It's woking!

[Link text](Link URL or path)

This line will display an image from the source on the markdown.

![Alt value](https://cdn.learnenough.com/archer_ants.jpg)

room_channel

class RoomChannel < ApplicationCable::Channel
  include SessionsHelper

  def subscribed
    stream_from "room_channel"
    stream_from "room_channel_user_#{current_user.id}"
    current_user
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

No error message but mention stop trigering alert

message_test.rb

require 'test_helper'

class MessageTest < ActiveSupport::TestCase

  def setup
    @message = users(:example).messages.build(content: "Lorem ipsum @example @nonexistant")
    @user = users(:example)
  end

  test "should be valid" do
    assert @message.valid?, @message.errors.full_messages
  end

  test "should not be blank" do
    @message.content = " "
    assert !@message.valid?
  end

  test "should mention valid" do
    assert_includes(@message.mentions.to_s, @user.username)
    assert_not_includes(@message.mentions.to_s, "nonexistant")
  end

end

Result

$ rails test
Running via Spring preloader in process 3314
Started with run options --seed 56767

Run options: --seed 56767--=---=---=---=---=---=---=---=---=---=---] 0% Time: 00:00:00,  ETA: ??:??:??

# Running:

.  20/2: [=====                                                    ] 10% Time: 00:00:00,  ETA: 00:00:0.  20/3: [========                                                 ] 15% Time: 00:00:00,  ETA: 00:00:0..  20/5: [==============                                           ] 25% Time: 00:00:00,  ETA: 00:00:.  20/6: [=================                                        ] 30% Time: 00:00:00,  ETA: 00:00:0..  20/8: [======================                                   ] 40% Time: 00:00:00,  ETA: 00:00:..  20/10: [============================                            ] 50% Time: 00:00:00,  ETA: 00:00:.  20/11: [==============================                          ] 55% Time: 00:00:00,  ETA: 00:00:0.  20/12: [=================================                       ] 60% Time: 00:00:00,  ETA: 00:00:0..  20/14: [=======================================                 ] 70% Time: 00:00:00,  ETA: 00:00:.  20/15: [==========================================              ] 75% Time: 00:00:01,  ETA: 00:00:0.  20/16: [============================================            ] 80% Time: 00:00:01,  ETA: 00:00:0.  20/17: [===============================================         ] 85% Time: 00:00:01,  ETA: 00:00:0.  20/18: [==================================================      ] 90% Time: 00:00:01,  ETA: 00:00:0.  20/19: [=====================================================   ] 95% Time: 00:00:01,  ETA: 00:00:0.  20/20: [=======================================================] 100% Time: 00:00:01, Time: 00:00:01
.
Finished in 1.18467s
20 tests, 39 assertions, 0 failures, 0 errors, 0 skips



Finished in 1.202936s, 16.6260 runs/s, 32.4207 assertions/s.
20 runs, 39 assertions, 0 failures, 0 errors, 0 skips
$

It's working for both with no errors