Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahgsql/juncture-bridge
https://github.com/ahgsql/juncture-bridge
Last synced: about 23 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/ahgsql/juncture-bridge
- Owner: ahgsql
- License: mit
- Created: 2024-08-20T21:47:57.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T21:53:35.000Z (3 months ago)
- Last Synced: 2024-11-09T21:44:26.712Z (10 days ago)
- Language: TypeScript
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-tr.md
- License: LICENSE
Awesome Lists containing this project
README
# Juncture Bridge
Juncture Bridge, React önyüzü ile Node.js arka uç uygulamaları arasındaki iletişimi kolaylaştıran bir TypeScript modülüdür. Node.js uygulamalarına grafiksel kullanıcı arayüzleri sağlamak için juncture-server kütüphanesi ile birlikte çalışır.
## Özellikler
- Socket.IO kullanarak gerçek zamanlı iletişim
- TypeScript desteği
- Hem JavaScript hem de TypeScript projelerinde kullanılabilir
- Hem import hem de require sözdizimini destekler
- React ve juncture-server ile sorunsuz entegrasyon
## Kurulum
```bash
npm install juncture-bridge
```
Sunucu tarafı entegrasyonu için, ayrıca juncture-server'ı da yükleyin:
```bash
npm install juncture-server
```
## Temel Kullanım
### Önyüz (React)
Öncelikle, bir bridge örneği oluşturun:
```javascript
// utils/bridge.js
import ReactBridge from "juncture-bridge";
const bridge = new ReactBridge("http://localhost:3000");
export default bridge;
```
Ardından, bridge'i React bileşenlerinizde kullanın:
```jsx
import React, { useState, useEffect } from 'react';
import bridge from "../utils/bridge";
function App() {
const [message, setMessage] = useState('');
const [count, setCount] = useState(0);
const handleGreet = () => {
bridge.execute("greet", { name: "World" })
.then(setMessage)
.catch(console.error);
};
const handleCount = () => {
bridge.execute("count", { to: 5 })
.then(console.log)
.catch(console.error);
};
useEffect(() => {
bridge.on("countUpdate", (data) => {
setCount(data);
});
bridge.on("stateUpdate", (newState) => {
setMessage(newState.message);
setCount(newState.count);
});
return () => {
bridge.off("countUpdate");
bridge.off("stateUpdate");
};
}, []);
return (
Selamla
{message}
Saymaya Başla
Mevcut sayı: {count}
);
}
export default App;
```
## API
### `ReactBridge`
#### Yapıcı
```typescript
new ReactBridge(url: string)
```
- `url`: Juncture sunucusunun URL'si
#### Metotlar
- `execute(command: string, args: any): Promise`: Sunucuda bir komut çalıştırır
- `on(event: string, callback: (data: any) => void, done: () => void)`: Bir olayı dinler
- `off(event: string)`: Bir olayı dinlemeyi durdurur
## İlgili Projeler
Sunucu tarafı uygulaması için [juncture-server](https://github.com/ahgsql/juncture-server) projesine göz atın.
## Katkıda Bulunma
Katkılarınızı bekliyoruz! Lütfen bir Pull Request göndermekten çekinmeyin.
## Lisans
Bu proje MIT Lisansı altında lisanslanmıştır. Detaylar için [LICENSE](LICENSE) dosyasına bakın.
## Yazar
[ahgsql](https://github.com/ahgsql)
## Sorunlar
Herhangi bir sorunla karşılaşırsanız veya önerileriniz varsa, lütfen GitHub'da bir [issue açın](https://github.com/ahgsql/juncture-bridge/issues).
## Ana Sayfa
Daha fazla bilgi için [Juncture Bridge ana sayfasını](https://github.com/ahgsql/juncture-bridge#readme) ziyaret edin.