sapper + svelte で、チャットを作る【作例】

1 min read読了の目安(約700字

概要:

前のsapper + svelteの関係で、チャットの例となります。

  • ヘッドレスCMS/ mongoDB をバックエンドで。クロスドメイン通信の構成
  • バックエンドほぼ開発ゼロ
  • フロント側を開発
  • 新着投稿は。タイマーで pull式取得して更新

環境

  • svelte: 3.17.3
  • sapper: 0.28.0
  • node : 14.17
  • mongoDB

参考のコード

https://github.com/kuc-arc-f/sapper_4_11chat
  • ヘッドレスCMS(前に自作した mongoDB版)

https://github.com/kuc-arc-f/headless-1

画面


準備、データ項目の設定

  • ヘッドレスCMSに、APIスキーマの定義、 users, chats, chat_posts
    画面から入力

users

  • name
  • email
  • password

chats:

  • name : text
  • content : text
  • user_id : text

chat_posts:

  • chat_id : text
  • user_id : text
  • title : text
  • body : text

コード

  • chat画面
    /src/routes/chats/[id].svelte

  • chat一覧
    /src/routes/chats/index.svelte

....