Creu Cymwysiadau Rails gyda Action Cable

Mae Action Cable yn un o'r nodweddion mwyaf cyffrous yn Ruby on Rails, gan ei fod yn caniatáu i ddatblygwyr greu cymwysiadau gwe real-time yn hawdd. Mae'n cynnig ffordd syml o integreiddio WebSockets i mewn i'ch cymwysiadau Rails, gan ganiatáu i chi gyfathrebu rhwng y cleient a'r gweinydd yn gyflym ac yn effeithlon. Yn yr erthygl hon, byddwn yn archwilio sut i greu cymwysiadau Rails gyda Action Cable, gan gynnwys enghreifftiau o god a chamau gweithredu.

Beth yw Action Cable?

Action Cable yw'r fframwaith WebSocket a gynhelir gan Ruby on Rails. Mae'n caniatáu i chi greu cysylltiadau real-time rhwng y cleient a'r gweinydd, gan wneud yn bosibl i'r ddau gyfathrebu yn gyflym heb orfod adnewyddu'r dudalen. Mae hyn yn agor y drws i lawer o gymwysiadau, megis negeseuon, gêmau, a phlatfformau cymdeithasol.

Prif Nodweddion Action Cable

Cyfathrebu Real-Time: Mae Action Cable yn caniatáu i chi dderbyn negeseuon yn real-time, gan wneud y profiad defnyddiwr yn fwy rhyngweithiol.
Integreiddio â Rails: Mae'n hawdd ei integreiddio â chymwysiadau Rails presennol, gan ddefnyddio'r strwythur a'r rheolau a sefydlwyd gan Rails.
Canllawiau Diogelwch: Mae Action Cable yn cynnig dulliau diogelwch i sicrhau bod y negeseuon yn cael eu hanfon yn ddiogel.
Gweithrediadau Asynchronous: Mae'n caniatáu gweithrediadau asyncronus, sy'n golygu y gall y cleient a'r gweinydd weithio ar yr un pryd heb aros i'r llall.

Sut i Ddefnyddio Action Cable

Mae defnyddio Action Cable yn Ruby on Rails yn syml. Dyma'r camau sylfaenol i'w dilyn:

Cam 1: Creu Prosiect Rails

Yn gyntaf, bydd angen i chi greu prosiect Rails newydd. Gallwch wneud hyn trwy ddefnyddio'r gorchymyn canlynol:

rails new my_app --skip-action-mailer --skip-active-record

Mae'r opsiynau "skip-action-mailer" a "skip-active-record" yn sicrhau nad yw'r prosiect yn cynnwys unrhyw gymwysiadau nad ydynt yn angenrheidiol ar gyfer Action Cable.

Cam 2: Ychwanegu Action Cable

Mae Action Cable wedi'i gynnwys yn y fframwaith Rails, felly ni fydd angen i chi ei ychwanegu'n benodol. Fodd bynnag, bydd angen i chi greu ffeiliau a ffolderi penodol ar gyfer Action Cable.

mkdir app/channels

Yna, gallwch greu ffeil newydd ar gyfer eich sianel:

touch app/channels/chat_channel.rb

Cam 3: Creu Sianel

Mae angen i chi ddiffinio eich sianel yn y ffeil "chat_channel.rb". Dyma enghraifft o sut i wneud hynny:

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel"
  end

  def unsubscribed
    # Tynnu'r defnyddiwr o'r sianel
  end

  def send_message(data)
    ActionCable.server.broadcast("chat_channel", message: data['message'])
  end
end

Yn y cod uchod, rydym yn creu sianel o'r enw "ChatChannel". Mae'r dull "subscribed" yn dechrau llif o negeseuon o'r sianel, tra bod "send_message" yn anfon negeseuon i'r sianel.

Cam 4: Creu Ffeiliau JavaScript

