WordPress, Firebase ve Angularjs ile Doğrudan Kullanıcı İzleyicileri Oluşturma

Sitenizdeki kullanıcılarla doğrudan etkileşim, ziyaretçileriniz için ilginç olan yeni işlevler eklemenin iyi bir yoludur. Ancak, gerçekten yaşamak için sunucu doğrudan tarayıcı veya istemci ile ilişkili olmalıdır. Neyse ki, doğrudan bağlantıya izin veren bir protokol olan WebSockets kullanarak bunu yapmanın yeni bir yolu var. Bu anlık etkileşimi, sitenize kaç ziyaretçinin baktığını ve hangi sayfada olduklarını göstermek gibi idari amaçlarla kullanabilirsiniz. Geleneksel olarak, istemciler veri alarak veya oraya iterek sunucu ile iletişim kurar, ancak sunucu istemciler olmadan itebilirse? Bir örnek doğrudan sohbettir. Yazdınız ve diğer uçtaki kullanıcı, sayfayı yenilemeden ne yazdığınızı otomatik olarak görürsünüz. Blogumda Firebase ve Rest API WordPress kullanarak nasıl canlı sohbet edeceğiniz hakkında bir makale yazdım.
WebSockets’i kullandığınızda, veriler şu anda sitenizdeki istemcilerle ilgili olmalıdır. Başka bir metin sohbet eklentisi oluşturmak yerine, web siteniz için doğrudan bir izleyici yapacağız. Bu, sitenizde gezinirken kullanıcıları otomatik olarak bulmak için WebSocket teknolojisini kullanacaktır. Son ürün böyle görünecek:

Kullanıcı sitenizi girdiğinde, çıktığında ve hareket ettiğinde, bu tablo sayfayı yenilemek veya AJAX çağrıları yapmak zorunda kalmadan otomatik olarak güncellenir. Mevcut teknolojiyi kullanarak, karmaşık bir kod kullanmadan bunu yapabilen birkaç teknoloji vardır. İki örneğe bakalım:
Sayfa Yenileme – Normal PHP şablonu sunucudaki tüm HTML’yi çözer ve tarayıcıya döndürür. Mevcut sitelerdeki tüm geçerli kullanıcı verilerine sahipsek, tabloyu görebileceksiniz, ancak bir güncelleme almak için sayfayı yenilemeniz gerekir. WordPress’te içeriği düzenlerken yenileme basana kadar web sitenizin ön ucundaki değişiklikleri nasıl görmeyeceğinize benzer. Belirli bir zaman aralığında ferahlığı zorlamak için JavaScript’i kullanabilirsiniz, ancak müdahale edecektir. AJAX – Üstesinden gelmenin başka bir yolu Ajax’ı kullanmaktır. Sunucudan veri almak için aralığı ayarlayın ve tabloyu yenileyin. Peki ya hiçbir şey değişmediyse? Neden Ajax isteğiyle uğraşmanız gerekiyor? Verileri yalnızca veriler değiştiğinde güncelleyebilirseniz ne olur? Firebase ve AngularJS’nin bağlanmasıyla yapmak kolaydır. Firebase’deki veri değiştiğinde, kullanıcı bilgileri olan tablolar otomatik olarak tek başına güncellenecektir. Adım 1: Bir Firebase Firebase Hesabı hazırlayın Gerçek zamanlı bir çevrimiçi veritabanı-temel olarak kolayca erişebileceğiniz ve güncelleyebileceğiniz bir JSON nesnesidir. Çeşitli kullanımları var, ancak kullanıcıların birbirleriyle doğrudan dahil olabilmesi için codecavalry için kullanıyorum. Firebase kullanımı kolaydır – sadece ücretsiz bir hesap oluşturun ve bir uygulama oluşturun. Royliveconcent adlı bir uygulama oluşturacağım.
Uygulama URL’sini daha sonra kullanmak için kopyalamanız gerekir, benimki: http://roylivecontent.firebaseio.com. Uygulama düzenlendikten sonra, açıp verileri görebilmeniz gerekir. Ekranınız şöyle görünecek:

Şimdi Firebase uygulamanız kullanıma hazır.

