@kispi/chat 0.1.2 → 0.2.0

package/README.md

@@ -22,7 +22,7 @@ npm install @kispi/chat
 |---|---|---|
 | `url` | `string` | **필수.** 오리진만 준다. SDK가 `/v1/ws?v=1`을 붙인다 |
 | `key` | `string` | **필수.** `pk_`. 공개값이라 브라우저에 넣어도 된다 |
-| `token` | `() => string \| Promise<string>` | **필수.** 백엔드가 서명한 유저 토큰. 접속할 때마다 다시 부르므로 만료된 것이 재사용되지 않는다 |
+| `token` | `() => string \| Promise<string>` | **필수.** 백엔드가 서명한 유저 토큰. 접속할 때마다, 그리고 REST가 401을 받을 때 다시 부르므로 만료된 것이 재사용되지 않는다 |
 | `restURL` | `string` | REST 주소. 생략하면 `url`에서 유도한다(`ws://` → `http://`) |
 | `externalToken` | `() => string \| Promise<string>` | external 모드. 주면 **`token`보다 우선한다**(서버의 판정 순서와 같다). **서버가 아직 거절하므로 오늘은 쓸 곳이 없다** |
 | `WebSocket` | `new (url) => WebSocketLike` | 전역 대신 쓸 구현. 테스트에서 주입한다 |
@@ -42,10 +42,10 @@ npm install @kispi/chat
 
 | 메서드 | |
 |---|---|
-| `connect()` | 붙는다. 이미 붙어 있거나 붙는 중이면 그 시도에 합류한다 |
+| `connect()` | 붙는다. 이미 붙어 있거나 붙는 중이면 그 시도에 합류한다. 실패하면 거절하지만 **재시도는 백그라운드에서 계속된다**(아래) |
 | `close()` | 끊는다. 이건 재접속하지 않는다 |
 | `room(roomId)` | 방 핸들. 같은 id면 같은 객체 |
-| `roomByKey(key)` | 키로 여는 방 핸들. 구독할 때 서버가 id를 알려 준다 |
+| `roomByKey(key)` | 키로 여는 방 핸들. 구독할 때 서버가 id를 알려 준다. **방을 만들지 않는다** — 없는 키면 `subscribe()`가 `not_found`로 거절한다(아래) |
 | `rooms.list({cursor?, limit?})` | 내가 멤버인 방 + unread + 마지막 메시지 |
 | `rooms.discover({type?, cursor?, limit?})` | 공개 방 탐색 |
 | `rooms.members(roomId).list/add/remove` | 멤버 관리 |
@@ -71,7 +71,7 @@ off()
 
 | 프로퍼티 | |
 |---|---|
-| `messages` | seq 오름차순. **정렬과 구멍 메우기는 SDK가 한다** |
+| `messages` | seq 오름차순. **정렬과 구멍 메우기는 SDK가 한다.** 바뀔 때마다 새 배열이다 |
 | `id` / `key` | 방 식별자. 키로 열었으면 구독 전까지 `id`가 없다 |
 | `lastSeq` | 서버가 알려 준 방의 마지막 seq |
 | `presence` | `{count, users?, capped?}` |
@@ -80,8 +80,9 @@ off()
 |---|---|
 | `subscribe()` | 라이브 피드를 켜고 최근 100건을 읽는다. 이미 따라잡혔으면 아무것도 안 한다 |
 | `unsubscribe()` | 이 방 보기를 그만둔다. 재접속해도 다시 구독하지 않는다 |
-| `send({text, attachments?, entities?, replyTo?, threadId?, meta?}, {clientMessageId?})` | 발행. ack로 `{messageId, seq}` |
-| `history({before?, after?, limit?, view?})` | 과거를 직접 읽는다. `view`는 `'main'`, `'all'`, `{thread: id}` |
+| `send({text, attachments?, entities?, replyTo?, threadId?, meta?}, {clientMessageId?})` | 발행. ack로 `{messageId, seq}`. 구독이 진행 중이면 그것을 기다린다 |
+| `loadOlder({limit?})` | 가장 오래된 메시지 앞 페이지(기본 100)를 읽어 **`messages` 앞에 붙인다.** `{messages, hasMore}`. 스크롤을 올릴 때 쓴다. 목록이 비어 있으면(구독 전) 아무것도 읽지 않는다 |
+| `history({before?, after?, limit?, view?})` | 과거를 직접 읽는다. **`messages`와 따로 논다.** `view`는 `'main'`, `'all'`, `{thread: id}` |
 | `reload()` | 최근 페이지를 다시 읽는다 |
 | `react(messageId, emoji)` / `unreact(...)` | 리액션. 멱등 |
 | `reactionsOf(messageId, {emoji?, cursor?, limit?})` | 누가 눌렀는지. **한 행은 (유저, 이모지) 쌍**이라 한 사람이 여러 줄일 수 있다. `limit` 기본 50 최대 100, 마지막 페이지의 `cursor`는 빈 문자열 |
