iridakos - tutorials

Δημιουργώντας μια εφαρμογή συνομιλιών (chat) από το μηδέν με Rails και WebSockets

Tue, 19 Nov 2019 08:00:00 +0200

Εισαγωγή

Σε αυτό το βοήθημα θα δημιουργήσουμε μια εφαρμογή συνομιλιών (chat) από το μηδέν χρησιμοποιώντας το framework Ruby on Rails και την τεχνολογία των WebSockets.

Ενημέρωση: Δημοσίευσα άλλο ένα βοήθημα για τη δημιουργία docker image της εφαρμογής του παρόντος, μπορείτε να το βρείτε στα αγγλικά για την ώρα εδώ.

Κώδικας και σχόλια

Μπορείτε να βρείτε τον κώδικα του παρόντος άρθρου στο GitHub.

Για σχόλια, feedback, λάθη κ.λπ. παρακαλώ ανοίξτε ένα issue στο αποθετήριο.

Τι είναι τα WebSockets;

Πρόκειται ουσιαστικά για ένα πρωτόκολλο που επιτρέπει την αμφίδρομη επικοινωνία μεταξύ πελάτη και εξυπηρετητή μιας διαδικτυακής εφαρμογής μέσω μιας και μόνης σύνδεσης TCP μακράς διαρκείας.

The WebSocket protocol enables interaction between a web browser (or other client application) and a web server with lower overheads, facilitating real-time data transfer from and to the server.

This is made possible by providing a standardized way for the server to send content to the client without being first requested by the client, and allowing messages to be passed back and forth while keeping the connection open. In this way, a two-way ongoing conversation can take place between the client and the server.

The communications are done over TCP port number 80 (or 443 in the case of TLS-encrypted connections), which is of benefit for those environments which block non-web Internet connections using a firewall. Similar two-way browser-server communications have been achieved in non-standardized ways using stopgap technologies such as Comet. – WebSocket @ Wikipedia

Γιατί να χρησιμοποιήσουμε WebSockets;

Υποθέστε ότι θέλετε να δημιουργήσετε μια ιστοσελίδα που εμφανίζει τις καταστάσεις κάποιων διαδικασιών που βρίσκονται υπό εκτέλεση. Χωρίς τη χρήση WebSockets, θα έπρεπε να κάνετε ένα από τα παρακάτω:

να χρησιμοποιήσετε AJAX με Javascript intervals για να ζητάτε και να εμφανίζεται τις τρέχουσες καταστάσεις των διαδικασιών
να φορτώνεται ξανά τη σελίδα κάθε x δευτερόλεπτα (<meta http-equiv="refresh" content="x">)
να προσθέσετε ένα μήνυμα στη σελίδα τύπου “Οι καταστάσεις δεν ενημερώνονται αυτόματα ¯\_(ツ)_/¯ Πατήστε εδώ για να φορτώσετε ξανά τη σελίδα.”

Και οι τρεις παραπάνω προτάσεις θα κατέληγαν στο να ζητήσουν από τον εξυπηρετητή τις καταστάσεις των διαδικασιών ακόμη και να αυτές δεν είχαν αλλάξει.

Τα WebSockets είναι αυτά που θα μας επιτρέψουν αυτού του είδους η επικοινωνία να λάβει χώρα κατά απαίτηση. Το κόστος αυτής της λειτουργικότητας είναι η διατήρηση TCP συνδέσεων μεταξύ του εξυπηρετητή και όλων των πελατών του (μια για κάθε ανοιγμένη σελίδα στον φυλλομετρητή).

Χτίζοντας την εφαρμογή

Θα χτίσουμε την εφαρμογή χρησιμοποιώντας:

Ruby: έκδοση 2.6.2
Rails: έκδοση 5.2.3

Στήνοντας το περιβάλλον

Θα εγκαταστήσουμε τις κατάλληλες εκδόσεις της Ruby και του Ruby on Rails.

Εγκατάσταση Ruby

Χρησιμοποιώ το πρόγραμμα rvm για να διαχειρίζομαι τις εκδόσεις της Ruby που εγκαθιστώ στο σύστημά μου. Για να εγκαταστήσετε την Ruby του παρόντος βοηθήματος εκτελέστε:

rvm install ruby 2.6.2

Εγκατάσταση Ruby on Rails

Δημιουργήστε ένα φάκελο στο σύστημά σας με το όνομα rails-chat-tutorial.

Περιηγηθείτε σε αυτόν τον φάκελο και δημιουργήστε τα παρακάτω αρχεία:

.ruby-version

ruby-2.6.2

.ruby-gemset

rails-chat-tutorial

Με αυτά τα δύο αρχεία, ενημερώνουμε τον rvm (Ruby version manager) ότι όταν εργαζόμαστε σε αυτόν τον φάκελο, θέλουμε να γίνεται χρήση της συγκεκριμένης έκδοσης Ruby (.ruby-version) και των συγκεκριμένων βιβλιοθηκών που έχουν εγκατασταθεί στο gemset με το όνομα rails-chat-tutorial (.ruby-gemset).

Τώρα, αν περιηγηθείτε ξανά στον φάκελο θα δείτε κάτι σαν τα παρακάτω:

$ cd .

ruby-2.6.2 - #gemset created /home/iridakos/.rvm/gems/ruby-2.6.2@rails-chat-tutorial
ruby-2.6.2 - #generating rails-chat-tutorial wrappers...........

Εγκαταστήστε την επιθυμητή έκδοση του Ruby on Rails με:

gem install rails -v 5.2.3

Δημιουργία της εφαρμογής

Είμαστε έτοιμοι να δημιουργήσουμε την rails εφαρμογή, στη γραμμή εντολών πληκτρολογήστε:

rails new .

Σημείωση: Δεν προσδιορίσαμε κάποιο όνομα για την εφαρμογή οπότε το framework θα χρησιμοποιήσει το όνομα του φακέλου: rails-chat-tutorial.

Το Rails θα δημιουργήσει όλα τα αρχεία της εφαρμογής και θα εγκαταστήσει τις απαιτούμενες βιβλιοθήκες (gems).

Ας ξεκινήσουμε την εφαρμογή για να επιβεβαιώσουμε ότι όλα είναι εντάξει.

rails server

You should see something like:

=> Booting Puma
=> Rails 5.2.3 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.2-p47), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop

Ανοίξτε έναν φυλλομετρητή και επισκεφθείτε τη διεύθυνση: http://localhost:3000. Αν βλέπετε το παρακάτω είμαστε εντάξει για να συνεχίσουμε. Αν όχι, δε με ξέρετε δε σας ξέρω :P

Χρήστες και βιβλιοθήκη `devise`

Θα χρησιμοποιήσουμε την φοβερή λύση της βιβλιοθήκης devise για πιστοποίηση χρηστών.

Προσαρτήστε την παρακάτω απαίτηση βιβλιοθήκης στο τέλος του αρχείου Gemfile βρίσκεται στον κεντρικό φάκελο της εφαρμογής (Rails root directory).

gem 'devise'

Στη γραμμή εντολών, εγκαταστήστε τη νέα βιβλιοθήκη εκτελώντας:

bundle

Ολοκληρώστε την ενσωμάτωση της devise με:

rails generate devise:install

Θα δημιουργήσουμε το μοντέλο που αναπαριστά τους χρήστες μας χρησιμοποιώντας τις γεννήτριες της devise.

Εκτελέστε στη γραμμή εντολών:

rails generate devise User username:string

Σημείωση: προσθέσαμε ένα επιπλέον χαρακτηριστικό username στο μοντέλο (πέραν των όσων εξ ορισμού παρήγαγε η βιβλιοθήκη) ούτως ώστε να έχουμε κάτι πιο φιλικό να εμφανίζουμε για τους χρήστες αντί της διεύθυνσης email.

Ανοίξτε το αρχείο προσαρμογής της βάσης (migration) που βρίσκεται στην τοποθεσία db/migrate/<datetime>_devise_create_users.rb και προσθέστε ένα ευρετήριο μοναδικότητας (unique index) για το χαρακτηριστικό που προσθέσαμε (username)^[4]:

  add_index :users,  :username,             unique: true

Βρείτε τη γραμμή που ορίζει τη στήλη username αλλάξτε την ως εξής:

t.string :username, null: false

για να δηλώσουμε το χαρακτηριστικό ως υποχρεωτικό.

Στη συνέχεια, στο μοντέλο User που βρίσκεται στην τοποθεσία app/models/user.rb προσθέστε τον παρακάτω κανόνα επικύρωσης της μοναδικότητας και της υποχρεωτικής παρουσίας του χαρακτηριστικού:

  validates :username, uniqueness: true, presence: true

Τέλος, προσαρμόστε τη βάση με:

rails db:migrate

Δωμάτια και μηνύματα

Κάθε μήνυμα θα εμφανίζεται σε ένα δωμάτιο.

Ας δημιουργήσουμε και τα δύο.

Χρησιμοποιήστε την παρακάτω εντολή για δημιουργήσετε το δωμάτιο - Room:

rails generate resource Room name:string:uniq

και την ακόλουθη εντολή για να δημιουργήσετε το μήνυμα δωματίου - RoomMessage:

rails generate resource RoomMessage room:references user:references message:text

Τώρα θα ορίσουμε τις σχέσεις αυτών των δύο^[7].

Ανοίξτε το αρχείο που βρίσκεται στην τοποθεσία app/models/room.rb και προσθέστε την παρακάτω σχέση μέσα στην κλάση:

has_many :room_messages, dependent: :destroy,
                         inverse_of: :room

Ανοίξτε το αρχείο που βρίσκεται στην τοποθεσία app/models/room_message.rb και προσθέστε τις παρακάτω σχέσεις:

belongs_to :user
belongs_to :room, inverse_of: :room_messages

Προσαρμόστε τη βάση με την εντολή:

rails db:migrate

Τώρα μπορούμε να ορίσουμε με τέτοιο τρόπο τις διαδρομές (routes) ώστε τα αιτήματα στην αρχική σελίδα (root requests) να σερβίρονται από την ενέργεια index του ελεγκτή RoomsController (που δημιουργήθηκε αυτόματα όταν εκτελέσαμε την εντολή για τη δημιουργία του πόρου RoomMessage παραπάνω) - RoomsController#index.

Ανοίξτε το αρχείο που βρίσκεται στην τοποθεσία config/routes.rb και αλλάξτε τα περιεχόμενά του στα παρακάτω:

Rails.application.routes.draw do
  devise_for :users

  root controller: :rooms, action: :index

  resources :room_messages
  resources :rooms
end