Adım 2: Temel Eklentinizi Oluşturun Başlangıçtan başlamak veya başlamak için bir BAINERPLATE kullanırsanız, bir eklenti yaparken, ihtiyacınız olan bazı şeyler vardır: HTML Dosyaları saklayacağınız şablon dizini vardır
Enqueue betiği
Genel senaryo – ‘wp_enqueue_script’
Edebiyat Firebase JS
CDN aracılığıyla kullanılabilir – //cdn.firebase.com/js/client/2.0.4/firebase.js
Genel eklenti JS dosyası (varlıklar/public/js/wp_livretracker.js)
Yönetici komut dosyası – ‘admin_enqueue_scripts’
köşe
Firebase
açısal ateş
JS Eklenti Yönetici Dosyası (Varlıklar/Yönetici/JS/WP_LIVETRACKER.JS)
Adım 3 Yönetici Menü Sayfası Önce yönetici tarafını yapmayı tercih ederim – en azından menü sayfasını ayarlayın ve ihtiyacınız olan verileri daha sonra kaydedebilir.Menü sayfası veya alt menü sayfası, uygulamanız için Firebase URL’sini ve doğrudan kullanıcı tablolarını kaydedebileceğimiz ve düzenleyebileceğimiz bir form olacaktır.
Masayı geçelim ve sadece formu yapalım.İlk olarak, bir alt menü sayfası (veya üst düzey menü öğelerini tercih ediyorsanız menü sayfası) oluşturmalısınız.Add_submenu_page () () işlevini kullanarak ve ebeveyn için ‘index.php’ kullanarak “pano” ana menü altında “pano” ana menü altında oluşturmayı seçtim.”Canlı parça kullanıcısı” sayfa başlığımı verdim.Dönüş fonksiyonunda çok basit bir form var [php] gema ‘”;echo ”;echo ”;Echo ”;echo ‘ url firebase uygulaması echo ‘ ‘;yankılar ‘‘;echo ‘

‘;echo ”;echo ”;echo ”; [/php]
Form biçiminin admin_url işlevini kullanarak doğrudan aynı yönetici sayfasına nasıl atıfta bulunduğunu unutmayın. Bu, kullanıcıları Gönder’e bastıklarında bu sayfaya dönmeye zorlar. Ayrıca yöntemi ‘post’ olarak ayarladığını da doğruladım. Form verilerinin ikinci kısmı kaydetmek ve güncellemektir. İşlevselliği aynı iade çağrısı işlevine yerleştirmek de dahil olmak üzere bunu yapmanın birkaç farklı yolunu gördüm. Admin_init eylemlerini kullanmayı ve veri yayınını kontrol eden çağrıları geri almayı tercih ederim. Adım 4: Yerel Veri Nesneleri-Admin Yönetici için bulmacanın son bölümü yerelleştirilmiş bir veri nesnesi oluşturmaktır. Yerelleştirilen nesneler, JavaScript dosyamıza veri girilmesine yardımcı olacaktır. Yönetici komut dosyasında, wp_localale_script kullanılarak yerelleştirilen veri nesneleri için geri çağrı enqueue. Varsayılan olarak, dizinin bir eklenti URL yolu (enqueueeing betiğine yardımcı olmak için sabitlerle tanımladığım) ve depolanmak üzere yaptığınız Firebase uygulama URL’sini içerecek “admin_template” içermesi gerekir. Yöneticiyi yenileyerek ve konsolunuzdan yeni bir küresel nesneniz olup olmadığını görebilirsiniz.
Adım 5: Yerel Veri Nesneleri – Genel Tamam, şimdi kamu veya müşteri üzerinde çalışacağız. Diğer yerel nesnelerle başlayacağız, ancak bu sefer WP_ENQUEUE_SCRIPTS Public’i geri çağrısında, böylece siteyi gördüğümüzde bu küresel nesneye erişebiliriz.
Genel komut dosyası işlevinizin enquee’sinde, aşağıdaki verilere sahip olacak yerel bir nesne oluşturun:
Firebase URL’si (site seçeneği)