@@ -100,11 +101,69 @@ off()
 
 | 이벤트 | 언제 |
 |---|---|
-| `messages` | 목록이 바뀔 때마다. 통째로 다시 그리는 UI에 편하다 |
+| `messages` | 목록이 바뀔 때마다. **매번 새 배열이고, 내보낸 배열은 다시 건드리지 않는다** |
 | `error` | 히스토리를 읽거나 구멍을 메우는 데 실패했다. **다시 시도할 것은 `subscribe()`** |
 | `reset` | 커서가 보존 기간보다 오래돼 목록을 버리고 다시 채웠다. **렌더한 것을 버려야 한다** |
 
-### 알아 둘 것 넷
+### 알아 둘 것
+
+**`messages`는 참조가 바뀐다.** 목록이 바뀔 때마다 새 배열이 나오고, 한 번 내보낸
+배열과 그 안의 행 객체는 이후에 고쳐지지 않는다(바뀐 행만 새 객체다). 그래서
+참조로 비교하는 상태에 그대로 넣으면 된다.
+
+```ts
+// Svelte 5
+let messages = $state.raw<Message[]>([])
+room.on('messages', m => (messages = m))
+
+// React
+const [messages, setMessages] = useState<Message[]>([])
+useEffect(() => room.on('messages', setMessages), [room])
+
+// Vue
+const messages = shallowRef<Message[]>([])
+room.on('messages', m => (messages.value = m))
+```
+
+`$state`(깊은 프록시)나 `ref`로 감싸도 동작하지만 필요 없는 일을 한다. 0.1.x는 같은
+배열을 제자리에서 고쳐 다시 내보내서, 참조로 비교하는 쪽에서는 화면이 멈췄다.
+
+**과거는 `loadOlder()`로 같은 목록에 붙인다.** `history()`는 목록을 건드리지 않는
+직접 읽기라, 그 결과를 라이브 목록과 합치고 중복을 거르고 `reset`과 재접속을
+처리하는 일이 전부 소비자 몫이 된다. `loadOlder()`는 그 행들을 `messages`에 넣으므로
+정렬·중복 제거·삭제·리액션·재접속이 다른 행과 똑같이 적용된다. 동시에 여러 번
+불러도 요청은 하나이고, `hasMore`가 `false`면 방(또는 보존 기간)의 맨 앞이다.
+`reset`이나 `reload()`는 붙인 과거도 함께 버린다.
+
+```ts
+const { hasMore } = await room.loadOlder()
+```
+
+**보내도 되는 때는 `await room.subscribe()`가 끝난 때다.** 다만 기다리지 않고
+`send`해도 된다 — 구독이 진행 중이면 `send`(와 `react`, `markRead`, `loadOlder` 등)가
+그것을 기다렸다가 나간다. 구독이 실패하면 그 에러로 거절한다. 구독한 적도 없는
+`roomByKey` 방은 id를 모르므로 곧바로 `closed`로 거절한다. `chat.state`가
+`reconnecting`인 동안의 발행도 `closed`로 거절한다 — SDK는 보낼 것을 쌓아 두지 않는다.
+
+**키로 연다고 방이 생기지 않는다.** `roomByKey(key).subscribe()`는 있는 방을 찾기만
+하고, 없으면 `not_found`다. 방은 백엔드가 `sk_`로 만든다
+(`@kispi/chat/server`의 `rooms.ensure({key, type})` — 있으면 그대로 돌려주는
+get-or-create라 페이지를 열 때마다 불러도 된다). 앱 설정 `client_room_create`를 켜면
+유저 토큰으로도 `PUT /v1/rooms`를 부를 수 있지만(허용 타입·키 패턴·하루 50개
+한도), `pk_`는 공개값이라 누구나 방을 찍어낼 수 있는 문이 된다. 기본은 꺼져 있고,
+끄는 쪽을 권한다.
+
+**연결은 알아서 돌아온다.** 소켓이 끊기거나 `token()`이 던지면 지수 백오프(0.5초에서
+30초까지, 지터)로 다시 붙는다. **첫 `connect()`도 같다** — 실패하면 `await`는 거절해서
+호출자가 알게 하고, 재시도는 백그라운드에서 이어진다(`state`가 `reconnecting`).
+그래서 재시도 루프를 직접 짤 필요가 없다. 멈추는 것은 둘뿐이다: `close()`, 그리고
+서버가 인증을 거절한 경우(`unauthorized` — 같은 토큰을 반복하는 것은 서버를 두드리는
+일이라 `closed`로 끝낸다).
+
+**토큰 만료는 SDK가 처리한다.** 소켓은 접속할 때 한 번만 인증하므로 토큰이 만료돼도
+멀쩡하지만, REST는 요청마다 토큰을 본다. REST가 401을 받으면 SDK가 `token()`을 다시
+불러 **한 번** 재시도한다. 두 번째 401(오리진, 폐기된 토큰, 밴)은 그대로 던진다.
+주기적으로 재접속할 필요가 없다.
 
 **정렬과 구멍 메우기는 SDK가 한다.** 프레임이 순서 없이 오거나 재접속으로 구간을
 놓치면 REST로 채운다. 한 페이지(100)를 넘는 구멍도 전부 채운다.
