Sådan implementeres WebSockets i skinner 4

WebSockets kan implementeres i Rails5 ved hjælp af ActionCable. Det kan bruges til at aktivere mange funktioner som chats, meddelelser og andre realtidsmoduler. Men hvordan opnår man det samme mål uden ActionCable og Rails 5? Denne blog handler om, hvordan vi kan implementere WebSockets i Rails 4.

Lad os inden vi begynder at kigge hurtigt på begrebet WebSockets.

Hvad er WebSockets, og hvordan fungerer de?

Størstedelen af ​​internettet er baseret på HTTP-anmodning / svar. De muliggør kommunikation af mange værter og klienter via TCP / IP-transporter. Dette betyder, at webapplikationer normalt ikke gør noget, når en bruger besøger dem i en browser og analyserer anmodningen og sender et svar. Før brugeren klikker på noget på siden, modtager serveren ikke nogen ny HTTP-anmodning. Derfor vil den stå inaktiv.

Der er teknologier, der gør det muligt for serveren at starte kommunikation med klienten, når der skal sendes data. Eksempler er "Push" eller "Comet". Der er den lange afstemningsteknik, der holder en HTTP-forbindelse åben, når en klient opretter forbindelse til serveren. Den dårlige ting med disse tilgange er overhead af HTTP. Det er ikke særlig godt til applikationer med lav latens.

Det er her WebSockets kommer ind i billedet. De er en API, der giver "socket" vedvarende forbindelser mellem en server og en klient. Dette giver både server og klient mulighed for at sende data til enhver tid.

I denne blog opretter vi et online cricket-spillerauktionssted, der bruger websockets i Rails 4. Webstedet kan bruges af flere brugere til at byde på den samme spiller. Udfordringen er at opdatere budet uden at genindlæse siden og fortsætte den live kommunikation.

Kom godt i gang

Hovedsageligt bruges tre perler til implementering af web-socket-funktionaliteten:

Gemfile

gem ‘faye’gem ‘thin’, require: falsegem ‘render_sync’

Den tynde er en lille og hurtig rubinserver. Det skal installeres med faye, da faye-perlen ikke fungerer med servere som webrick.

Den næste vigtige perle er faye . Faye er et sæt værktøjer til enkel publicering-abonnement-meddelelse mellem webklienter. Den leveres med brugervenlige meddelelsesruteservere til Node.js- og Rack-applikationer og klienter, der kan bruges på serveren og i browseren.

Den sync eller render_sync perle bruges til at oprette realtid deltoner med Rails. Sync giver dig mulighed for at gengive dele til modeller, der med minimal kode opdateres i realtid i browseren, når der sker ændringer på serveren.

Vores mål er at have en funktionalitet, der gør det muligt at vise budværdierne på en brugers showside. Det første trin til implementering af dette er at installere skabeloner fra synkroniseringsperlen.

skinner genererer synkronisering: installer

Og kræv synkronisering i vores aktivpipeline.

app / aktiver / javascripts / application.js

//= require jquery//= require jquery_ujs//= require turbolinks//= require sync//= require_tree

Konfigurationsscriptet er påkrævet i applikationslayoutet

app / visninger / layouts / application.html.erb

Vi er nødt til at oprette en delvis og gemme den i katalogvisningerne / sync / som _bid_log_row.html.erb.

Denne del indeholder værdien af ​​brugerens bud. Det vil se sådan ud:

Current Bid: 

Og for at gengive dette på show-siden skal du tilføje følgende linjer på brugerens show-side:

app / visninger / brugere / show.html.erb

Og endelig foretag ændringerne i BidLogsController, så den ved, hvordan man håndterer eksterne formularindsendelser. Det synkroniserer også de nye bud på plads.

class BidLogsController < ApplicationControllerrespond_to :html, :js
 def index @bid_logs = BidLog.all @new_bid = current_user.bid_logs.build end
 def create @bid_log = current_user.bid_logs.build(bid_log_params) if @bid_log.save sync_new @bid_log end respond_to do |format| format.html { redirect_to user_path(@bid_log.player_id) } format.json { head :no_content } end end
private
 def bid_log_params params.require(:bid_log).permit(:amount, :player_id) end
end

Konfiguration

Nu er den grundlæggende kodningsdel færdig. Næste trin er at konfigurere Faye. Faye skal køre på en separat webserver fra selve webapplikationen. For at opnå dette skal du oprette en Rackup-konfigurationsfil. Tilføj en faye.ru-fil til roden af ​​projektet, og sørg for, at den ser sådan ud:

require ‘faye’
bayeux = Faye::RackAdapter.new(:mount => ‘/faye’, :timeout => 25)
bayeux.listen(9292)

Denne fil fortæller simpelthen Rackup, hvordan du starter Faye-serveren. Prøv det for at sikre, at det fungerer korrekt. Kør dette i din terminal:

rackup faye.ru -E produktion -s tynde

Afslutter

Nu er vi klar til at gå. Applikationen kan køres ved at starte Rails-serveren. Koden, der er knyttet til denne blog, kan findes her.