Redux Bölüm 1 Kullanarak React’te Kullanıcı İnternet Bağlantısı ile WebSocket’i Senkronize Etme – JSManifest

Redux Bölüm 1 Kullanarak React'te Kullanıcı İnternet Bağlantısı ile WebSocket'i Senkronize Etme – JSManifest

Ben uygulamadan sorumluyken ağ soketi Son zamanlarda bir başlangıç ​​​​şirketinde bir arka uç değişikliği nedeniyle işlevsellik, kolay bir macera değildi. Sadece web soketlerinde yeni değildim, aynı zamanda bir google araması, tepki uygulamalarında kararlı bir websocket mimarisine neredeyse hiç çözüm sağlamadı. Bu durumda bir öğreticiyi nerede bulabilirim?

Şey… sonunda ihtiyaçlarıma uygun bir öğretici kullanamadım. Herhangi bir iyi bilgi kaynağı sağlayan makaleler genellikle eskiydi (2017 ve daha eski) ve şu anda kötü uygulamalar olarak kabul edilen sözdizimini kullanıyordu. JavaScript, teknolojinin değiştiği, hızla büyüyen bir topluluktur hızlı. 2018’den daha eski eğitimlere güvenmiyordum. Bu benim için daha da kötü oldu.

çok şans eseri buldum tepki-websocket ve kaynak koduna iyi bir göz attı. Bana nereden başlayacağım konusunda bir fikir verdi.

Daha önce uygulamaya websockets uygulamamın daha önce kullanıcıların internet bağlantısıyla senkronize edilmediğini bilmiyordum ve bu yüzden patronum düzeltmemi istedi. Reaksiyon-websocket’e baktığımda, websocket istemcilerinin somutlaştırılabileceğini ve websocket bağlantısını UI güncellemeleriyle senkronize tutmak için iyi bir başlangıç ​​olan bir tepki bileşeni örneğine eklenebileceğini fark etmeye başladım. Bir özelliğin, endüstriye gönderilmek üzere bir üretim uygulamasına doğrudan uygulanmasının ne kadar korkutucu olduğunu görmek, korkutucu düşünce. Böylece, bu yaklaşımın olası tüm olumsuz taraflarını düşünmeye başladım ve büyük bir problemin farkına vardım: Ya bileşen sökülürse? Web yuvası kapanır onun bağlantısı. Serseri. Bu özelliği uyguladığım uygulama ağır bağımlı açık bir websocket bağlantısının kalıcılığı üzerine. bir kez var hiç kullanıcının ağ bağlantısındaki değişiklik işareti, en iyisi kullanıcıya haber vermem veya UX’i bir şekilde güncellemem hemen.

Websocket istemcisini başlatarak ve tarayıcıya ekleyerek oynamaya başladım. window nesne, ancak tepki kendini pencere olaylarına güncellemediği için iyi oynamadı. Kullanıcının internetinin websocket bağlantısıyla senkronize edilmesinin tüm yerel devlet yönetimini yapmak, bir tepki bileşeninde bir kabustu. Yeniden oluşturma ve olası bellek sızıntılarında çok sayıda beklenmedik sonsuz döngü vardı.

Reaksiyonun yeni özelliğinden yararlandım, bağlam tüm alt bileşenlere küresel bir durum sağlamaya çalışmak, ancak bu harika bir fikir değildi çünkü bağlam bileşenini websocket istemcisinden gelen durum güncellemeleriyle şişiriyordu ve yeniden sarılması için tüm alt bileşenleri optimize etmek zorunda kaldım. -yalnızca gerektiğinde işleyin. Ama bu tamamen gereksiz. Daha iyi bir yaklaşım var.

redux

Durum güncellemelerini halletmek için redux’dan yararlandım. Faydaları büyüktü:

  1. Yalnızca bağlı alt bileşenlerin güncellemeler hakkında endişelenmesi gerekir
  2. Devlet ısrarcı her yerde
  3. Websocket istemci bağlantıları ile internet çevrimiçi/çevrimdışı olaylarını strateji haline getirmek daha kolaydı. Temiz sözdizimi, kodu yönetmeyi kolaylaştırdı.
  4. Öyleydi hızlı.

Tüm uygulamayı bitirip üretime geçtiğimde patronum bir daha websocket ile ilgili bir sorundan bahsetmedi. O zamandan beri bir aydan fazla oldu.

Bu makale, bölüm 1 / 2’dir. Redux kullanarak React’te WebSocket’i kullanıcıların internet bağlantısıyla senkronize hale getirme diziler. Bu, sizi bunun olduğu konusunda teşvik etmek için bir gönderi değildir. doğru yol özelliği kodlamak için, ancak sadece ne olduğunu gösterdiğim bir gönderi ben ve şirketim için çalıştı bir üretim uygulamasında. Daha sağlam bir yaklaşım veya herhangi bir endişeniz varsa, bu gönderinin altına yorum yapmaktan çekinmeyin!