Mae angen i chi hefyd greu ffeil JavaScript i dderbyn negeseuon o'r sianel. Gallwch wneud hyn trwy greu ffeil o'r enw "chat_channel.js" yn y ffolder "app/javascript/channels":

import consumer from "./consumer"

consumer.subscriptions.create("ChatChannel", {
  connected() {
    // Mae'r defnyddiwr wedi cysylltu â'r sianel
  },

  disconnected() {
    // Mae'r defnyddiwr wedi dadansoddi
  },

  received(data) {
    // Derbyn negeseuon
    console.log(data.message);
  },

  send_message(message) {
    this.perform('send_message', { message: message });
  }
});

Mae'r cod uchod yn creu cysylltiad â'r sianel "ChatChannel" a'n galluogi i dderbyn negeseuon. Mae'r dull "send_message" yn anfon negeseuon i'r sianel.

Cam 5: Creu Ffurflen i Anfon Negeseuon

Mae angen i chi greu ffurflen ar gyfer y defnyddiwr i anfon negeseuon. Gallwch wneud hyn yn eich ffeil "app/views/chat/index.html.erb":

<div id="chat">
  <%= form_with url: '#', local: true, id: 'message_form' do |form| %>
    <%= form.text_field :message, id: 'message_input' %>
    <%= form.submit 'Anfon' %>
  <% end %>
</div>

Mae'r ffurflen hon yn caniatáu i'r defnyddiwr deipio negeseuon a'u hanfon.

Cam 6: Ychwanegu JavaScript i Dderbyn Negeseuon

Mae angen i chi ychwanegu JavaScript i dderbyn negeseuon pan fydd y defnyddiwr yn anfon un. Gallwch wneud hyn yn eich ffeil "app/javascript/packs/application.js":

document.addEventListener('DOMContentLoaded', () => {
  const messageForm = document.getElementById('message_form');
  const messageInput = document.getElementById('message_input');

  messageForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const message = messageInput.value;
    consumer.subscriptions.subscriptions[0].send_message(message);
    messageInput.value = '';
  });
});

Mae'r cod uchod yn sicrhau bod pan fydd y defnyddiwr yn anfon negeseuon, byddant yn cael eu hanfon trwy Action Cable.

Diogelwch gyda Action Cable

Mae diogelwch yn bwysig pan fyddwch yn defnyddio Action Cable. Mae angen i chi sicrhau bod y negeseuon yn cael eu hanfon yn ddiogel. Gallwch ddefnyddio dulliau fel awdurdodi a dilysu i sicrhau bod y defnyddwyr yn cael eu rheoli'n iawn.

Defnyddio Awdurdodi

Gallwch ddefnyddio awdurdodi i sicrhau bod y defnyddwyr yn cael eu gwirio cyn iddynt gael mynediad i'r sianel. Gallwch wneud hyn trwy ychwanegu'r dull "subscribed" yn eich sianel:

def subscribed
  if current_user
    stream_from "chat_channel"
  else
    reject
  end
end

Mae'r cod uchod yn sicrhau bod dim ond defnyddwyr sydd wedi'u cofrestru yn gallu cysylltu â'r sianel.

Casgliad

Mae Action Cable yn cynnig dull pwerus a hawdd i greu cymwysiadau gwe real-time gyda Ruby on Rails. Trwy ddilyn y camau a ddisgrifiwyd yn yr erthygl hon, gallwch greu sianel sy'n caniatáu i ddefnyddwyr gyfathrebu yn real-time. Mae'n bwysig hefyd ystyried diogelwch wrth ddefnyddio Action Cable, gan sicrhau bod eich cymwysiadau yn ddiogel ac yn cael eu rheoli'n iawn.

Gyda Action Cable, gallwch greu cymwysiadau gwe sy'n fwy rhyngweithiol a deniadol, gan wella profiad y defnyddiwr. Peidiwch ag oedi i archwilio'r posibiliadau a gynhelir gan Action Cable yn eich prosiectau Rails!