Strapi용 실시간 커넥터

저는 많은 프로젝트에서 Strapi를 사용해 왔으며 사용하는 것을 좋아합니다. 그래서, Strapi 개발자가 React를 사용하여 멋진 앱을 더 쉽게 만들 수 있도록 Strapi에 추가 레이어를 추가할 수 있는 Fluxum, 즉 Realtime을 만들었습니다.

Floxum은 백그라운드에서 Socket.IO를 사용하여 Strapi 서버와 통신하고 클라이언트 측에서는 사용자가 Strapi 서비스를 실행할 수 있습니다. 다음은 예입니다.

floxum.services('todo', 'find', { _limit: 1 }).then((data) => {
   console.log(data)
})

이것은 Strapi 서버에서 find 메서드를 실행하고 Promise를 사용하여 출력을 반환하는 비동기 함수입니다. 이는 마치 React 애플리케이션에서 직접 Strapi의 서버 기능을 실행하는 것과 같습니다.

이렇게 하면 axios 또는 fetch 를 사용하는 것처럼 HTTP 요청 없이도 Strapi와 연결된 React 앱을 더 쉽게 구축할 수 있습니다.

설치

The installation will also work for the projects which are already using Strapi.

1 단계

React 프로젝트 내부에 다음 모듈을 설치합니다.

yarn add @floxum/react

2 단계

Strapi 애플리케이션 내부에 다음 모듈을 설치합니다.

yarn add @floxum/core

3단계

src/providers 라는 이름의 floxum.js (또는 원하는 곳)에 Floxum을 설정하기 위해 React 애플리케이션 내부에 새 파일을 만들고 다음 코드를 붙여넣습니다.

import Floxum from '@floxum/react'

const floxum = Floxum('http://localhost:1337')

export default floxum

호스트 문자열을 귀하의 Strapi 호스트로 변경하십시오.

4단계

Strapi 애플리케이션 내에서 config/functions/bootstrap.js 로 이동하여 Floxum을 가져온 다음 strapi 매개변수를 사용하여 내보내기 모듈 내에서 호출합니다.

"use strict";
const folxum = require("@floxum/core");

module.exports = async () => {
  folxum(strapi);
};

이제 가도 됩니다!

5단계

Rect 프로젝트 내에서(모든 구성 요소에서) Floxum을 가져오고 다음과 같이 ping 함수를 호출하여 테스트합니다.

useEffect(() => {
  floxum.ping().then(() => {
    console.log('working')
  })
}, []);