Kullanıcı Kimliği, Kullanıcı Adı
Yazı
Koşullu Kullanıcılar Kullanıcı girerse, geçerli kullanıcıyı geri yüklemek için wp_get_current_user kullanabilirsiniz. Evet ise, yerel nesneme kimlik ve kullanıcı adına (user_login) devam ediyorum. Ya da, kullanıcılar olup olmadığı konusunda hızlı bir şekilde yargılayabilmem için kullanıcıyı false olarak ayarlayabilirim, bu daha sonra yararlı olacaktır. Coğrafi konumlar ekleyerek kullanıcı verilerine ve güncel konumlara ek olarak, bir ziyaretçinin coğrafi konumuna sahip olmak da önemlidir. Bu tür verileri kullanıcının IP adresine göre almak için kullanabileceğiniz birçok ücretsiz yangın ve halka sahiptir. Http://www.telize.com/geeop, devam eden IP kullanmayı seçtim ve JSON nesnesini coğrafi konumla geri yüklemeli. Bunu yerel nesnemize girmek için wp_safe_remote_get yapıyoruz. Yangın JSON’u döndürdüğü için, JSON nesnelerini PHP dizisine dönüştürecek olan JSON_DECODE adlı PHP işlevine gövde tepkisini sarmamız gerekir. Adım 6 JavaScript genel tarafı – Firebase Adım 4 ve 5’e veri gönder, bazen önce yönetici arayüzünü oluşturmak ve verileri (yerelleştirilen nesneye verdiğim) kullanmak istiyorum ve bazen her şeyi çalıştırmak istiyorum Önce halka açık, o zaman yöneticinin tüm kodlarını yapın. Şimdilik bu yöntemle ilerleyeceğim.
Firebase kullanımının ilk kısmı, Firebase’de depolanan JSON nesnelerine veri göndermektir. Angularjs, Firebase’e sadece kendi JavaScript kütüphanesine veri göndermek için gerekli değildir. JavaScript’te yaptığımız ilk şey, Firebase URL’si için yerel değişkenin orada olup olmadığını kontrol etmektir, eğer değilse geri döneriz çünkü devam etmenin bir anlamı yoktur. Firebase URL’leri koleksiyonu varsa, verileri ayarlamaya ve göndermeye devam ediyoruz. Kullanıcı Varsayılanını Ayarlama Geri dönüş için, yerel nesnemizin bize yardımcı olacağı yer burasıdır. İlk olarak, Firebase’ye gönderilecek bazı varsayılanlar yapmamız gerekiyor. User_id’i 1.000 ile 1.500 arasında rastgele bir sayıya ve user_username 0’a gönderdim. Kullanıcı verilerini ayarlandıktan sonra ayarlayın, gerçek verileri girmeye başlarız. İlk olarak, uygun verilere user_id ve user_username kümeleri varsa, yerel nesnelerimize dayalı kullanıcılar olup olmadığını kontrol edin. İkincisi, varsa coğrafi konumu ayarlayacağız veya yoksa yanlış olarak ayarlayacağız. Son olarak, geçerli konumu ve posta kimliğini ayarlayacağız. Firebase’ye veri göndermek artık tüm bunları ele almak için oluşturulmuş birkaç olağanüstü işlevselliğe sahip olan Firebase mevcut. İlk olarak, kullanıcılar çevrimiçi olduğunda nesne ayarlarını işleyelim. [Js] var userRef = yeni Firebase (Livetracker_data.firebase_url + ‘/varlık/’ + user_id); Penggunaref.set ({çevrimiçi: true, user: boolean (livetracker_data.user), user_id: parseInt (user_name: kullanıcı adları, görme: current_loc, tarayıcı: $ .browser, geo_location: location_pert,});
[/Js] Yukarıdaki kodda, kullanıcı verilerini, temelde çevrimiçi olduktan sonra nesnesi ayarlıyoruz. Çevrimiçi olarak ayarladım, geçebilirsiniz, çünkü verilerin orada olup olmadığını, kullanıcıların çevrimiçi olduğunu varsaymak güvenlidir, ancak bu her zaman iyi bir incelemedir. Kullanıcı bağlantıyı sitenizden bağlantıyı kestiğinde veri silmek istemiyorsanız, belirli kullanıcının son sayfasını ve konumunu görmeniz için bunu true’dan false olarak da değiştirebilirsiniz. Dikkat edilmesi gereken başka bir şey, Firebase URL’sini / varlık / ile kullanmamızdır, böylece çevrimiçi kullanıcı nesneleri dizisi, isteyebileceğiniz diğer verilerden ayrı bir yerde saklanır. Firebase kullanmaya ilk başladığımda, her nesne dizisi için ayrı bir uygulama yaptım, ancak her şeyi tek bir uygulamada alabileceğinizi ve her dizinin benzersiz bir URL olacağını fark ettim. Kullanıcı sitenizi kapatarak veya gezinerek bağlantıyı keserse ne olur? Kullanıcının bağlantı sonlandırılmasını işlemek için kod da oldukça kolaydır [JS] var amonline = yeni Firebase (livetracker_data.firebase_url + ‘/.info/connected’); amonline.on (‘değer’, function (snapshot) {if (snapshot.val ()) {userref.ondisconnect (). Kalov ();}}); [/JS] Kod Kullanıcıları verilerinizden silin. Daha önce de belirtildiği gibi, sitenizdeki son varlıkları hakkında bazı verileriniz olması için nesneleri değiştirebilirsiniz. Bunun bir başka örneği “son kalıcı” zaman damgasını depolayabilir veya Firebase’deki kullanıcı verilerini diğer eylemlerde değiştirirseniz, “son kez aktif” görebilirsiniz.
.Bunu yalnızca giren kullanıcılar için yapmanızı öneririm, çünkü anonim bir kişi (veya daha önce gelen ziyaretçi) varsayılan user_id jeneratörümüzden iki benzersiz kimlik alabilir.Firebase artık kullanıcı her bağlandığında veri alacaktır.Test etmek için Firebase hesabınızı girin ve oluşturduğunuz uygulamayı görün.Sitenizdeki herhangi bir sayfayı ziyaret edin ve yüklendikten hemen sonra, kullanıcı verilerinize sahip olan kök seviyesinin “varlığı” nda yeni veriler göreceksiniz.
Adım 7 AngularJS yönleri Angularjs yönü en güçlü özelliklerinden biridir. WordPress açısından widget’lara benzerler. Kendi kapsamlarını, kendi denetleyicilerini ve kendi şablonlarını içerebilecek işlevselliğin bir parçasıdır. Talimatlar, belirli fonksiyonel yönleri modüle etmek için daha büyük uygulamalarda tekrar tekrar kullanılabilir. WordPress API dinlenme daha fazla geliştiricinin ellerine girdiğinde, bu yön, ateşi her yere yerleştirilebilen bağımsız bir widget olarak kullanan işlevselliğin bir parçasını oluşturmak için yararlı olacaktır. Varlıkları/js/admin/admin/wp_live_tracker.js’yi açalım ve bir açı modülü yaparak başlayalım, wp_livetracker’ım başlığını veriyorum, AngularFire ayrıca bize “Firebase” enjekte edilebilecek AngularJS değişkenine erişim sağlar, bu yüzden ihtiyacımız var Kullanabilmek için uygulamamıza girin. Uygulamaları veya modülleri tanımladıktan hemen sonra, Livetracker adlı bir direktif yapacağız. Angularjs’in yönlendirme şekli oldukça iyi, yönü sınıfa, HTML özniteliklerine, öğelere veya yukarıdakilerin hepsine ayarlayabiliriz. Bizim durumumuzda şunları sınırlayacağız: ‘E’, element anlamına geliyor. Kodunuzu ne zaman kullandığınızda, bu yeni yönden çıktı almalısınız. [JS] Angular.Module (‘WP_LIVRETRACKER’, [‘Firebase’]). Direct (‘Livetracker’, Function () {Limit: ‘E’, Kapsam: {}, Denetleyici: Fonksiyon ($ kapsam, $ Scope , $ scope, $ scope, $ scope,) {var ref = yeni firebase (livetrac_data.firebase_url + ‘/varlık’); $ scope.users_online = $ firebaseObject (ref);}, templateurl: livetracker_data.admin_template + ‘

[/Js] yönünün kendi denetleyicisi vardır, burada AngularFire tarafından tanımlanan $ Scope ve $ FirebaseObject enjekte ettiğimiz. URL’mize devam ederek yeni bir Firebase nesnesi yaptık. Dahil etmeyi /katılımını unutmayın, çünkü çevrimiçi kullanıcı verilerimizin ayarlandığı yer burasıdır. $ Scope.online_user’ı $ FirebaseObject (Ref) olarak ayarlayın ve Firebase ile AngularJS uygulamanız arasında anında bir bağlantı vardır. Bu gerçekten büyülü bir kısımdır, çünkü kullanıcı bağlandığında, taşındığında ve bağlantısı kesildiğinde Firebase verileri değiştiğinde, $ scope.online_user değişikliği yansıtacak şekilde değişecektir. Yönün son kısmı şablon, html dosyasını ayarlamaktır. Benimkini eklentideki şablon dizininde tutuyorum. URL almak için admin_template’den yerel nesne özelliğini kullanıyoruz. Adım 8 Angularjs Şablonu Bu, site yönetici alanına girdiğinden, iyi eşleştiğinden emin olmak istiyoruz. Hayatı kolaylaştırmak için bir masa kullanacağım. [Php] Kullanıcı adı & amp; İd Geçerli sayfa geo (durum) konumu Tarayıcı bilgileri Kullanıcı> Kullanıcı Bilinmiyor {{user.user_username}} ({{user.user_id}}) }}

Tıpkı döngü forEach php gibi. Bu zaten kapsamın ne olduğunu biliyor, bu yüzden tek yapmamız gereken çevrimiçi_user döndürmek. Yinelenmesi durumunda parkuru $ dizin ile ayarladım. Ayrıca, verilere dayalı olarak sabitlenen şeyi değiştirecek olan NG-IF’yi de kullanıyoruz. Adım 9 Yönetici Ekranı – ŞİMDİ her şeyi birleştirin, Firebase URL’sini kaydetmek için bir formumuz var ve yeni yaptığımız AngularJS yönergesine çok kolay gireceğim yönetici ekranıma geri döneceğim. Angularjs, yönün tanımlandığı uygulamada veya modülde bilir, böylece bir NG-APP’si olan bir div ile sarmalıyız. Firebase_url için bir onay işareti veriyorum çünkü bağlı olmayan bir Firebase varsa tüm bu lüks açısal yasemin çalıştırmanın bir anlamı yok. Voila, bitmiş ürünümüz çalışmalıdır: Github GitHub’da çalışmayı bitiren eklentimi bulabilirsiniz: https://github.com/royboy789/live-visitor-tracker.

Firebase ve Angularjs ile Doğrudan Kullanıcı İzleyicileri Oluşturma WordPress