Επανεκκινήστε τον εξυπηρετητή και προσπαθήστε να περιηγηθείτε στην αρχική σελίδα της εφαρμογής (http://localhost:3000).

Θα δείτε το παρακάτω λάθος, μην ανησυχείτε:

Πρέπει να δημιουργήσουμε την ενέργεια index στον ελεγκτή RoomsController. Ανοίξτε τον ελεγκτή που βρίσκεται στην τοποθεσία app/controllers/rooms_controller.rb και αλλάξτε τα περιεχόμενά του στα παρακάτω:

class RoomsController < ApplicationController
  def index
  end
end

Κατόπιν, δημιουργήστε το αρχείο app/views/rooms/index.html.erb και για την ώρα απλά προσθέστε μόνο την παρακάτω επικεφαλίδα:

<h1>Rooms index</h1>

Φορτώστε ξανά την αρχική σελίδα και voilà.

Προσθήκη πιστοποίησης χρηστών

Θέλουμε όλοι οι χρήστες να είναι πιστοποιημένοι πριν να μπορέσουν να συμμετάσχουν σε συνομιλίες οπότε θα προσθέσουμε την παρακάτω γραμμή στην κλάση ApplicationController που βρίσκεται στην τοποθεσία app/controllers/application_controller.rb και από την οποία κληρονομούν οι ελεγκτές μας:

  before_action :authenticate_user!

Αν πλοηγηθούμε εκ νέου στην αρχική σελίδα http://localhost:3000 θα πρέπει να ανακατευθυνθούμε στη σελίδα πιστοποίησης χρηστών ^[10].

Πριν συνεχίσουμε με τα ωραία, ας εξοπλίσουμε πρώτα την εφαρμογή με κάποια καλά χαρακτηριστικά.

Προσθήκη bootstrap

Θα χρησιμοποιήσουμε το Bootstrap και θα το ενσωματώσουμε στην εφαρμογή χρησιμοποιώντας τη βιβλιοθήκη bootstrap-rubygem.

Ακολουθώντας τις οδηγίες της βιβλιοθήκης, προσθέστε τις παρακάτω απαιτήσεις βιβλιοθηκών στο μητρώο των απαιτήσεων Gemfile.

gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

και εκτελέστε την εντολή bundle για να κατέβουν και να εγκατασταθούν.

Αλλάξτε την κατάληξη του αρχείου app/assets/stylesheets/application.css σε scss και αντικαταστήστε τα περιεχόμενά του με:

@import "bootstrap";

Προσθέστε τις ακόλουθες γραμμές στο αρχείο app/assets/javascript/application.js αμέσως πριν τη γραμμή //= require_tree . ^[9]:

//= require jquery3
//= require popper
//= require bootstrap-sprockets

Προσθήκη simple_form

Θα χρησιμοποιήσουμε αυτή την εξαιρετική βιβλιοθήκη για να δημιουργούμε τις φόρμες μας εύκολα.

Προσθέστε την απαίτηση στο αρχείο Gemfile και εκτελέστε την εντολή bundle για να το εγκαταστήσετε.

gem 'simple_form'

Τέλος, ολοκληρώστε την ενσωμάτωση στην εφαρμογή χρησιμοποιώντας:

rails generate simple_form:install --bootstrap

Σημείωση: Χρησιμοποιήσαμε την οδηγία –bootstrap στην παραπάνω εντολή αφού το bootstrap είναι το CSS framework που θα χρησιμοποιούμε.

Προβολές devise με bootstrap και simple_form

Η βιβλιοθήκη devise χρησιμοποιεί τις δικές τις προβολές (views) για πιστοποιήσεις, καταχωρήσεις νέων χρηστών κ.λπ. Παρόλα αυτά, έχουμε τρόπο να προσαρμόσουμε αυτές τις προβολές και εφόσον επιλέξαμε να χρησιμοποιήσουμε τις βιβλιοθήκες bootstrap και simple_form, μπορούμε να παράξουμε αυτές τις προβολές ούτως ώστε οι επιλογές μας να γίνουν σεβαστές.

Στη γραμμή εντολών σας:

rails generate devise:views

Η προβολή για την πιστοποίηση των χρηστών βρίσκεται στην τοποθεσία app/views/devise/sessions/new.html.erb και για την καταχώρηση χρηστών στην τοποθεσία app/views/devise/registrations/new.html.erb. Ανοίξτε αυτά τα δύο αρχεία και αλλάξτε τις κλάσεις των κουμπιών υποβολής αντικαθιστώντας την παρακάτω γραμμή^[6]:

<%= f.button :submit, "Sign up" %>

με

<%= f.button :submit, "Sign up", class: 'btn btn-success' %>

ώστε τα κουμπιά να εμφανίζονται ακολουθώντας το στυλ του bootstrap.

Πριν δούμε τις αλλαγές που κάναμε, ας κάνουμε ένα τελευταίο πράγμα στην προκαθορισμένη δομή των προβολών μας (default layout).

Ανοίξτε το αρχείο app/views/layouts/application.html.erb και αντικαταστήστε τα περιεχόμενά του με τα παρακάτω:

<!DOCTYPE html>
<html>
  <head>
    <title>RailsChatTutorial</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <%= yield %>
        </div>
      </div>
    </div>
  </body>
</html>

ώστε να χρησιμοποιούμε το Bootstrap’s πλέγμα (grid) στις προβολές.

Περιηγηθείτε στην αρχική σελίδα http://localhost:3000 και δείτε τι δημιουργήσαμε.

Ας προσπαθήσουμε να κάνουμε καταχώρηση χρήστη ακολουθώντας το σύνδεσμο Sign up της φόρμας:

Όπως βλέπετε, δεν υπάρχει πεδίο για τη συμπλήρωση του ονόματος χρήστη (username) που προσθέσαμε όταν δημιουργήσαμε το μοντέλο User. Για να μπορούν οι χρήστες να καταχωρούν το όνομά τους πρέπει:

να προσθέσουμε το πεδίο στη φόρμα
να ενημερώσουμε τη βιβλιοθήκη devise ώστε να αναγνωρίζει και να δέχεται το νέο χαρακτηριστικό (username) διαφορετικά ο ελεγκτής ApplicationController θα το αγνοεί όταν θα υποβάλλουμε τη φόρμα.

Για να προσθέσουμε το πεδίο στη φόρμα καταχώρησης χρηστών, ανοίξτε το αρχείο app/views/devise/registrations/new.html.erb και προσθέστε αυτές τις γραμμές μεταξύ των πεδίων email και password.

  <%= f.input :username,
              required: true %>

Κατόπιν, ανοίξτε τον ελεγκτή της εφαρμογής app/controllers/application_controller.rb για να ρυθμίσετε καταλλήλως τα επιτρεπόμενα χαρακτηριστικά. Αλλάξτε τα περιεχόμενά του στα παρακάτω:

class ApplicationController < ActionController::Base
  before_action :authenticate_user!

  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :username])
  end
end

Αυτό ήταν, περιηγηθείτε ξανά στην αρχική σελίδα και δοκιμάστε να καταχωρηθείτε ως χρήστες^[5].

Καθάρισμα μη χρησιμοποιούμενων στοιχείων

Δε θα χρησιμοποιήσουμε coffee script ή τα turbolinks οπότε ας αφαιρέσουμε τις σχετικές αναφορές.

Ανοίξτε το Gemfile και αφαιρέστε τις παρακάτω γραμμές:

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'

Ανοίξτε το αρχείο app/assets/javascripts/application.js και αφαιρέστε την παρακάτω γραμμή:

//= require turbolinks

Ανοίξτε το app/views/layouts/application.html.erb και αλλάξτε τις παρακάτω γραμμές^[3] από:

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

σε

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>

Ελέγξτε ότι ο φάκελος app/assets/javascripts δεν έχει αρχεία με κατάληξη .coffee και αν έχει, αφαιρέστε τα.²

Στη γραμμή εντολών τέλος, εκτελέστε:

rails tmp:cache:clear

για να καθαρίσετε ότι αρχεία coffee scripts είχαν ενδεχομένως ενταχθεί στην cache.

Αυτά. Επανεκκινήστε τον εξυπηρετητή.

Προσθήκη μπάρας πλοήγησης

Για να βελτιώσουμε τη χρηστικότητα της εφαρμογής θα προσθέσουμε μια μπάρα πλοήγησης.

Δημιουργήστε το φάκελο app/views/shared και ένα αρχείο μέσα του με το όνομα _navigation_bar.html.erb. Αυτό θα είναι ένα απόσπασμα (partial) που θα εμφανίζει την μπάρα πλοήγησης και που στη συνέχεια θα προσθέσουμε στην κεντρική δομή των ιστοσελίδων της εφαρμογής (application layout) για να εμφανίζεται σε όλες τις σελίδες. Προσθέστε μέσα του τα παρακάτω:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between">
  <a class="navbar-brand" href="#">Rails chat tutorial</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-bar-collapse" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <% if current_user %>
    <div class="dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img class="avatar" src="<%= gravatar_url(current_user) %>">
        <%= current_user.username %>
      </a>

      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
        <%= link_to 'Logout', destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
      </div>
    </div>
  <% end %>
</nav>

Δώστε προσοχή στη γραμμή gravatar_url(current_user). Αυτή είναι μια βοηθητική μέθοδος που θα χρησιμοποιούμε για να εμφανίζουμε την εικόνα προφίλ (gravatar) των πιστοποιημένων χρηστών. Δεν είναι συστημική μέθοδος, θα την υλοποιήσουμε εμείς αλλά είναι αρκετά απλή.

Ανοίξτε το αρχείο με τις βοηθητικές μεθόδους app/helpers/application_helper.rb και προσθέστε τον παρακάτω κώδικα:

def gravatar_url(user)
  gravatar_id = Digest::MD5::hexdigest(user.email).downcase
  url = "https://gravatar.com/avatar/#{gravatar_id}.png"
end

Σημείωση:

Όπως μπορείτε να δείτε το όνομα του χρήστη, η εικόνα προφίλ και ο σύνδεσμος εξόδου από την εφαρμογή θα εμφανίζονται μόνο όταν ο χρήστης έχει συνδεθεί.

Η εικόνα προφίλ έχει μια CSS κλάση avatar. Πρέπει να ορίσουμε αυτήν την κλάση σε κάποιο αρχείο stylesheet της εφαρμογής. Δημιουργήστε ένα αρχείο (στο οποίο θα συγκεντρώσουμε όλες τις CSS κλάσεις που θα χρησιμοποιήσουμε πέραν αυτών που παρέχονται από το bootstrap) με το όνομα app/assets/stylesheets/rails-chat-tutorial.scss.

Για την ώρα προσθέστε τον κανόνα για την εικόνα προφίλ:

.avatar {
  max-height:30px;
  border-radius: 15px;
  width:auto;
  vertical-align:middle;
}

και ανοίξτε το αρχείο application.scss για να το προσθέσετε στο μητρώο stylesheet της εφαρμογής. Προσθέστε τη γραμμή:

@import "rails-chat-tutorial"

Τώρα θα προσθέσουμε το απόσπασμα της μπάρας πλοήγησης που δημιουργήσαμε στην προκαθορισμένη δομή των σελίδων της εφαρμογής. Ανοίξτε το αρχείο app/views/layouts/application.html.erb και αλλάξτε τα περιεχόμενά του στα παρακάτω:

<!DOCTYPE html>
<html>
  <head>
    <title>RailsChatTutorial</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <%= render partial: 'shared/navigation_bar' %>
          <div class="my-3">
            <%= yield %>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Φορτώστε ξανά την αρχική σελίδα και δείτε την μπάρα.

Τέλεια. Συμπληρώστε τα επιθυμητά στοιχεία εισόδου σας και υποβάλετε τη φόρμα.

Διαχείριση δωματίων

Θα δημιουργήσουμε μια απλή δομή για τα δωμάτια.

Μια μικρή στήλη που θα εμφανίζει κάθετα όλα τα διαθέσιμα δωμάτια
Μια μεγάλη στήλη που θα περιέχει τα μηνύματα και τη φόρμα υποβολής μηνύματος.

Οι αρχική σελίδα των δωματίων θα έχει τη δεξιά στήλη άδεια, η τελευταία θα εμφανίζεται μόνο όταν ο χρήστης έχει επιλέξει συγκεκριμένο δωμάτιο.

Τέλος, στην αρχική σελίδα των δωματίων θα παρέχουμε και την επιλογή για δημιουργία νέου δωματίου.

Αρχική σελίδα δωματίων

Πρώτα θα πρέπει να φορτώσουμε όλα τα διαθέσιμα δωμάτια στον ελεγκτή RoomsController. Ανοίξτε το αρχείο app/controllers/rooms_controller.rb και αλλάξτε την μέθοδο index όπως παρακάτω:

def index
  @rooms = Room.all
end

Ανοίξτε την προβολή app/views/rooms/index.html.erb και αλλάξτε τα περιεχόμενά της στα παρακάτω^[8]:

<div class="row">
  <div class="col-12 col-md-3">
    <div class="mb-3">
      <%= link_to new_room_path, class: "btn btn-primary" do %>
        Create a room
      <% end %>
    </div>

    <% if @rooms.present? %>
      <nav class="nav flex-column">
        <% @rooms.each do |room| %>
          <%= link_to room.name, room_path(room), class: "nav-link room-nav-link" %>
        <% end %>
      </nav>
    <% else %>
      <div class="text-muted">
        The are no rooms
      </div>
    <% end %>
  </div>

  <div class="col">
    <div class="alert alert-primary">
      <h4 class="alert-heading">
        Welcome to the RailsChatTutorial!
      </h4>

      <p>
        We need to talk.
      </p>

      <hr />

      <p>
        You can create or join a room from the sidebar.
      </p>
    </div>
</div>

Αν υπάρχουν δωμάτια, η αριστερή στήλη θα εμφανίζει μια κάθετη πλοήγηση με συνδέσμους που οδηγούν στη σελίδα κάθε δωματίου. Η δεξιά στήλη εμφανίζει ένα απλό μήνυμα καλωσορίσματος στην εφαρμογή.

Πατώντας το κουμπί Create a room εμφανίζεται ένα αναμενόμενο λάθος καθώς ο ελεγκτής δεν υποστηρίζει ακόμη την ενέργεια δημιουργίας δωματίου.

Δημιουργία και επεξεργασία δωματίου

Θα ορίσουμε τις ενέργειες για τη δημιουργία και την επεξεργασία ενός δωματίου.

Ανοίξτε τον ελεγκτή των δωματίων app/controllers/rooms_controller.rb και αλλάξτε τα περιεχόμενά του ως εξής:

class RoomsController < ApplicationController
  # Loads:
  # @rooms = all rooms
  # @room = current room when applicable
  before_action :load_entities

  def index
    @rooms = Room.all
  end

  def new
    @room = Room.new
  end

  def create
    @room = Room.new permitted_parameters

    if @room.save
      flash[:success] = "Room #{@room.name} was created successfully"
      redirect_to rooms_path
    else
      render :new
    end
  end

  def edit
  end

  def update
    if @room.update_attributes(permitted_parameters)
      flash[:success] = "Room #{@room.name} was updated successfully"
      redirect_to rooms_path
    else
      render :new
    end
  end

  protected

  def load_entities
    @rooms = Room.all
    @room = Room.find(params[:id]) if params[:id]
  end

  def permitted_parameters
    params.require(:room).permit(:name)
  end
end

Σημείωση: φορτώνουμε από πριν τις μεταβλητές που κρατούν τα δωμάτια (@rooms) και το τρέχον δωμάτιο (@room) ώστε να είναι διαθέσιμες σε όλες τις ενέργειες χρησιμοποιώντας την οδηγία before_action :load_entities (action hook).

Θα δημιουργήσουμε μια απλή φόρμα για το μοντέλο Room και θα τη χρησιμοποιήσουμε και για τη δημιουργία αλλά και για την επεξεργασία ενός δωματίου. Δημιουργήστε την προβολή app/views/rooms/_form.html.erb και προσθέστε τα παρακάτω:

<%= simple_form_for @room do |form| %>
  <%= form.input :name %>
  <%= form.submit "Save", class: 'btn btn-success' %>
<% end %>

Στη συνέχεια, δημιουργήστε τις προβολές των ενεργειών new και edit αντίστοιχα:

app/views/rooms/new.html.erb

<h1>
  Creating a room  
</h1>

<%= render partial: 'form' %>

app/views/rooms/edit.html.erb

<h1>
  Editing room <%= @room.name %>
</h1>

<%= render partial: 'form' %>

Ώρα να φτιάξουμε το πρώτο μας δωμάτιο. Από την αρχική σελίδα των δωματίων, πατήστε το κουμπί Create a room

Σώστε το και ορίστε:

Προσθέστε την παρακάτω κλάση στο αρχείο app/assets/stylesheets/rails-chat-tutorial.scss για να βελτιώσουμε την εμφάνιση των δωματίων.

.room-nav-link {
  border: 1px solid lighten($primary, 40%);
  background: lighten($primary, 45%);

  & + .room-nav-link {
    border-top: 0 none;
  }
}

Σημείωση: Θα προσθέσουμε παρακάτω τον σύνδεσμο επεξεργασίας (edit) ενός δωματίου.

Πριν προχωρήσουμε στη σελίδα προβολής ενός δωματίου, θα αλλάξουμε τον κώδικα της αρχικής σελίδας των δωματίων ώστε να μπορούμε να χρησιμοποιήσουμε την αριστερή στήλη και μέσα στη σελίδα ενός δωματίου.

Δημιουργήστε το απόσπασμα προβολής app/views/rooms/_rooms.html.erb με τα εξής περιεχόμενα:

<div class="mb-3">
  <%= link_to new_room_path, class: 'btn btn-primary' do %>
    Create a room
  <% end %>
</div>

<% if @rooms.present? %>
  <nav class="nav flex-column">
    <% @rooms.each do |room| %>
      <%= link_to room.name, room_path(room), class: 'nav-link room-nav-link' %>
    <% end %>
  </nav>
<% else %>
  <div class="text-muted">
    The are no rooms
  </div>
<% end %>

και προσαρμόστε την αρχική σελίδα των δωματίων app/views/rooms/index.html.erb ώστε να το χρησιμοποιεί:

<div class="row">
  <div class="col-12 col-md-3">
    <%= render partial: 'rooms' %>
  </div>

  <div class="col">
    <div class="alert alert-primary">
      <h4 class="alert-heading">
        Welcome to the RailsChatTutorial!
      </h4>

      <p>
        We need to talk.
      </p>

      <hr />

      <p>
        You can create or join a room from the sidebar.
      </p>
    </div>
  </div>
</div>

Σελίδα δωματίου

Προσθέστε την ενέργεια προβολής ενός δωματίου show στον ελεγκτή των δωματίων app/controllers/rooms_controller.rb:

def show
  @room_message = RoomMessage.new room: @room
  @room_messages = @room.room_messages.includes(:user)
end

Σημειώσεις:

Δημιουργούμε ένα νέο μήνυμα (@room_message) για να το χρησιμοποιήσουμε στην προβολή όταν θα δημιουργήσουμε τη φόρμα για την υποβολή νέου μηνύματος.
Όταν εμφανίζουμε ένα μήνυμα στο δωμάτιο, προσπελαύνουμε την email διεύθυνση του χρήστη που το δημιούργησε για να μπορούμε να υπολογίσουμε το hash της gravatar εικόνας προφίλ του. Χρησιμοποιήσαμε λοιπόν την μέθοδο .includes(:user) στο ερώτημα της βάσης για τα μηνύματα δωματίου @room_messages ώστε να προσκομίζονται και οι χρήστες ταυτόχρονα για να αποφύγουμε το πρόβλημα με τα N+1 ερωτήματα^[1].

Δημιουργήστε την προβολή δωματίου app/views/rooms/show.html.erb:

<h1>
  <%= @room.name %>
</h1>

<div class="row">
  <div class="col-12 col-md-3">
    <%= render partial: 'rooms' %>
  </div>

  <div class="col">
    <div class="chat">
      <% @room_messages.each do |room_message| %>
        <%= room_message %>
      <% end %>
    </div>

    <%= simple_form_for @room_message, remote: true do |form| %>
      <div class="input-group mb-3">
        <%= form.input :message, as: :string,
                                 wrapper: false,
                                 label: false,
                                 input_html: {
                                   class: 'chat-input'
                                 } %>
        <div class="input-group-append">
          <%= form.submit "Send", class: 'btn btn-primary chat-input' %>
        </div>
      </div>

      <%= form.input :room_id, as: :hidden %>
    <% end %>
  </div>
</div>

Σημειώσεις:

Επαναχρησιμοποιήσαμε το απόσπασμα προβολής app/views/rooms/_rooms.html.erb που δημιουργήσαμε στο προηγούμενο βήμα
Προσθέσαμε ένα div με κλάση .chat και σε αυτό θα εμφανίζονται τα μηνύματα του δωματίου
Προσθέσαμε μια φόρμα για το μήνυμα @room_message που αρχικοποιήσαμε στον ελεγκτή. Επίσης χρησιμοποιήσαμε την οδηγία remote: true όταν αρχικοποιήσαμε τη φόρμα συνεπώς η υποβολή της θα γίνεται μέσω Ajax.
Προσθέσαμε ένα κρυφό πεδίο για το χαρακτηριστικό :room_id ώστε να είναι διαθέσιμο στον ελεγκτή των μηνυμάτων RoomMessagesController κατά την υποβολή της φόρμας

