사용예시

-- 설치
npm install stayge-ws-client-sdk

React

import { getWebSocketClient, wsError } from "stayge-ws-client-sdk/react";

type Message = {
  title: string;
  body: string;
};

const ws = getWebSocketClient();

ws.connect({ url: "wss://dev.linc.fan/ws/linc" });

ws.onConnect(
  callback: () => {
    // connected
  },
);

// 이벤트 핸들러는 connect 이전에 등록 가능, 여러번 호출해서 멀티 핸들러 등록 가능
ws.onMessage<Message>({
  topic: "openchat/12345",
  callback: (topic, payload) => {
    // 서버에서 메시지가 수신되면 호출됨
    // payload는 Message 타입으로 넘어오고 sdk에서 JSON.parse() 후에 핸들러에 넘겨줌
    console.log(`Received: topic=${topic}, payload=${JSON.stringify(payload)}`);
  },
});

ws.onDisconnect({
  callback: () => {
    // 서버와 연결이 끊어지면 호출됨
    console.log(`onDisconnect`);
  },
});

ws.onError({
  callback: (error: wsError) => {
    // 서버에서 에러가 리턴되면 호출됨, 현재는 구독 에러만 정의됨
    if (error.code === "subscribeError") {
      setSubscribedTopics((prev) => prev.filter((t) => t !== error.topic));
    }
  },
});

React Native

import { getWebSocketClient, wsError } from "stayge-ws-client-sdk/react-native";

type Message = {
  title: string;
  body: string;
};

const ws = getWebSocketClient();

ws.connect({ url: "wss://dev.linc.fan/ws/linc" });

ws.onConnect({
  callback: () => {
    setConnected(true);
  },
});

// 이벤트 핸들러는 connect 이전에 등록 가능, 여러번 호출해서 멀티 핸들러 등록 가능
ws.onMessage<Message>({
  topic: "openchat/12345",
  callback: (topic, payload) => {
    // 서버에서 메시지가 수신되면 호출됨
    // payload는 Message 타입으로 넘어오고 sdk에서 JSON.parse() 후에 핸들러에 넘겨줌
    console.log(`Received: topic=${topic}, payload=${JSON.stringify(payload)}`);
  },
});

ws.onDisconnect({
  callback: () => {
    // 서버와 연결이 끊어지면 호출됨
    console.log(`onDisconnect`);
  },
});

ws.onError({
  callback: (error: wsError) => {
    // 서버에서 에러가 리턴되면 호출됨, 현재는 구독 에러만 정의됨
    if (error.code === "subscribeError") {
      setSubscribedTopics((prev) => prev.filter((t) => t !== error.topic));
    }
  },
});

SDK References

https://staygelabs.github.io/stayge-ws-client-sdk/

프로젝트 폴더 구조

stayge-ws-client-sdk/
├── package.json
├── tsconfig.json
├── tsup.config.ts
├── vite.config.ts
├── src/
│   ├── index.ts               # 공통 진입점
│   ├── core/
│   ├── react/
│   └── react-native/
└── dist/                      # 빌드 산출물 (tsup)

빌드

npm run build

배포

deploy.patch.sh

SDK 문서 생성 & 업데이트

gen-docs.sh