Kullanacağız oluştur-tepki-uygulaması (CRA) kod uygulamasına başlayabilmemiz için bir tepki uygulamasını hızlı bir şekilde önyüklemek için

Yeni bir CRA projesi oluşturun ve ona herhangi bir ad verin. adını ben koydum ws-online-sync

npx create-react-app ws-online-sync

Dizine adım atın:

Redux ve tepki-redux’u kurun (Not: Örneklerimiz tepki-redux kullanıyor v7.1.0-alpha.5 . Bu örnekleri kullanmak için react-redux@next ile kurulum yapmalısınız yoksa hata alırsınız)

npm install --save redux react-redux@next

Bağımlılıkları kurduktan sonra, biraz daha temiz görünmesi için App.js’yi (ana index.js dosyasından içe aktarılan ve oluşturulan bileşen) temizleyebiliriz:

import React from 'react'
import './App.css'

const App = () => {
  return (
    <div>
      <h1>Making Websocket in Sync with the User's Internet Connectivity</h1>
      <hr />
    </div>
  )
}

export default App

Redux kullanacağımız için uygulamada çalışması için birkaç hızlı yapılandırma yapmamız gerekiyor.

Bu, örneklerimizin dizin yapısıdır:

Bileşenlerimizin bir Sağlayıcı den ihraç edilen tepki-redux paket. Alır mağaza bir destek olarak ve kullanıcının istemci oturumunun ömrü boyunca kullanılabilir hale getirir.

Mağaza, içe aktarılarak somutlaştırılabilir ve yapılandırılabilir oluşturMağaza redux’dan.

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import './index.css'
import App from './App'
import * as serviceWorker from './serviceWorker'
import rootReducer from './reducers'

const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
)

serviceWorker.unregister()

Geçtik rootReducer argüman olarak oluşturMağaza yöntem. İnternet ve websocket durumları için durum yapımızı içereceğinden bu zorunludur.

redüktörler/index.js

import { combineReducers } from 'redux'
import app from './appReducers'

export default combineReducers({
  app,
})

Bir dizin yapısında nasıl göründüğü aşağıda açıklanmıştır:

dizin yapısı websocket internet senkronizasyonu

Kullanıcının internet ve websocket istemci bağlantısı her değiştiğinde bize sürekli olarak bir sonraki durum ağacını döndürmek için bu rootReducer’a ihtiyacımız var.

redux redüktörler ile ilgili belgeler “düşürücülerin, mağazaya gönderilen eylemlere yanıt olarak uygulamanın durumunun nasıl değişeceğini belirlediğini” açıklayın.

Bununla birlikte, redüktörlerin güncellenmesi için şimdi mağazaya gönderilen eylemleri tanımlamamız gerekiyor.

Eylemi kullanmaya yönelik standart yaklaşım türleri sabitleri kullanıyor ve standart yolu seviyorum, bu nedenle eylemler için sabitleri şu şekilde tanımlamam gerekecek:

eylemler/index.js

export const INTERNET_ONLINE = 'INTERNET_ONLINE'
export const INTERNET_OFFLINE = 'INTERNET_OFFLINE'

Artık eylem oluşturucuları tanımlamaya geçebiliriz:

eylemler/index.js

export const INTERNET_ONLINE = 'INTERNET_ONLINE'
export const INTERNET_OFFLINE = 'INTERNET_OFFLINE'

export const internetOnline = () => ({
  type: INTERNET_ONLINE,
})

export const internetOffline = () => ({
  type: INTERNET_OFFLINE,
})

Redüktör, switch ifadelerinde kullanmak için bu sabitleri içe aktarır:

redüktörler/appReducers.js

import { INTERNET_ONLINE, INTERNET_OFFLINE } from '../actions'

const initialState = {
  internet: {
    isOnline: true,
  },
}

const appReducer = (state = initialState, action) => {
  switch (action.type) {
    case INTERNET_ONLINE:
      return { ...state, internet: { ...state.internet, isOnline: true } }
    case INTERNET_OFFLINE:
      return { ...state, internet: { ...state.internet, isOnline: false } }
    default:
      return state
  }
}

export default appReducer

Harika! Artık interneti çevrimiçi/çevrimdışı olarak redux’a bağladık ve bileşenlere geçmeye hazırız. Bu duruma ilişkin güncellemeleri bilmesi gereken bileşenler, kendisini sadece o durum dilimine bağlayacaktır.

Bir sonraki gelecek örnekler için yeni tepkiyi kullanacağız. kancalar özellik — React 16.8’e yeni bir ekleme.

bir oluşturacağız internet kullanın Gerektiğinde okumak için mümkün olduğunca çok kullanıcı arayüzü alabilmemiz için Uygulama bileşeninin bulunduğu en üstte kullanılacak olan kanca.

Oluşturmak kancalar içindeki klasör kaynak dizin oluşturun ve kullanInternet.js içindeki dosya.