Ας ομορφύνουμε τα στοιχεία της συνομιλίας προσθέτοντας τις παρακάτω γραμμές στο αρχείο app/assets/stylesheets/rails-chat-tutorial.scss:

.chat {
  border: 1px solid lighten($secondary, 40%);
  background: lighten($secondary, 50%);
  height: 50vh;
  border-radius: 5px 5px 0 0;
  overflow-y: auto;
}

.chat-input {
  border-top: 0 none;
  border-radius: 0 0 5px 5px;
}

Περιηγηθείτε σε ένα δωμάτιο για να δούμε τι έχουμε κάνει μέχρι στιγμής.

Πατώντας το κουμπή Send δε συμβαίνει τίποτα στη σελίδα αλλά αν κοιτάξετε το αρχείο καταγραφής (log) του εξυπηρετητή θα παρατηρήσετε το εξής:

AbstractController::ActionNotFound (The action 'create' could not be found for RoomMessagesController):

Ας το διορθώσουμε.

Δημιουργία μηνυμάτων

Αυτό θα είναι απλό. Το μόνο που έχουμε να κάνουμε είναι να υλοποιήσουμε την ενέργεια της δημιουργίας - create στον ελεγκτή των μηνυμάτων - RoomMessagesController.

app/controllers/room_messages_controller.rb

class RoomMessagesController < ApplicationController
  before_action :load_entities

  def create
    @room_message = RoomMessage.create user: current_user,
                                       room: @room,
                                       message: params.dig(:room_message, :message)
  end

  protected

  def load_entities
    @room = Room.find params.dig(:room_message, :room_id)
  end
end

Σημειώσεις:

φορτώνουμε εκ των προτέρων το δωμάτιο χρησιμοποιώντας την παράμετρο room_id που προσθέσαμε προηγουμένως σαν κρυφό πεδίο στη φόρμα του μηνύματος
δημιουργούμε ένα νέο μήνυμα θέτοντας του ως χρήστη τον χρήστη που είναι πιστοποιημένος κατά την υποβολή

Αν δοκιμάσετε να υποβάλετε ένα μήνυμα τώρα, και πάλι δε θα δείτε να συμβαίνει κάτι στη σελίδα αλλά στα logs του εξυπηρετητή θα δείτε ότι το μήνυμα δημιουργήθηκε επιτυχώς.

