Actioncable, Rails 5 ile gelmiş, WebSocket kullanımını sağlayan/kolaylaştıran bir kütüphane. Oldukça fazla güzellikleri olmasına rağmen onları burada yazmayacağız, yazının konusu nasıl kullanırız. Örneklerle açıklayalım.
Halihazırda rails 5 ve üzeri bir uygulamaya sahip olduğunuzu varsayarak öncelikle redis gemini Gemfile’a eklemenizi öneriyorum. Zira ben varsayılan gelen ayarlarda haberleşme sıkıntı yaşadım.
|
1 |
gem 'redis', "~> 3.3" |
Bu satırı dahil ettikten sonra bundle install diyelim. Burada 3.3 versiyonu spesifik seçmemizin sebebi 4 versiyonu ile Rails 5.1.2 arasında sıkıntılar olduğu. Yine bi’ deneyin, siz bu yazıyı okurken o sorunlar çözülmüş olabilir 🙂
Şimdi de cable.yml yapılandıralım. Sizdeki ayarlarda development adapter:async olacaktır. Aşağıdaki şekilde güncelleyin
|
1 2 3 |
development: adapter: redis url: redis://localhost:6379/1 |
Daha sonra routes.rb dosyasına actioncable server’ı mount edelim.
|
1 |
mount ActionCable.server => '/cable' |
Bu adımdan sonra assets/javascripts/application.js dosyasında aşağıdaki satırın olduğundan emin olunuz.
|
1 |
//= require cable |
ve rails projesinin oluşturulması ile birlikte oluşturulan assets/javascripts/cable.js içeriği şu şekilde olmalı.
|
1 2 3 4 5 6 7 8 9 10 |
//= require action_cable //= require_self //= require_tree ./channels (function() { this.App || (this.App = {}); App.cable = ActionCable.createConsumer(); }).call(this); |
Artık rails s ile serveri çalıştırıp localhost:3000 adresine tarayıcıdan girdiğinizde tarayıcı console’una App.cable yazınca aşağıdaki çıktıyı alıyorsanız her şey sorunsuz bir şekilde ilerliyor demektir.
Şimdi bir duyuru kanalı oluşturalım: rails g channel announcement ile birlikte şu iki dosya oluşturulacak:
- app/channels/announcement_channel.rb
- app/assets/javascripts/channels/announcement.js
ilk dosyamızı aşağıdaki gibi güncelleyelim.
|
1 2 3 4 5 6 7 8 9 |
class AnnouncementChannel < ApplicationCable::Channel def subscribed stream_from "announcement_channel" end def unsubscribed # Any cleanup needed when channel is unsubscribed end end |
Şimdi ikinci dosyamızı inceleyecek olursak;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
App.article = App.cable.subscriptions.create("AnnouncementChannel", { connected: function() { // Called when the subscription is ready for use on the server }, disconnected: function() { // Called when the subscription has been terminated by the server }, received: function(data) { // Called when there's incoming data on the websocket for this channel } }); |
Burada üç method var.
- connected: kanal ile ilk bağlantı oluştuğunda çalışır.
- disconnected: kanal ile bağlantı kesildiğinde çalışır.
- received: kanala bir veri geldiğinde çalışır.
Bir test yapmak için bu javascript dosyamızı aşağıdaki şekilde güncelleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
App.article = App.cable.subscriptions.create("AnnouncementChannel", { connected: function() { // Called when the subscription is ready for use on the server console.log('duyuru kanalına bağlandı') }, disconnected: function() { // Called when the subscription has been terminated by the server }, received: function(data) { // Called when there's incoming data on the websocket for this channel console.log(data); } }); |
Şimdi rails c ile rails konsolu açıp kanala bir yayın gönderelim:
|
1 |
ActionCable.server.broadcast 'announcement_channel', veri: 'test' |
Bu kodu çalıştırdıktan sonra 1 değeri return etmiş olması gerek. Tarayıcınızın console’a bakarsanız {veri: “test”} şeklinde bir çıktı göreceksiniz.
Gelelim production ayarlarına. Nginx yapılandırmasını şurada görebilirsiniz. Yapmamız gereken üç şey var.
- cable.yml production ayarlarını yapılandır.
123production:adapter: redisurl: redis://localhost:6379/1 - websocket bağlantısı için izin verilen url
1config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ] - nginx yapılandır
12345678910111213server {listen 80;server_name www.foo.com;root /path-to-your-app/public;passenger_enabled on;### BURAYI EKLEYİN ###location /cable {passenger_app_group_name ornek_uygulama_action_cable;passenger_force_max_concurrent_requests_per_process 0;}### BURAYA KADAR ###}
Evet bu kadar. Artık kolayca anlık mesajlaşma uygulaması, site içi bildirim, realtime dashboard gibi şeyler yapabilirsiniz.
Bir cevap yazın