senkronize olarak websocket internet javascript kancaları

Bu useInternet kancası bir online ve offline kullanarak global pencere nesnesine olay window.addEventListener.

Bu, çevrimdışı özellikli herhangi bir web uygulaması için gereklidir ve deneyimlerime göre çok uygulamanızı kullanıcının internet bağlantısıyla senkronize tutmada etkili ve kesin. Kullanıcının interneti çevrimdışı olduğunda, redux’da bir eylem göndereceğimiz yer burasıdır, böylece hiç uygulamadaki bileşen, ağ bağlantılarına göre güncellenecektir.

kancalar/useInternet.js

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { internetOnline, internetOffline } from '../actions'

const useInternet = () => {
  const dispatchAction = useDispatch()
  const isOnline = useSelector((state) => state.app.internet.isOnline)

  
  useEffect(() => {
    const handleOnline = () => {
      dispatchAction(internetOnline())
    }

    const handleOffline = () => {
      dispatchAction(internetOffline())
    }

    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)

    return function cleanup() {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [dispatchAction])

  return {
    isOnline,
  }
}

Basit ama etkili ve güçlü 🙂

bu return function cleanup() kod bloğu önerilir, böylece bileşen ayrıldığında, bellek sızıntısını önleyecektir uygulamanızda.

Bu özel kanca meli İnternet bağlantısı değişikliklerini algılamak için iyi olabilir, ancak ikinci bir useEffect kancası sağlayarak ve navigator.onLine genel pencere nesnesinden özellik. Nasıl olduğunu görmek yaygın olarak desteklenen hemen hemen tüm tarayıcılar tarafından, bir üretim uygulaması için kancayı daha sağlam, doğru ve kullanışlı tutmaya yardımcı olmak kolay bir karardı 🙂


useEffect(() => {
  if (window.navigator.onLine && !isOnline) {
    dispatchAction(internetOnline())
  } else if (!window.navigator.onLine && isOnline) {
    dispatchAction(internetOffline())
  }
}, [dispatchAction, isOnline])

Ve işte useInternet kancasının son kodu:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { internetOnline, internetOffline } from '../actions'

const useInternet = () => {
  const dispatchAction = useDispatch()
  const isOnline = useSelector((state) => state.app.internet.isOnline)

  
  useEffect(() => {
    const handleOnline = () => {
      dispatchAction(internetOnline())
    }

    const handleOffline = () => {
      dispatchAction(internetOffline())
    }

    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)

    return function cleanup() {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [dispatchAction])

  
  useEffect(() => {
    if (window.navigator.onLine && !isOnline) {
      dispatchAction(internetOnline())
    } else if (!window.navigator.onLine && isOnline) {
      dispatchAction(internetOffline())
    }
  }, [dispatchAction, isOnline])

  return {
    isOnline,
  }
}

Bunun ne kadar doğru olduğunu test etmek için bu kancayı App.js bileşeninize aktarın ve aşağıdaki gibi internet bağlantısı değişikliklerine tepki vermek için bir useEffect sağlayın:

App.js

import React, { useEffect } from 'react'
import useInternet from './hooks/useInternet'
import './App.css'

const App = () => {
  const { isOnline } = useInternet()

  useEffect(() => {
    console.log(
      `%cYou are ${isOnline ? 'online' : 'offline'}.`,
      `color:${isOnline ? 'green' : 'red'}`,
    )
  }, [isOnline])

  return (
    <div>
      <h1>Making Websocket in Sync with the User's Internet Connectivity</h1>
      <hr />
    </div>
  )
}

export default App

Şimdi uygulamayı çalıştırın, geliştirici araçlarında konsolu açın ve internet bağlantınızı kesin. Konsolunuzu tekrar açtıktan sonra şunu göstermelidir:

senkronizasyon tepki uygulamasında konsol mesajları websocket javascript

Özet – Birinci Bölüm

Ve böylece birinci bölümün sonu geliyor! Bir redux tepki uygulaması yapılandırdık ve durum yapımızı şu şekilde tanımladık: internet güncellemeleri çağıran eylemlerle birlikte durum güncellemeleri. Ayrıca bir oluşturduk useInternet olay işleyicilerini kaydetmek ve uygulamanın buna göre durum güncellemeleri yapmak için eylemler başlatmasına izin vermek için kanca.

İkinci bölümde, WebSocket işlevselliğini uygulamaya uygulayacağız. Kullanıcının internet bağlantısında bir değişiklik olduğunda, websocket’in senkronize kalmasını ve buna göre tepki vermesini sağlayacağız. WebSocket istemcisinin kendisini canlandırmasını ve kullanıcının interneti çevrimdışı olduğunda uygulamanın önceki durumunu “hatırlamasını” sağlayacağız. Ayrıca web soket istemcisinin pes etmeden önce 3 kez tekrar bağlanmayı deneyeceğinden emin olacağız.

2. Bölüm için takipte kalın!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.