Started POST "/room_messages" for ::1 at 2019-04-04 19:24:33 +0300
Processing by RoomMessagesController#create as JS
  Parameters: {"utf8"=>"✓", "room_message"=>{"message"=>"My first message", "room_id"=>"8"}, "commit"=>"Send"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ /home/iridakos/.rvm/gems/ruby-2.6.2@rails-chat-tutorial/gems/activerecord-5.2.3/lib/active_record/log_subscriber.rb:98
  Room Load (0.2ms)  SELECT  "rooms".* FROM "rooms" WHERE "rooms"."id" = ? LIMIT ?  [["id", 8], ["LIMIT", 1]]
  ↳ app/controllers/room_messages_controller.rb:13
   (0.1ms)  begin transaction
  ↳ app/controllers/room_messages_controller.rb:5
  RoomMessage Create (0.7ms)  INSERT INTO "room_messages" ("room_id", "user_id", "message", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?)  [["room_id", 8], ["user_id", 1], ["message", "My first message"], ["created_at", "2019-04-04 16:24:33.456641"], ["updated_at", "2019-04-04 16:24:33.456641"]]
  ↳ app/controllers/room_messages_controller.rb:5
   (4.0ms)  commit transaction
  ↳ app/controllers/room_messages_controller.rb:5
No template found for RoomMessagesController#create, rendering head :no_content
Completed 204 No Content in 88ms (ActiveRecord: 5.1ms)

Οι χρήστες περιμένουν το πεδίο του μηνύματος να καθαρίζει μετά την αποστολή ενός μηνύματος. Ας μην τους αφήσουμε να περιμένουν.

Δημιουργήστε ένα αρχείο app/assets/javascripts/room.js και προσθέστε τα παρακάτω:

$(function() {
  $('#new_room_message').on('ajax:success', function(a, b,c ) {
    $(this).find('input[type="text"]').val('');
  });
});

Συνδέουμε το συμβάν ajax:success που πυροδοτείται από το Rails στην επιτυχή υποβολή της φόρμας και το μόνο που κάνουμε είναι ότι καθαρίζουμε τα περιεχόμενα του πεδίου κειμένου του μηνύματος.

Φορτώστε εκ νέου τη σελίδα και προσπαθήστε να υποβάλετε ξανά και δείτε την αλλαγή που μόλις κάναμε. Το πεδίο του μηνύματος θα πρέπει να καθαρίσει μετά την υποβολή της φόρμας.

Εμφάνιση μηνυμάτων

Αν φορτώσετε πάλι τη σελίδα του δωματίου θα δείτε κάτι σαν αυτό:

Ας ομορφύνουμε και τα μηνύματα.

Αντικαταστήστε τα περιεχόμενα της προβολής του δωματίου app/views/rooms/show.html.erb με τα παρακάτω:

<h1>
  <%= @room.name %>
</h1>

<div class="row">
  <div class="col-12 col-md-3">
    <%= render partial: 'rooms' %>
  </div>

  <div class="col">
    <div class="chat">
      <% @room_messages.each do |room_message| %>
        <div class="chat-message-container">
          <div class="row no-gutters">
            <div class="col-auto text-center">
              <img src="<%= gravatar_url(room_message.user) %>" class="avatar" alt="">
            </div>

            <div class="col">
              <div class="message-content">
                <p class="mb-1">
                  <%= room_message.message %>
                </p>

                <div class="text-right">
                  <small>
                    <%= room_message.created_at %>
                  </small>
                </div>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <%= simple_form_for @room_message, remote: true do |form| %>
      <div class="input-group mb-3">
        <%= form.input :message, as: :string,
                                 wrapper: false,
                                 label: false,
                                 input_html: {
                                   class: 'chat-input'
                                 } %>
        <div class="input-group-append">
          <%= form.submit "Send", class: 'btn btn-primary chat-input' %>
        </div>
      </div>

      <%= form.input :room_id, as: :hidden %>
    <% end %>
  </div>
</div>

και προσθέστε τις παρακάτω CSS κλάσεις μέσα στην κλάση .chat:

.chat-message-container {
  padding: 5px;

  .avatar {
    margin: 5px;
  }

  .message-content {
    padding: 5px;
    border: 1px solid $primary;
    border-radius: 5px;
    background: lighten($primary, 10%);
    color: $white;
  }

  & + .chat-message-container {
    margin-top: 10px;
  }
}

Φορτώστε ξανά τη σελίδα. Magic.

WebSockets - ActionCable

Ήρθε η ώρα να χρησιμοποιήσουμε τα WebSockets μέσω της λειτουργικότητας ActionCable του Rails.

Action Cable seamlessly integrates WebSockets with the rest of your Rails application. It allows for real-time features to be written in Ruby in the same style and form as the rest of your Rails application, while still being performant and scalable. It’s a full-stack offering that provides both a client-side JavaScript framework and a server-side Ruby framework. You have access to your full domain model written with Active Record or your ORM of choice. – Action Cable Overview @ Ruby on Rails Guides (v5.2.3)

Εγκατάσταση redis

Θα χρησιμοποιήσουμε τον προσαρμογέα (adapter) redis που αποτελεί μια ασφαλή επιλογή για παραγωγικά περιβάλλοντα σε αντίθεση με την επιλογή async.

Πρώτα πρέπει να εγκαταστήσετε την εφαρμογή redis στο σύστημά σας.

Για να το εγκαταστήσω σε Ubuntu χρειάστηκε απλά να εκτελέσω τις παρακάτω εντολές.

sudo apt update
sudo apt install redis-server

Για να ελέγξετε ότι η εγκατάσταση ήταν επιτυχής, βεβαιωθείτε ότι παίρνετε PONG όταν εκτελείτε:

$ redis-cli
127.0.0.1:6379> ping
PONG

Ρύθμιση του ActionCable

Αφου εργαζόμαστε σε περιβάλλον ανάπτυξης (development environment), ανοίξτε το αρχείο ρυθμίσεων του στοιχείου ActionCable config/cable.yml και αντικαταστήστε τα περιεχόμενά του με τα παρακάτω:

development:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: rails-chat-tutorial_development

test:
  adapter: async

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: rails-chat-tutorial_production

Σημείωση: προσθέσαμε την επιλογή channel_prefix επειδή:

Additionally, a channel_prefix may be provided to avoid channel name collisions when using the same Redis server for multiple applications – Action Cable Overview # Redis Adapter @ Ruby on Rails Guides (v5.2.3)

Τέλος, θα προσθέσουμε την απαίτηση βιβλιοθήκης για τον προσαρμογέα redis στο μητρώο απαιτήσεων Gemfile:

gem 'redis'

Μην ξεχνάτε να εκτελείτε bundle κάθε φορά που αλλάζετε αυτό το αρχείο.

Ρύθμιση `devise` για πιστοποίηση συνδέσεων WebSocket

Όταν εγκαθίσταται μια σύνδεση WebSocket, δεν έχουμε πρόσβαση στη συνεδρία του χρήστη (user session) αλλά έχουμε πρόσβαση τα cookies του. Έτσι, για να μπορούμε να πιστοποιήσουμε τον χρήστη χρειάζεται να κάνουμε κάποια πράγματα σχετικά με το devise (credits to Greg Molnar).

Δημιουργήστε έναν αρχικοποιητή για τα “warden hooks” με το όνομα config/initializers/warden_hooks.rb και προσθέστε τις παρακάτω γραμμές:

Warden::Manager.after_set_user do |user,auth,opts|
  scope = opts[:scope]
  auth.cookies.signed["#{scope}.id"] = user.id
end

Warden::Manager.before_logout do |user, auth, opts|
  scope = opts[:scope]
  auth.cookies.signed["#{scope}.id"] = nil
end

Επεξήγηση: Προσθέτουμε ένα cookie με το αναγνωριστικό του χρήστη (user id) μετά την επιτυχή πιστοποίηση του και το αφαιρούμε κατά την έξοδό του από την εφαρμογή.

Ρύθμιση της σύνδεση WebSocket

Ανοίξτε το αρχείο app/channels/application_cable/connection.rb και αλλάξτε τα περιεχόμενά του ως εξής:

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private

    def find_verified_user
      if verified_user = User.find_by(id: cookies.signed['user.id'])
        verified_user
      else
        reject_unauthorized_connection
      end
    end
  end
end

Επεξήγηση:

Here identified_by is a connection identifier that can be used to find the specific connection later. Note that anything marked as an identifier will automatically create a delegate by the same name on any channel instances created off the connection. – Action Cable Overview # Connection setup @ Ruby on Rails Guides (v5.2.3)

Στη μέθοδο find_verified_user προσπελαύνουμε το cookie που θέσαμε νωρίτερα στον αρχικοποιητή των warden hooks.

Δημιουργία του καναλιού δωματίου

A channel encapsulates a logical unit of work, similar to what a controller does in a regular MVC setup. – Action Cable Overview # Channels @ Ruby on Rails Guides (v5.2.3)

Θα δημιουργήσουμε το κανάλι RoomChannel στο οποίο θα εγγράφονται όλες οι σελίδες δωματίων.

Δημιουργήστε το κανάλι με το όνομα app/channels/room_channel.rb και τα εξής περιεχόμενα:

class RoomChannel < ApplicationCable::Channel
  def subscribed
    room = Room.find params[:room]
    stream_for room

    # or
    # stream_from "room_#{params[:room]}"
  end
end

Επεξήγηση:

Η μέθοδος subscribed εκτελείται κάθε φορά που εγγράφεται κάποιος στο κανάλι και είναι υπεύθυνη να ρυθμίσει τη ροή μέσω της οποίας τα δεδομένα θα πηγαινοέρχονται.

Θα ρυθμίσουμε τον κώδικα της σελίδα δωματίου αργότερα με τέτοιο τρόπο ώστε κατά την εγγραφή στο κανάλι να αποστέλλεται και η παράμετρος του δωματίου room.

Έχουμε δύο επιλογές:

Να χρησιμοποιήσουμε τη μέθοδο stream_for: με αυτό τον τρόπο το Rails αυτόματα παράγει ένα όνομα ροής για το εκάστοτε μοντέλο (room στην περίπτωσή μας), για παράδειγμα: “room:asdfwer234”. Όταν στη συνέχεια θέλουμε να στείλουμε δεδομένα σε αυτή τη ροή, το μόνο που έχουμε να κάνουμε είναι να εκτελέσουμε τη μέθοδο RoomChannel.broadcast_to(room_object, data) όπου το Rails θα ανακτήσει αυτόματα το όνομα της ροής βάσει της παραμέτρου room_object. Με άλλα λόγια, δε χρειάζεται εμείς να υπολογίζουμε το όνομα μιας ροής δωματίου στην οποία θέλουμε να στείλουμε/λάβουμε δεδομένα.
- αυτή η επιλογή είναι μόνο όταν το κανάλι χειρίζεται εγγραφές (subscriptions) που συνδέονται με μοντέλα, στην περίπτωσή μας κάποιο δωμάτιο
Να χρησιμοποιήσουμε τη μέθοδο stream_from: ορίζουμε μόνοι μας το όνομα της ροής και στη συνέχεια, όταν θέλουμε να στείλουμε δεδομένα στη ροή χρησιμοποιούμε: ActionCable.server.broadcast("room_#{a_room_id_here}", data).

Διαβάστε περισσότερα εδώ.

Αναμετάδοση μηνυμάτων

Κάθε φορά που δημιουργείται ένα μήνυμα, θέλουμε να το αναμεταδώσουμε στη ροή του καναλιού για το συγκεκριμένο δωμάτιο. Για να το κάνουμε αυτό, αλλάξτε την ενέργεια δημιουργίας μηνύματος - create του αντίστοιχου ελεγκτή app/controllers/room_messages_controller.rb ως εξής:

def create
  @room_message = RoomMessage.create user: current_user,
                                     room: @room,
                                     message: params.dig(:room_message, :message)

  RoomChannel.broadcast_to @room, @room_message
end

Επεξήγηση: προσθέσαμε τη γραμμή RoomChannel.broadcast_to @room, @room_message που θα αναμεταδώσει στη ροή του καναλιού του δωματίου (όπως εξηγήσαμε προηγουμένως) το μήνυμα @room_message μετασχηματισμένο σε μορφή JSON μέσω της μεθόδου to_json.

Έτσι, στην άλλη πλευρά, στην πλευρά του πελάτη δηλαδή, θα παραλάβουμε την JSON μορφή του μοντέλου RoomMessage. Για να δούμε πως είναι αυτή:

{
  "id":29,
  "room_id":8,
  "user_id":1,
  "message":"My first message",
  "created_at":"2019-04-04T17:09:00.637Z",
  "updated_at":"2019-04-04T17:09:00.637Z"
}

Έχουμε σκοπό να εμφανίσουμε τα μηνύματα στη σελίδα του δωματίου μέσω Javascript και αυτή η πληροφορία που λαμβάνουμε προς το παρόν δεν είναι αρκετή. Μας λείπει η διεύθυνση της εικόνας προφίλ gravatar. Ας την προσθέσουμε.

Ανοίξτε το μοντέλου του χρήστη app/models/user.rb και προσθέστε την παρακάτω μέθοδο.

def gravatar_url
  gravatar_id = Digest::MD5::hexdigest(email).downcase
  "https://gravatar.com/avatar/#{gravatar_id}.png"
end

Έχουμε ήδη υλοποιήσει αυτή τη μέθοδο στις βοηθητικές μεθόδους app/helpers/application_helper.rb αλλά δε θα τη χρειαστούμε πλέον οπότε αφαιρέστε τη.

Ενημερώστε το απόσπασμα της μπάρας πλοήγησης app/views/shared/_navigation_bar.html.erb ώστε ο υπολογισμός της διεύθυνσης της εικόνας προφίλ να γίνεται πλέον από τη μέθοδο που μόλις δημιουργήσαμε:

<img class="avatar" src="<%= current_user.gravatar_url %>">

Ενημερώστε και τη σελίδα δωματίου app/views/rooms/show.html.erb αλλάξτε τη και εκεί επίσης, με:

<img src="<%= room_message.user.gravatar_url %>" class="avatar" alt="">

Τέλος, θα αλλάξουμε το μετασχηματισμό JSON των μηνυμάτων - RoomMessage ώστε να εμπεριέχει και τη διεύθυνση της εικόνας προφίλ:

app/models/room_message.rb

def as_json(options)
  super(options).merge(user_avatar_url: user.gravatar_url)
end

Ας επιβεβαιώσουμε ότι ο μετασχηματισμός είναι επιτυχής:

{
  "id":29,
  "room_id":8,
  "user_id":1,
  "message":"My first message",
  "created_at":"2019-04-04T17:09:00.637Z",
  "updated_at":"2019-04-04T17:09:00.637Z",
  "user_avatar_url":"https://gravatar.com/avatar/02a28db6886d578f75a820b50f2dd334.png"
}

Μια χαρά, προχωράμε.

Εγγραφή στη ροή δωματίου

Θα προσθέσουμε κάποια δεδομένα στη σελίδα των δωματίων ώστε να μπορούμε να τα χρησιμοποιήσουμε μέσω Javascript για να πραγματοποιούμε εγγραφή στις κατάλληλες ροές κάθε φορά που επισκεπτόμαστε ένα δωμάτιο.

Ανοίξτε το αρχείο app/views/rooms/show.html.erb και αλλάξτε τη γραμμή στην οποία ορίζουμε το div chat ως εξής:

<div class="chat" data-channel-subscribe="room" data-room-id="<%= @room.id %>">

Επεξήγηση: Προσθέσαμε δύο χαρακτηριστικά δεδομένων, ένα που ορίζει σε ποιο κανάλι θέλουμε να γραφτούμε (room) και ένα που ορίζει σε ποιο συγκεκριμένο δωμάτιο βρισκόμαστε (@room.id).

Στο τέλος του αρχείου προσθέστε το παρακάτω απόσπασμα κώδικα:

<div class="d-none" data-role="message-template">
  <div class="chat-message-container">
    <div class="row no-gutters">
      <div class="col-auto text-center">
        <img src="" class="avatar" alt="" data-role="user-avatar">
      </div>

      <div class="col">
        <div class="message-content">
          <p class="mb-1" data-role="message-text"></p>

          <div class="text-right">
            <small data-role="message-date"></small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Αυτό το απόσπασμα θα χρησιμοποιείται σαν πρότυπο (template) για κάθε εισερχόμενο μήνυμα. Κάθε φορά που έρχεται κάποιο μήνυμα θα:

κλωνοποιούμε αυτό το απόσπασμα HTML
θα αλλάζουμε τις τιμές των κατάλληλων στοιχείων του κλωνοποιημένου πλέον αποσπάσματος και τέλος
θα προσαρτούμε τον παραγόμενο HTML κώδικα στο τέλος του div chat.

Τώρα θα δημιουργήσουμε το Javascript που θα είναι υπεύθυνο για τις εγγραφές στις ροές των καναλιών και για τον χειρισμό των εισερχόμενων δεδομένων.

Δημιουργήστε το αρχείο app/assets/javascripts/channels/room_channel.js και προσθέστε τον παρακάτω κώδικα:

$(function() {
  $('[data-channel-subscribe="room"]').each(function(index, element) {
    var $element = $(element),
        room_id = $element.data('room-id')
        messageTemplate = $('[data-role="message-template"]');

    $element.animate({ scrollTop: $element.prop("scrollHeight")}, 1000)        

    App.cable.subscriptions.create(
      {
        channel: "RoomChannel",
        room: room_id
      },
      {
        received: function(data) {
          var content = messageTemplate.children().clone(true, true);
          content.find('[data-role="user-avatar"]').attr('src', data.user_avatar_url);
          content.find('[data-role="message-text"]').text(data.message);
          content.find('[data-role="message-date"]').text(data.updated_at);
          $element.append(content);
          $element.animate({ scrollTop: $element.prop("scrollHeight")}, 1000);
        }
      }
    );
  });
});

Επεξήγηση:

Για κάθε στοιχείο που έχει χαρακτηριστικό δεδομένων (data attribute) channel-subscribe με τιμή room
- Δημιούργησε μια εγγραφή (subscription) στο κανάλι “RoomChannel” περνώντας ως παράμετρο με όνομα room την τιμή του room-id χαρακτηριστικού δεδομένων (θυμηθείτε αυτή τη γραμμή στο κανάλι των δωματίων (RoomChannel): Room.find params[:room])
  - Όταν έρχονται δεδομένα, κλωνοποίησε το πρότυπο και άλλαξε τα περιεχόμενά του βάσει των χαρακτηριστικών του εισερχόμενου αντικειμένου.
  - Πρόσθεσε το νέο περιεχόμενο στο div chat και τέλος
  - Χρησιμοποίησε animation για να εντυπωσιάσεις τους χρήστες μετακινώντας σταδιακά την τρέχουσα θέση του div μηνυμάτων στο κάτω μέρος του (αν δεν έγινε κατανοητό στα ελληνικά, εννοώ να γίνει smooth scrolling στο bottom του div :).

Αυτάααααααα! Μεγάλο άρθρο, κουράστηκε η γάτα.

Ευχαριστίες

Ευχαριστώ πολύ για τα σχόλια και το feedback!

[1] Armando Andini - N+1 queries
[2] Rodolfo Ruiz - Coffeescript leftovers
[3] Felix Wolfsteller - Turbolinks leftovers
[4] Maria Kravtsova - Migration typo
[5][7][8] Tony Dehnke - Sign up step, Missing step for adding model relations, Missing line from html code block
[6] keytonw - Devise view missing button class
[9] Martin - Mention order of requirements in application.js
[10] Sumak - Remove duplicate authentication related code

Bash: Προσθέτοντας tab συμπλήρωση στα script

Wed, 13 Nov 2019 10:30:00 +0200

Πρόσφατα χρειάστηκε να προσθέσω tab συμπλήρωση σε ένα script μου και βρήκα τη λειτουργικότητα πολύ ενδιαφέρουσα.

Σε αυτό το άρθρο θα εξοικειωθείτε με τη διαδικασία προσθήκης tab συμπλήρωσης στα script σας στη γραμμή εντολών του Bash.

Τι είναι η tab συμπλήρωση (bash completion);

Η tab συμπλήρωση είναι μια λειτουργικότητα μέσω της οποίας το Bash επιτρέπει στους χρήστες να πληκτρολογήσουν τις εντολές τους πιο εύκολα και γρήγορα. Αυτό το πετυχαίνει με το να παρουσιάζει πιθανές επιλογές ως συνέχεια της εντολής όταν οι χρήστες πατούν το tab πλήκτρο καθώς την γράφουν.

$ git<tab><tab>
git                 git-receive-pack    git-upload-archive  
gitk                git-shell           git-upload-pack     
$ git-s<tab>
$ git-shell

Πως δουλεύει;

Το script συμπλήρωσης είναι κώδικας που χρησιμοποιεί την συστημική bash εντολή complete για να ορίσει ποιες προτάσεις συμπλήρωσης θα εμφανιστούν για ένα δεδομένο εκτελέσιμο πρόγραμμα. Η φύση των προτάσεων αυτών ποικίλει από απλές στατικές έως περίπλοκες και δυναμικές επιλογές.

Γιατί να ασχοληθώ;

Είναι καλό να παρέχεται αυτή η λειτουργικότητα στους χρήστες των script:

για να διευκολύνεται η πληκτρολόγηση κειμένου όταν μπορεί να συμπληρωθεί αυτόματα
για να μπορούν να βλέπουν ποιες είναι οι πιθανές συνέχειες στις εντολές που πληκτρολογούν και
για την αποφυγή λαθών και για την βελτίωση της εμπειρίας τους κρύβοντας τις μη διαθέσιμες και εμφανίζοντας τις διαθέσιμες επιλογές βάσει του τι έχουν ήδη πληκτρολογήσει

Ας ξεκινήσουμε

Να τι θα κάνουμε σε αυτό το βοήθημα.

Αρχικά, θα δημιουργήσουμε ένα πολύ απλό εκτελέσιμο script που θα το πούμε dothis. Αυτό θα είναι το script που στη συνέχεια θα προσθέσουμε τη λειτουργικότητα για την tab συμπλήρωση. Το μόνο που θα κάνει το script είναι να εκτελεί την εντολή που βρίσκεται σε μια συγκεκριμένη θέση στο ιστορικό των εντολών του χρήστη. Τη θέση της εντολής στο ιστορικό θα την δέχεται σαν παράμετρο κατά την εκτέλεση. Για παράδειγμα, η παρακάτω εντολή θα εκτελέσει την εντολή ls -a δεδομένου ότι η τελευταία βρισκεται στη θέση 235 στο ιστορικό εντολών του χρήστη:

dothis 235

Στη συνέχεια θα δημιουργήσουμε το script tab συμπλήρωσης που θα εμφανίζει τις εντολές μαζί με τη θέση τους, από το ιστορικό εντολών του χρήστη και τέλος θα το συνδέσουμε με το πρόγραμμα dothis που προανέφερα.

$ dothis <tab><tab>
ls
ls -la
cd ~
man history
git status
history | cut -c 8-

Συγκεντρωθείτε bash και τα καταφέρουμε με την πρώτη.

Δημιουργία του εκτελέσιμου προγράμματος

Δημιουργήστε ένα αρχείο με το όνομα dothis στο φάκελο που επιθυμείτε και προσθέστε τον παρακάτω κώδικα:

if [ -z "$1" ]; then
  echo "No command number passed"
  exit 2
fi

exists=$(fc -l -1000 | grep ^$1 -- 2>/dev/null)

if [ -n "$exists" ]; then
  fc -s -- "$1"
else
  echo "Command with number $1 was not found in recent history"
  exit 2
fi

Σημειώσεις:

Πρώτα ελέγχουμε αν το πρόγραμμα κλήθηκε με παράμετρο
Στη συνέχεια ελέγχουμε αν ο συγκεκριμένος αριθμός αντιστοιχεί σε κάποια από τις τελευταίες 1000 εντολές του ιστορικού του χρήστη.
- αν ναι τότε την εκτελούμε με χρήση της εντολής fc
- διαφορετικά εμφανίζουμε ένα μήνυμα λάθους

Μετατρέψτε το script σε εκτελέσιμο με την παρακάτω εντολή:

chmod +x ./dothis

Θα εκτελούμε συχνά αυτό το script σε αυτό το βοήθημα οπότε συνιστώ να το μεταφέρετε σε ένα φάκελο που ανήκει στην μεταβλητή PATH του περιβάλλοντός σας ωτε να μπορούμε να το προσπελάσουμε από παντού απλά πληκτρολογώντας dothis.

Το δικό μου το έβαλα στο home bin πληκτρολογώντας:

install ./dothis ~/bin/dothis

Μπορείτε να κάνετε το ίδιο δεδομένου ότι έχετε φάκελο ~/bin ο οποίος εμπεριέχεται στην PATH μεταβλητή σας.

Δοκιμάστε να δείτε ότι δουλεύει:

dothis

Θα έπρεπε να δείτε αυτό:

$ dothis
No command number passed

Done.

Δημιουργία του script tab συμπλήρωσης

Δημιουργήστε ένα αρχείο με όνομα dothis-completion.bash. Από εδώ και στο εξής θα αναφέρομαι στο αρχείο αυτό με τον όρο script συμπλήρωσης.

Αφού του προσθέσουμε κώδικα, θα εκτελέσουμε την εντολή source για να το “ενεργοποιήσουμε”. Θα εκτελούμε την source σε αυτό το αρχείο κάθε φορά που αλλάζουμε το περιεχόμενό του ώστε να ισχύουν οι αλλαγές.

Θα συζητήσουμε επιλογές ώστε να να γίνεται η ενεργοποίηση αυτή κάθε φορά που ανοίγει νέα bash κονσόλα αργότερα.

Στατική συμπλήρωση

Υποθέστε ότι το dothis υποστήριζε μια στατική λίστα από παραμέτρους, για παράδειγμα:

τώρα
αύριο
ποτέ

Θα χρησιμοποιήσουμε την εντολή complete για να καταχωρήσουμε αυτή τη λίστα ως επιλογές για tab συμπλήρωση. (Για να χρησιμοποιήσουμε τη σωστή ορολογία, θα χρησιμοποιήσουμε την εντολή complete για να ορίσουμε τις προδιαγραφές συμπλήρωσης (compspec) για το πρόγραμμά μας.)

Προσθέστε αυτά στο script συμπλήρωσης.

#/usr/bin/env bash
complete -W "τώρα αύριο ποτέ" dothis

Τι κάναμε με τη χρήση της παραπάνω εντολής complete:

χρησιμοποιήσαμε την επιλογή -W (wordlist) για να παρέχουμε τη λίστα που θα χρησιμοποιηθεί για συμπλήρωση
ορίσαμε σε ποιο πρόγραμμα αυτή η λίστα θα παρέχεται για tab συμπλήρωση (η τελευταία παράμετρος: dothis)

“Ενεργοποιήστε” το αρχείο (δεν βρήκα πιο δόκιμο όρο για να περιγράψω τη σημασία της εκτέλεσης της εντολής “source”):

source ./dothis-completion.bash

Τώρα προσπαθήστε να πατήσετε το πλήκτρο tab δύο φορές όπως παρακάτω:

$ dothis <tab><tab>
αύριο ποτέ τώρα

Προσπαθήστε ξανά αφού βάλετε και ένα τ:

$ dothis τ<tab><tab>
τώρα

Magic! Οι επιλογές συμπλήρωσης φιλτράρονται αυτόματα ώστε να εμφανιστούν μόνο αυτές που ξεκινούν από τ.

Σημείωση: Οι επιλογές συμπλήρωσης δεν εμφανίζονται με τη σειρά που τις ορίσαμε στη λίστα λέξεων, ταξινομούνται αυτόματα.

Υπάρχουν πολλές άλλες επιλογές πέραν της -W που χρησιμοποιήσαμε προηγουμένως. Οι περισσότερες παράγουν συμπληρώσεις με στατικό τρόπο, εννοώντας ότι δεν επεμβαίνουμε δυναμικά στο φιλτράρισμα τους.

Για παράδειγμα, αν θέλαμε να έχουμε ως tab συμπληρώσεις για το εκτελέσιμο dothis τους φακέλους που βρίσκονται στον τρέχων φάκελο, θα αλλάζαμε την εντολή ως εξής:

complete -A directory dothis

Πατώντας το tab μετά το dothis, θα λαμβάναμε μια λίστα σαν την παρακάτω:

$ dothis <tab><tab>
dir1/ dir2/ dir3/

Βρείτε ολόκληρη τη λίστα με τις διαθέσιμες επιλογές εδώ.

Δυναμική tab συμπλήρωση

Θέλουμε να παράγουμε τις προτάσεις συμπλήρωσης για το εκτελέσιμο script μας με την ακόλουθη λογική:

αν ο χρήστης πατήσει το tab αμέσως μετά την εντολή, θα δείχνουμε τις τελευταίες 50 εκτελεσθείσες εντολές μαζί με τον αριθμό που αντιστοιχεί στη θέση τους στο ιστορικό
αν ο χρήστης πατήσει το tab αφού έχει πληκτρολογήσει και έναν αριθμό τότε θα εμφανίζουμε όλες τις εντολές των οποίων η θέση στο ιστορικό του, είναι ή ξεκινά με αυτόν τον αριθμό
αν ο χρήστης πατήσει το tab αφού έχει πληκτρολογήσει και έναν αριθμό και υπάρχει μόνο μια εντολή με θέση που είναι ή ξεκινά με τον αριθμό αυτό τότε θα συμπληρώσουμε απευθείας όλο τον αριθμό (αν έχετε μπερδευτεί μην ανησυχείτε, θα ξεκαθαρίσουν όλα παρακάτω)

Ας ξεκινήσουμε με το να ορίσουμε μια μέθοδο που θα εκτελείται κάθε φορά που ο χρήστης θα “ζητά” προτάσεις συμπλήρωσης για την εντολή dothis (πατώντας το tab). Αλλάξτε το script συμπλήρωσης ως εξής:

#/usr/bin/env bash
_dothis_completions()
{
  COMPREPLY+=("τώρα")
  COMPREPLY+=("αύριο")
  COMPREPLY+=("ποτέ")
}

complete -F _dothis_completions dothis

Σημειώστε τα παρακάτω:

χρησιμοποιήσαμε την επιλογή -F στην εντολή complete ορίζοντας ότι η _dothis_completions είναι η μέθοδος που θα παρέχει τις προτάσεις συμπλήρωσης για το dothis εκτελέσιμο
η COMPREPLY είναι μια μεταβλητή τύπου πίνακα που χρησιμοποιείται για να αποθηκεύει τις προτάσεις συμπλήρωσης - ο μηχανισμός συμπλήρωσης χρησιμοποιεί τη συγκεκριμένη μεταβλητή για να εμφανίσει τα περιεχόμενά της ως προτάσεις συμπλήρωσης

Τώρα, ενεργοποιήστε το script συμπλήρωσης και κατόπιν δοκιμάστε να πατήσετε tab μετά το εκτελέσιμο dothis:

$ dothis <tab><tab>
αύριο ποτέ τώρα

Τέλεια. Παράγουμε τις ίδιες προτάσεις συμπλήρωσης όπως πριν που χρησιμοποιήσαμε την επιλογή -W. Ή μήπως όχι; Δοκιμάστε το παρακάτω:

$ dothis ποτ<tab><tab>
αύριο τώρα ποτέ

Όπως βλέπετε, παρόλου που έχουμε πληκτρολογήσει ποτ και μετά ζητήσαμε προτάσεις συμπλήρωσης πατώντας το tab, οι διαθέσιμες προτάσεις συμπλήρωσης παραμένουν οι ίδιες, αφιλτράριστες και τίποτα δε συμπληρώνεται αυτόματα (κανονικά θα έπρεπε κατευθείαν να συμπληρωθεί η λέξη ποτέ χωρίς καν να εμφανιστούν προτάσεις συμπλήρωσης αφού είναι η μόνη επιλογή που ξεκινά από ποτ).

Γιατί συμβαίνει αυτό;

Τα περιεχόμενα της μεταβλητής COMPREPLY εμφανίζονται πάντα. Η μέθοδος είναι υπεύθυνη να προσθέτει/αφαιρεί προτάσεις από εδώ και στο εξής.
Αν η COMPREPLY μεταβλητή είχε μόνο ένα στοιχείο τότε η λέξη θα συμπληρωνόταν αυτόματα στην εντολή dothis. Εφόσον η τρέχουσα υλοποίησή μας πάντα αποθηκεύει στη μεταβλητή τις ίδιες τρεις λέξεις, αυτό δε θα συμβεί.

Θα μας σώσει η compgen: μια συστημική εντολή που παράγει προτάσεις συμπλήρωσης υποστηρίζοντας σχεδόν όλλες τις επιλογές που υποστηρίζει και η συστημική εντολή complete που χρησιμοποιούσαμε ως τώρα (πχ. -W για λίστα λέξεων, -d για φακέλους) και φιλτράρει τις προτάσεις βάσει του τι έχει ήδη πληκτρολογηθεί από το χρήστη.

Και πάλι, μην ανησυχείτε αν έχετε μπερδευτεί, τα πάντα θα ξεκαθαρίσουν παρακάτω.

Πληκτρολογήστε τα παρακάτω στη γραμμή εντολών για να κατανοήσετε καλύτερα τη κάνει η compgen:

$ compgen -W "τώρα αύριο ποτέ"
αύριο
τώρα
ποτέ
$ compgen -W "τώρα αύριο ποτέ" τ
τώρα
$ compgen -W "τώρα αύριο ποτέ" α
αύριο

Οπότε τώρα μπορούμε να χρησιμοποιήσουμε την compgen αλλά πρέπει να βρούμε πρώτα τι έχει πληκτρολογήσει ο χρήστης μετά το dothis. Η λειτουργικότητα tab συμπλήρωσης ευτυχώς παρέχει μεταβλητές που σχετίζονται με την συμπλήρωση που είναι υπό εκτέλεση. Παραθέτω τις πιο σημαντικές:

COMP_WORDS: ένας πίνακας με όλες τις λέξεις που έχουν πληκτρολογηθεί μετά από το όνομα του εκτελέσιμου στο οποίο έχει συνδεθεί το compspec (στην περίπτωσή μας: όλες τις λέξεις που έχουν πληκτρολογηθεί μετά το dothis)
COMP_CWORD: ένας αριθμός που δείχνει σε ποια θέση του πίνακα COMP_WORDS βρίσκεται ο κέρσορας - με άλλα λόγια, σε ποια λέξη ήταν ο κέρσορας όταν πατήθηκε το tab
COMP_LINE: ολόκληρη η τρέχουσα εντολή

Για να προσπελάσουμε την λέξη που πληκτρολογήθηκε αμέσως μετά το dothis αρκεί να χρησιμοποιήσουμε την τιμή του COMP_WORDS[1]

Αλλάξτε το script συμπλήρωσης ξανά:

#/usr/bin/env bash
_dothis_completions()
{
  COMPREPLY=($(compgen -W "τώρα αύριο ποτέ" "${COMP_WORDS[1]}"))
}

complete -F _dothis_completions dothis

Ενεργοποιήστε το και ορίστε:

 $ dothis
αύριο     τώρα       ποτέ
$ dothis α
αύριο

Τώρα, αντί των λέξεων τώρα, αύριο, ποτέ, Θα θέλαμε να δούμε τους αριθμούς που είναι στην ουσία οι θέσεις των εντολών από το ιστορικό του χρήστη.

Η εντολή fc -l ακολουθούμενη από έναν αρνητικό αριθμό -n εμφανίζει τις τελευταίες n εντολές που εκτελέστηκαν. Οπότε θα την χρησιμοποιήσουμε ως εξής:

fc -l -50

εμφανίζοντας τις τελευταίες 50 εντολές μαζί με τον αριθμό της θέσης τους στο ιστορικό. Ο μόνος χειρισμός που πρέπει να κάνουμε είναι να αντικαταστήσουμε τα tabs με κενά διαστήματα ώστε να εμφανίζονται σωστά από τον μηχανισμό των συμπληρώσεων του Bash.

sed βόηθα μας.

Αλλάξτε το script συμπλήρωσης ως εξής:

#/usr/bin/env bash
_dothis_completions()
{
  COMPREPLY=($(compgen -W "$(fc -l -50 | sed 's/\t//')" -- "${COMP_WORDS[1]}"))
}

complete -F _dothis_completions dothis

Ενεργοποιήστε το script συμπλήρωσης και δοκιμάστε στη γραμμή εντολών:

$ dothis <tab><tab>
source dothis-completion.bash   649 source dothis-completion.bash   666 cat ~/.bash_profile
clear                           650 clear                           667 cat ~/.bashrc
source dothis-completion.bash   651 source dothis-completion.bash   668 clear
source dothis-completion.bash   652 source dothis-completion.bash   669 install ./dothis ~/bin/dothis
clear                           653 source dothis-completion.bash   670 dothis
source dothis-completion.bash   654 clear                           671 dothis 6546545646
clear                           655 dothis 654                      672 clear
source dothis-completion.bash   656 dothis 631                      673 dothis
source dothis-completion.bash   657 dothis 150                      674 dothis 651
source dothis-completion.bash   658 dothis                          675 source dothis-completion.bash
clear                           659 clear                           676 dothis 651
dothis 623  ls -la              660 dothis                          677 dothis 659
clear                           661 install ./dothis ~/bin/dothis   678 clear
source dothis-completion.bash   662 dothis                          679 dothis 665
clear                           663 install ./dothis ~/bin/dothis   680 clear
source dothis-completion.bash   664 dothis                          681 clear
clear                           665 cat ~/.bashrc

Καθόλου κακό.

Έχουμε ένα πρόβλημα ωστόσο. Προσπαθήστε να πληκτρολογήσετε έναν αριθμό όπως τον βλέπετε στις προτάσεις συμπλήρωσης και πατήστε το tab ξανά.

$ dothis 623<tab>
$ dothis 623  ls 623  ls -la
...
$ dothis 623  ls 623  ls 623  ls 623  ls 623  ls -la

Αυτό συμβαίνει γιατί στο script συμπλήρωσής μας χρησιμοποιήσαμε την τιμή της ${COMP_WORDS[1]} ώστε να ελέγχουμε την πρώτη πάντα λέξη που πληκτρολογήθηκε μετά το dothis (ο αριθμός 623 στην παραπάνω απόσπασμα). Οπότε ο μηχανισμός συμπλήρωσης συνεχίζει να προτείνει ξανά και ξανά την ίδια επιλογή πατώντας το tab.

Για να το διορθώσουμε αυτό, δε θα επιτρέπουμε κανένα είδος συμπλήρωσης να λάβει χώρα αν τουλάχιστον μια λέξη έχει ήδη συμπληρωθεί. Θα προσθέσουμε λοιπόν μια συνθήκη ελέγχοντας το μέγεθος της προαναφερθείσας COMP_WORDS μεταβλητής.

#/usr/bin/env bash
_dothis_completions()
{
  if [ "${#COMP_WORDS[@]}" != "2" ]; then
    return
  fi

  COMPREPLY=($(compgen -W "$(fc -l -50 | sed 's/\t//')" -- "${COMP_WORDS[1]}"))
}

complete -F _dothis_completions dothis

Ενεργοποιήστε το script συμπλήρωσης και ξαναδοκιμάστε.

$ dothis 623<tab>
$ dothis 623 ls -la<tab> # Επιτυχία, δεν συμβαίνει συμπλήρωση εδώ

Υπάρχει ωστόσο και κάτι άλλο που δε μας αρέσει. Θέλουμε να εμφανίζουμε τις θέσεις μαζί με τις αντίστοιχες εντολές ώστε να βοηθήσουμε τους χρήστες να αποφασίσουν ποια είναι η εντολή που θέλουν να εκτελέσουν αλλά όταν υπάρχει μόνο μια πρόταση συμπλήρωσης και ο μηχανισμός τη συμπληρώνει αυτόματα, δεν θα έπρεπε να συμπληρώνεται και η εντολή παρά μόνο ο αριθμός.

Με άλλα λόγια, το dothis δέχεται μόνο έναν αριθμό και δεν έχουμε προσθέσει ελέγχους για περισσότερες παραμέτρους. Όταν μέθοδος που υπολογίζει τις προτάσεις συμπληρώσεων βρίσκε μόνο ένα αποτέλεσμα τότε θα πρέπει να πετσοκόψουμε (trim :D) το λεκτικό που περιέχει τον αριθμό και την εντολή ώστε να μείνει μόνο ο αριθμός.

Για να το πετύχουμε αυτό, θα κρατήσουμε το αποτέλεσμα τις εντολής compgen σε μια μεταβλητή τύπου πίνακα, και αν το μέγεθος της είναι 1 τότε θα επεξεργαστούμε το μοναδικό στοιχείο της ώστε να μείνει μόνο ο αριθμός. Διαφορετικά θα αφήσουμε την μεταβλητή ως έχει.

Αλλάξτε το script συμπλήρωσης ως εξής:

#/usr/bin/env bash
_dothis_completions()
{
  if [ "${#COMP_WORDS[@]}" != "2" ]; then
    return
  fi

  # keep the suggestions in a local variable
  local suggestions=($(compgen -W "$(fc -l -50 | sed 's/\t/ /')" -- "${COMP_WORDS[1]}"))

  if [ "${#suggestions[@]}" == "1" ]; then
    # if there's only one match, we remove the command literal
    # to proceed with the automatic completion of the number
    local number=$(echo ${suggestions[0]/%\ */})
    COMPREPLY=("$number")
  else
    # more than one suggestions resolved,
    # respond with the suggestions intact
    COMPREPLY=("${suggestions[@]}")
  fi
}

complete -F _dothis_completions dothis

Αυτόματη ενεργοποίηση του script tab συμπλήρωσης

Αν θέλετε να ενεργοποιήσετε τις συμπληρώσεις για το εκτελέσιμο μόνο για εσάς, το μόνο που χρειάζεται να κάνετε είναι να προσθέσετε της παρακάτω εντολή στο αρχείο σας ~/.bashrc:

source <path-to-your-script>/dothis-completion.bash

Αν θέλετε να τις ενεργοποιήσετε για όλους τους χρήστες τότε μπορείτε να αντιγράψετε το script συμπλήρωσης στο φάκελο /etc/bash_completion.d/ και θα φορτώνεται αυτόματα από το Bash.

Τελειοποίηση του script συμπλήρωσης

Μερικά επιπλέον βήματα για καλύτερα αποτελέσματα.

Εμφανίζοντας κάθε πρόταση συμπλήρωσης σε νέα γραμμή

Στο script συμπλήρωσης που χρειάστηκε να δημιουργήσω, επίσης έπρεπε να εμφανίζω προτάσεις που αποτελούνταν από δύο τμήματα. Ήθελα να εμφανίζω το πρώτο τμήμα με το εξ ορισμού χρώμα των γραμμάτων της κονσόλας και το δεύτερο τμήμα με γκρι χρώμα ώστε να φαίνεται ότι ήταν απλά βοηθητικό κείμενο. Στο παράδειγμά μας, θα ήταν ωραίο να παρουσιάζουμε τους αριθμούς με το εξ ορισμού χρώμα αλλά το χρώμα των εντολών να ήταν κάτι λιγότερο χτυπητό στο μάτι.

Δυστυχώς, αυτό δεν είναι δυνατόν (τουλάχιστον για την ώρα) γιατί ο μηχανισμός συμπλήρωσης εμφανίζει τις προτάσεις ως καθαρό κείμενο και οι οδηγίες χρώματος δεν εφαρμόζονται (για παράδειγμα, αυτό \e[34mουρανός θα εμφανιζόταν ακριβώς όπως το βλέπετε και όχι η λέξη ουρανός σε μπλε χρώμα).

Αυτό που μπορούμε ωστόσο να κάνουμε για να βελτιώσουμε την εμπειρία των χρηστών (ή όχι :D) είναι να εμφανίζουμε την κάθε πρόταση συμπλήρωσης σε νέα γραμμή. Ο τρόπος για να το κάνουμε αυτό δεν είναι ο προφανής γιατί δεν μπορούμε απλά να προσθέσουμε στο τέλος κάθε πρότασης τον χαρακτήρα αλλαγής γραμμής αφού ο μηχανισμός συμπλήρωσης δεν θα τον μεταφράσει σε αλλαγή γραμμής αλλά θα τον δείξει ως κείμενο (\n).

Θα ακολουθήσουμε ένα μάλλον hackish τρόπο και θα προσθέτουμε κενά στο τέλος κάθε πρότασης συμπλήρωσης, τόσα ώστε το τελικό πλήθος των χαρακτήρων της πρότασης (με τα κενά) να είναι ίσο με το πλήθος των χαρακτήρων που χωρά η κάθε γραμμή της κονσόλας.

printf βόηθα μας.

Αλλάξτε το script συμπλήρωσης ως εξής:

#/usr/bin/env bash
_dothis_completions()
{
  if [ "${#COMP_WORDS[@]}" != "2" ]; then
    return
  fi

  local IFS=$'\n'
  local suggestions=($(compgen -W "$(fc -l -50 | sed 's/\t//')" -- "${COMP_WORDS[1]}"))

  if [ "${#suggestions[@]}" == "1" ]; then
    local number="${suggestions[0]/%\ */}"
    COMPREPLY=("$number")
  else
    for i in "${!suggestions[@]}"; do
      suggestions[$i]="$(printf '%*s' "-$COLUMNS"  "${suggestions[$i]}")"
    done

    COMPREPLY=("${suggestions[@]}")
  fi
}

complete -F _dothis_completions dothis

Ενεργοποιήστε το και δοκιμάστε:

dothis <tab><tab>
...
499 source dothis-completion.bash                   
500 clear
...       
503 dothis 500

Done.

Προσαρμόσιμη συμπεριφορά

Στην περίπτωσή μας, ορίσαμε καρφωτά να εμφανίζονται οι τελευταίες 50 εκτελέσιμες εντολές όταν πατιέται το tab χωρίς να έχει πληκτρολογηθεί κάποιος αριθμός. Θα ήταν καλύτερο να αφήνουμε το χρήστη να επιλέγει πόσες θέλει να είναι αυτές οι εντολές (π.χ. οι τελευταίες 100) και αν δεν έχει ορίσει την επιθυμία του τότε εξ ορισμού να δείχνουμε τις τελευταίες 50,

Για να το πετύχουμε αυτό, θα ελέγχουμε την τιμή μιας μεταβλητής από το περιβάλλον του χρήστη, ας πούμε DOTHIS_COMPLETION_COMMANDS_NUMBER.

Αλλάξτε για τελευταία φορά το script συμπλήρωσης:

#/usr/bin/env bash
_dothis_completions()
{
  if [ "${#COMP_WORDS[@]}" != "2" ]; then
    return
  fi

  local commands_number=${DOTHIS_COMPLETION_COMMANDS_NUMBER:-50}
  local IFS=$'\n'
  local suggestions=($(compgen -W "$(fc -l -$commands_number | sed 's/\t//')" -- "${COMP_WORDS[1]}"))

  if [ "${#suggestions[@]}" == "1" ]; then
    local number="${suggestions[0]/%\ */}"
    COMPREPLY=("$number")
  else
    for i in "${!suggestions[@]}"; do
      suggestions[$i]="$(printf '%*s' "-$COLUMNS"  "${suggestions[$i]}")"
    done

    COMPREPLY=("${suggestions[@]}")
  fi
}

complete -F _dothis_completions dothis

Ενεργοποιήστε το και δοκιμάστε:

export DOTHIS_COMPLETION_COMMANDS_NUMBER=5
$ dothis <tab><tab>
clear
source ./dothis-completion.bash
dothis clear
clear
export DOTHIS_COMPLETION_COMMANDS_NUMBER=5

Χρήσιμοι σύνδεσμοι

Κώδικας και σχόλια

Μπορείτε να βρείτε τον κώδικα από αυτό το άρθρο στο GitHub.

Για feedback, σχόλια, λάθη κ.λπ. παρακαλώ ανοίξτε ένα issue στο αποθετήριο.

Μεγάλο άρθρο, φωτογραφία γάτας

Να σας συστήσω των debugger μου.

Αυτό ήταν. Τελειώσαμε. Καλή συνέχεια.

iridakos - tutorials

Δημιουργώντας μια εφαρμογή συνομιλιών (chat) από το μηδέν με Rails και WebSockets

Εισαγωγή

Τι είναι τα WebSockets;

Γιατί να χρησιμοποιήσουμε WebSockets;

Χτίζοντας την εφαρμογή

Στήνοντας το περιβάλλον

Εγκατάσταση Ruby

Εγκατάσταση Ruby on Rails

Δημιουργία της εφαρμογής

Χρήστες και βιβλιοθήκη devise

Δωμάτια και μηνύματα

Προσθήκη πιστοποίησης χρηστών

Προσθήκη bootstrap

Προσθήκη simple_form

Προβολές devise με bootstrap και simple_form

Καθάρισμα μη χρησιμοποιούμενων στοιχείων

Προσθήκη μπάρας πλοήγησης

Διαχείριση δωματίων

Αρχική σελίδα δωματίων

Δημιουργία και επεξεργασία δωματίου

Σελίδα δωματίου

Δημιουργία μηνυμάτων

Εμφάνιση μηνυμάτων

WebSockets - ActionCable

Εγκατάσταση redis

Ρύθμιση του ActionCable

Ρύθμιση devise για πιστοποίηση συνδέσεων WebSocket

Ρύθμιση της σύνδεση WebSocket

Δημιουργία του καναλιού δωματίου

Αναμετάδοση μηνυμάτων

Εγγραφή στη ροή δωματίου

Ευχαριστίες

Bash: Προσθέτοντας tab συμπλήρωση στα script

Τι είναι η tab συμπλήρωση (bash completion);

Πως δουλεύει;

Γιατί να ασχοληθώ;

Ας ξεκινήσουμε

Δημιουργία του εκτελέσιμου προγράμματος

Δημιουργία του script tab συμπλήρωσης

Στατική συμπλήρωση

Δυναμική tab συμπλήρωση

Αυτόματη ενεργοποίηση του script tab συμπλήρωσης

Τελειοποίηση του script συμπλήρωσης

Εμφανίζοντας κάθε πρόταση συμπλήρωσης σε νέα γραμμή

Προσαρμόσιμη συμπεριφορά

Χρήσιμοι σύνδεσμοι

Κώδικας και σχόλια

Μεγάλο άρθρο, φωτογραφία γάτας

Χρήστες και βιβλιοθήκη `devise`

Ρύθμιση `devise` για πιστοποίηση συνδέσεων WebSocket