@@ -167,6 +226,7 @@ try {
 | `code` | `unauthorized`, `rate_limited`, `not_found`, `invalid`, `timeout`, `closed`, ... |
 | `retryAfterMs` | 한도에 걸렸을 때 서버가 알려 준 대기 시간 |
 | `appCode` | `before_publish` 웹훅이 거절하며 붙인 소비자 쪽 코드 |
+| `status` | REST 호출에서 난 에러면 HTTP 상태 |
 
 ---
 
@@ -182,6 +242,7 @@ const chat = createChatServer({
   secretKey: process.env.CHAT_SECRET_KEY!,
   keyId: process.env.CHAT_KEY_ID!,
   webhookSecret: process.env.CHAT_WEBHOOK_SECRET,
+  guestSecret: process.env.CHAT_GUEST_SECRET,   // guest()를 쓸 때만
 })
 ```
 
@@ -196,6 +257,40 @@ const chat = createChatServer({
 | `avatar`, `meta` | 선택 |
 | `ttlSeconds` | 기본 1시간, 최대 24시간. 넘으면 자르지 않고 거절한다 |
 
+### `chat.guest({credential?, name, avatar?, meta?, ttlSeconds?})`
+
+로그인하지 않은 방문자의 신원. `{userId, credential, token, created}`를 돌려준다.
+네트워크도 저장소도 쓰지 않는다.
+
+```ts
+app.post('/api/chat-token', (req, res) => {
+  if (req.user) return res.json({ token: chat.token({ userId: req.user.id, name: req.user.name }) })
+  const g = chat.guest({ credential: req.cookies.chat_guest, name: '손님' })
+  res.cookie('chat_guest', g.credential, { httpOnly: true, secure: true, sameSite: 'lax', maxAge: 400 * 864e5 })
+  res.json({ token: g.token })
+})
+```
+
+**브라우저가 돌려준 `userId`를 그대로 서명하면 안 된다.** 게스트 id는 비밀이 아니다 —
+방의 모든 메시지에 `sender.id`로 실려 나간다. "브라우저가 보관한 id를 다시 서명"하는
+토큰 엔드포인트는 남의 메시지에서 id를 복사한 누구에게나 그 게스트의 신원을 준다.
+형식 검사(`g_` + UUID 정규식)는 이것을 막지 못한다. UUID가 추측하기 어려운 것은
+공개된 값 앞에서는 아무 의미가 없다.
+
+`guest()`는 브라우저가 id 대신 **자격증명**을 들게 한다. `g1.<userId>.<MAC>`이고 MAC은
+`guestSecret`으로 만든다. 돌아온 자격증명이 검증되면 그 안의 id로, 없거나 틀리면
+새 게스트(`g_` + 무작위 22자, `created: true`)로 서명한다. 가능하면 `httpOnly` 쿠키에
+두어 페이지의 스크립트가 읽지 못하게 한다.
+
+| | |
+|---|---|
+| `guestSecret` | 32자 이상. 백엔드에만 둔다. **`sk_`에서 유도하지 않는다** — `sk_`는 유출되면 돌리는 키이고, 돌릴 때 모든 게스트가 새 사람이 되면 안 되기 때문이다 |
+| 교체 | 배열로 준다: `[새것, 옛것]`. 첫 번째로 서명하고 전부로 검증한다. 옛것으로 검증된 자격증명은 같은 `userId`로 새로 서명해 돌려주므로 다음 방문에 옮겨 간다 |
+| 유출 | 비밀이 새면 누구든 아무 게스트가 될 수 있다. 옛것을 목록에서 **빼면** 모든 게스트가 새 사람이 된다 — 신원을 잃는 것이 사칭보다 낫다 |
+
+게스트 id는 `g_`로 시작한다. 로그인 유저의 id가 `g_`로 시작하지 않게 하면 두 공간이
+겹치지 않는다.
+
 ### 나머지
 
 | 그룹 | 메서드 |

package/dist/{chunk-T3QOUFOM.js → chunk-5QQRM7BH.js}

@@ -5,6 +5,8 @@ var ChatError = class extends Error {
   retryAfterMs;
   /** The consumer's own code, when a before_publish hook denied this. */
   appCode;
+  /** The HTTP status, when this came from a REST call. */
+  status;
   constructor(code, message, extra) {
     super(message);
     this.name = "ChatError";

package/dist/index.cjs

@@ -67,6 +67,8 @@ var ChatError = class extends Error {
   retryAfterMs;
   /** The consumer's own code, when a before_publish hook denied this. */
   appCode;
+  /** The HTTP status, when this came from a REST call. */
+  status;
   constructor(code, message, extra) {
     super(message);
     this.name = "ChatError";
@@ -112,6 +114,16 @@ var Rest = class {
   }
   async call(method, path, body) {
     const token = await this.options.token();
+    try {
+      return await this.callWith(token, method, path, body);
+    } catch (err) {
+      if (!(err instanceof ChatError) || err.status !== 401 || this.options.refreshToken === void 0) throw err;
+      const fresh = await this.options.refreshToken().catch(() => void 0);
+      if (fresh === void 0 || fresh === token) throw err;
+      return this.callWith(fresh, method, path, body);
+    }
+  }
+  async callWith(token, method, path, body) {
     if (token === void 0) {
       throw new ChatError(
         "unauthorized",
@@ -133,6 +145,7 @@ var Rest = class {
     const parsed = text === "" ? void 0 : JSON.parse(text);
     if (!res.ok) {
       const err = errorFrom(parsed, `${method} ${path} failed with ${res.status}`);
+      err.status = res.status;
       throw err;
     }
     return parsed;
@@ -179,10 +192,24 @@ var Timeline = class {
    * rows into the new list.
    */
   epoch = 0;
+  /**
+   * `items` has been handed out -- by the getter or by `onChange`.
+   *
+   * 한 번 내준 배열은 다시 건드리지 않는다. 같은 배열을 제자리에서 고쳐
+   * 다시 내주면 Svelte `$state.raw`, React `useState`, Vue `shallowRef`처럼
+   * 참조가 바뀌어야 다시 그리는 쪽은 변화를 보지 못하고 화면이 멈춘다. 그래서
+   * 내준 뒤의 첫 변경은 복사본에서 한다(copy-on-write). 행 객체도 같은 규칙이라
+   * 바뀐 행만 새 객체다.
+   */
+  shared = false;
+  /** The `loadOlder` in flight, so a scroll handler firing twice asks once. */
+  older;
   constructor(options) {
     this.options = options;
   }
+  /** A new array whenever the list changes; never mutated once returned. */
   get messages() {
+    this.shared = true;
     return this.items;
   }
   /** The highest seq this timeline holds, hole or no hole. */
@@ -229,6 +256,7 @@ var Timeline = class {
     this.fills.clear();
     this.pendingDeletes.clear();
     this.items = [];
+    this.shared = false;
     this.changed();
   }
   /**
@@ -255,6 +283,7 @@ var Timeline = class {
     const page = [...messages].sort((a, b) => a.seq - b.seq);
     const top = page.at(-1)?.seq ?? 0;
     this.items = [...page, ...this.items.filter((m) => m.seq > top)];
+    this.shared = false;
     for (const m of this.items) {
       if (this.pendingDeletes.has(m.id)) this.applyDelete(m.id);
     }
@@ -289,6 +318,7 @@ var Timeline = class {
     if (at === -1) return;
     const current = this.items[at];
     if (current.deletedAt !== void 0) return;
+    this.own();
     this.items[at] = { ...current, ...message };
     this.changed();
   }
@@ -315,6 +345,7 @@ var Timeline = class {
     if (count <= 0) next = existing.filter((r) => r.emoji !== emoji);
     else if (slot === -1) next = [...existing, { emoji, count }];
     else next = existing.map((r, i) => i === slot ? { emoji, count } : r);
+    this.own();
     this.items[at] = { ...current, reactions: next };
     this.changed();
   }
@@ -323,6 +354,7 @@ var Timeline = class {
     const at = this.items.findIndex((m) => m.id === rootId);
     if (at === -1) return;
     const current = this.items[at];
+    this.own();
     this.items[at] = { ...current, thread: lastSeq === void 0 ? { count } : { count, lastSeq } };
     this.changed();
   }
@@ -330,6 +362,36 @@ var Timeline = class {
   remove(id) {
     if (!this.applyDelete(id)) this.pendingDeletes.add(id);
   }
+  /**
+   * Prepends the page just below the oldest message held.
+   *
+   * 스크롤을 올려 과거를 읽는 소비자가 `history()` 결과를 라이브 목록과 따로
+   * 들고 합치고, 중복을 걸러 내고, reset과 재접속을 따로 처리해야 했다. 같은
+   * 목록에 끼워 넣으면 그 일이 전부 이미 있는 규칙(seq 자리에 넣기, 같은 seq는
+   * 한 행, reset이면 epoch로 버리기)으로 끝난다.
+   *
+   * `hasMore`는 더 올라갈 것이 있는지다. 서버의 seq는 1부터 구멍 없이 붙으므로
+   * 맨 위가 1이거나 페이지가 덜 찼으면 끝이다(보존 기간이 지운 앞부분도 덜 찬
+   * 페이지로 드러난다). 한 번에 하나만 돈다 — 스크롤 핸들러가 두 번 불러도
+   * 요청은 하나다(진행 중인 호출과 같은 결과를 받으므로 뒤 호출의 `limit`은 쓰이지 않는다).
+   */
+  loadOlder(limit = this.options.pageSize ?? MaxPageSize) {
+    this.older ??= this.readOlder(Math.min(limit, MaxPageSize)).finally(() => {
+      this.older = void 0;
+    });
+    return this.older;
+  }
+  async readOlder(limit) {
+    const first = this.items[0];
+    if (first === void 0 || first.seq <= 1) return { messages: [], hasMore: false };
+    const epoch = this.epoch;
+    const page = await this.options.fetchRange({ after: 0, before: first.seq, limit });
+    if (this.epoch !== epoch) return { messages: [], hasMore: true };
+    for (const m of page) this.insert(m, false);
+    if (page.length > 0) this.changed();
+    const top = page[0];
+    return { messages: page, hasMore: page.length >= limit && top !== void 0 && top.seq > 1 };
+  }
   /**
    * Fetches everything between what we have and `upTo`.
    *
@@ -374,10 +436,11 @@ var Timeline = class {
     return run;
   }
   /** Inserts at the seq position, replacing an existing row with that seq. */
-  insert(message) {
+  insert(message, notify = true) {
     const pending = this.pendingDeletes.has(message.id);
     if (pending) this.pendingDeletes.delete(message.id);
     const withDelete = pending ? emptied(message) : message;
+    this.own();
     const at = this.items.findIndex((m) => m.seq >= withDelete.seq);
     if (at === -1) {
       this.items.push(withDelete);
@@ -387,17 +450,25 @@ var Timeline = class {
     } else {
       this.items.splice(at, 0, withDelete);
     }
-    this.changed();
+    if (notify) this.changed();
   }
   applyDelete(id) {
     const at = this.items.findIndex((m) => m.id === id);
     if (at === -1) return false;
     this.pendingDeletes.delete(id);
+    this.own();
     this.items[at] = emptied(this.items[at]);
     this.changed();
     return true;
   }
+  /** Makes `items` safe to mutate: a copy, if the current one was handed out. */
+  own() {
+    if (!this.shared) return;
+    this.items = this.items.slice();
+    this.shared = false;
+  }
   changed() {
+    this.shared = true;
     this.options.onChange?.(this.items);
   }
 };
@@ -462,10 +533,27 @@ var Room = class extends Emitter {
       onChange: (messages) => this.emit("messages", messages)
     });
   }
-  /** Everything this client knows about the room, in seq order. */
+  /** Everything this client knows about the room, in seq order. A new array whenever it changes. */
   get messages() {
     return this.timeline.messages;
   }
+  /**
+   * Reads the page just before the oldest message held and **prepends it to
+   * `messages`**.
+   *
+   * The scroll-back call. Unlike `history()`, the rows join the room's own
+   * list, so ordering, de-duplication, deletes, reactions and reconnects
+   * apply to them like any other row, and the `messages` event fires once.
+   * A `reset` (or `reload()`) drops them with everything else; a read that
+   * lands after one is discarded rather than stitched onto the new list.
+   *
+   * `hasMore` is false once the top of the room -- or of its retention --
+   * is reached. Concurrent calls share one request.
+   */
+  async loadOlder(options = {}) {
+    await this.resolveId("loading older messages");
+    return this.timeline.loadOlder(options.limit);
+  }
   /**
    * Reloads recent history, discarding what is held.
    *
@@ -539,7 +627,8 @@ var Room = class extends Emitter {
    *
    * The list this room keeps is the live one; this is for a consumer
    * scrolling back, which owns its own window and does not want the
-   * bottom of the room rearranged under it.
+   * bottom of the room rearranged under it. **Scrolling the room's own
+   * list back is `loadOlder()`**, which keeps one list instead of two.
    *
    * `view` defaults to the server's, which is every message including
    * thread replies. **`view: 'main'` is a display filter, not a sync
@@ -548,7 +637,7 @@ var Room = class extends Emitter {
    */
   async history(options = {}) {
     const view = options.view === void 0 ? void 0 : typeof options.view === "string" ? options.view : `thread:${options.view.thread}`;
-    const page = await this.rest.get(`/v1/rooms/${this.requireId("reading history")}/messages`, {
+    const page = await this.rest.get(`/v1/rooms/${await this.resolveId("reading history")}/messages`, {
       before: options.before,
       after: options.after,
       limit: options.limit,
@@ -558,10 +647,10 @@ var Room = class extends Emitter {
   }
   /** Adds a reaction. Idempotent, like the frame. */
   async react(messageId, emoji) {
-    await this.chat.send("react", { roomId: this.requireId("reacting"), messageId, emoji, op: "add" });
+    await this.chat.send("react", { roomId: await this.resolveId("reacting"), messageId, emoji, op: "add" });
   }
   async unreact(messageId, emoji) {
-    await this.chat.send("react", { roomId: this.requireId("reacting"), messageId, emoji, op: "remove" });
+    await this.chat.send("react", { roomId: await this.resolveId("reacting"), messageId, emoji, op: "remove" });
   }
   /**
    * Moves this user's read cursor.
@@ -571,7 +660,7 @@ var Room = class extends Emitter {
    * way to know what happened. It is returned rather than swallowed.
    */
   async markRead(seq, options = {}) {
-    const data = { roomId: this.requireId("marking read"), seq };
+    const data = { roomId: await this.resolveId("marking read"), seq };
     if (options.threadId !== void 0) data["threadId"] = options.threadId;
     return await this.chat.send("read", data);
   }
@@ -598,15 +687,15 @@ var Room = class extends Emitter {
   }
   /** Joins a public or channel room. Idempotent. */
   async join() {
-    await this.rest.post(`/v1/rooms/${this.requireId("joining")}/join`);
+    await this.rest.post(`/v1/rooms/${await this.resolveId("joining")}/join`);
   }
   /** Leaves. Idempotent from the caller's side. */
   async leave() {
-    await this.rest.delete(`/v1/rooms/${this.requireId("leaving")}/members/me`);
+    await this.rest.delete(`/v1/rooms/${await this.resolveId("leaving")}/members/me`);
   }
   /** The full presence list, for rooms too large to send it in the ack. */
   async presenceList() {
-    return this.rest.get(`/v1/rooms/${this.requireId("reading presence")}/presence`, { full: "true" });
+    return this.rest.get(`/v1/rooms/${await this.resolveId("reading presence")}/presence`, { full: "true" });
   }
   /**
    * Who reacted, one row per (user, emoji) pair.
@@ -618,7 +707,7 @@ var Room = class extends Emitter {
    * most, and a full page still carries a cursor when more follows.
    */
   async reactionsOf(messageId, options = {}) {
-    return this.rest.get(`/v1/rooms/${this.requireId("reading reactions")}/messages/${messageId}/reactions`, {
+    return this.rest.get(`/v1/rooms/${await this.resolveId("reading reactions")}/messages/${messageId}/reactions`, {
       emoji: options.emoji,
       cursor: options.cursor,
       limit: options.limit
@@ -684,9 +773,22 @@ var Room = class extends Emitter {
     }
     return this.id;
   }
+  /**
+   * The room's id, waiting for a subscribe in flight to learn it.
+   *
+   * `roomByKey(k).subscribe()`를 await하지 않고 곧바로 `send`하는 것은 자연스러운
+   * 코드이고, 그때 id는 구독 ack가 와야 생긴다. 거절(`closed`)하면 소비자는
+   * "보내도 되는 때"를 알릴 신호를 따로 찾아야 한다 — 이미 날아가고 있는
+   * 구독을 기다리면 그 신호가 필요 없다. 구독이 실패하면 그 실패가 그대로
+   * 나간다. 구독한 적이 없으면 기다릴 것이 없으니 예전처럼 거절한다.
+   */
+  async resolveId(what) {
+    while (this.id === void 0 && this.subscribing !== void 0) await this.subscribing;
+    return this.requireId(what);
+  }
   /** Publishes and resolves when the server acks. */
   async send(input, options = {}) {
-    const roomId = this.requireId("sending");
+    const roomId = await this.resolveId("sending");
     const body = {};
     if (input.text !== void 0) body["text"] = input.text;
     if (input.entities !== void 0) body["entities"] = input.entities;
@@ -818,6 +920,7 @@ var ChatClient = class extends Emitter {
       url: options.restURL ?? restURLFrom(options.url),
       key: options.key,
       token: async () => this.lastToken,
+      refreshToken: () => this.refreshToken(),
       fetch: options.fetch ?? globalThis.fetch.bind(globalThis)
     });
     this.setupLifecycle();
@@ -1038,7 +1141,13 @@ var ChatClient = class extends Emitter {
   }
   async openOnce() {
     this.setState(this.attempt === 0 ? "connecting" : "reconnecting");
-    const authData = await this.authData();
+    let authData;
+    try {
+      authData = await this.authData();
+    } catch (err) {
+      this.scheduleReconnect();
+      throw err;
+    }
     if (this.closedByCaller) {
       throw new ChatError("closed", "the client was closed while connecting");
     }
@@ -1207,6 +1316,28 @@ var ChatClient = class extends Emitter {
     data["token"] = token;
     return data;
   }
+  /**
+   * REST가 401을 받았을 때 토큰을 새로 받는다.
+   *
+   * 소켓은 접속할 때 한 번 인증하고 그 뒤로는 토큰을 다시 보지 않지만, REST는
+   * 요청마다 본다. 그래서 한 시간짜리 토큰이면 한 시간 뒤 라이브는 멀쩡한데
+   * 히스토리·구멍 메우기만 401이 된다. 동시에 실패한 요청들이 `token()`을
+   * 각자 부르지 않도록 진행 중인 것 하나를 나눠 쓴다.
+   */
+  refreshToken() {
+    if (this.options.externalToken !== void 0) return Promise.resolve(void 0);
+    this.refreshing ??= (async () => {
+      try {
+        const token = await this.options.token();
+        this.lastToken = token;
+        return token;
+      } finally {
+        this.refreshing = void 0;
+      }
+    })();
+    return this.refreshing;
+  }
+  refreshing;
   failPending(err) {
     for (const [, waiter] of this.pending) waiter.reject(err);
     this.pending.clear();