【Elysia/Bun】先日作った、Elysia のチャットに SQLite の簡単なデータベースをつけた。

※[更新履歴をページ下に移動しました。](https://qiita.com/toshirot/items/c5654156c8799ac28d83#%E6%9B%B4%E6%96%B0%E5%B1%A5%E6%AD%B4)

----
先日作った、[Elysia  のチャット](https://qiita.com/toshirot/items/2f0db79b3c2480e64f41) に SQLite の簡単なデータベースをつけた。まぁ、トランザクションなども付けてないけどまぁ、ログの消えないDB付きチャットにはなった。まぁ、簡易なチャットとしては充分かも。

# 今回の動作サンプル

まぁ、今回も作ったものを pm2 start "bun dev" してあげておきます。まぁ期間限定になるとは思いますが、参考までにどうぞ。ブラウザで複数開いて書き込むと動作が判ります。

http://74.226.208.203:9011/

Bun で pm2 登録する方法は下記をどうぞ。

参考: <b>BunアプリをPM2で動かしてデーモン化する</b>
https://qiita.com/toshirot/items/7a0555b46b3a64a4f643

自分が、Elysia の XSS やバリデーションなどの確認をまだちゃんとしていないので、一応、こつこつとスクリプトタグを除去してたりますが、そのうち勉強が進めばいろいろ改定していきたいと思ってはいます。

過去記事はこれです。

https://qiita.com/toshirot/items/2f0db79b3c2480e64f41

https://qiita.com/toshirot/items/06a992af8cf8aca9ff95

# 今回の環境
クラウド： Azure VM (これは何でも良い)
OS：　Ubuntu 20.04.6 LTS (GNU/Linux 5.15.0-1050-azure x86_64)
Bun：　v1.0.18
Elysia： v0.7.30
SQLite3:  v3.31.1(Elysia を入れると自動で入る)

BunのインストールやElysia プロジェクト作成は、[本家](https://elysiajs.com/quick-start.html) などを参考にしてみてください。

# 今回はこんなディレクトリが作られます
SQLite 用の ディレクトリを ./db としました。同時書き込みが行われる状況でパフォーマンスを向上させる先行書き込みログ [ モード(WAL) ](https://www.sqlite.org/wal.html) を使っているので、DBファイルが3個になっています。

参考: <b>SQLite > Write-Ahead Logging (WAS)</b>

https://www.sqlite.org/wal.html

```
.ccchart/
├─ db/
│    ├─ mychat.sqlite // 通常の SQLiteファイル
│    ├─ mychat.sqlite-shm // ジャーナルモード用ファイル
│    └─ mychat.sqlite-wal // ジャーナルモード用ファイル
├─ src/
│    ├─ index.ts  // bun dev で起動するファイル
│    └─ utiles.ts // タイムゾーンの変更関数を置いた
│  
├─ README.md
├─ bun.lockb
├─ node_modules/
├─ package.json
└─ tsconfig.json
```

pacage.jsonのscriptは、今まで通り以下のようになっていますので、「$ bun dev」で実行できます。パラメータ「--watch 」は[  ホットリロード ](https://qiita.com/toshirot/items/4c8e14c9525d9e89b55f) です。ファイルが変更された時に、自動的に再起動してくれます。

```json:pacage.jsonのscript
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "bun run --watch src/index.ts"
  },
```

### 結果
その結果、ブラウザにはこんなチャットが表示されて書き込めばDBへログが記録されていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7103/aa679dd7-b45c-cd2a-071d-eb2a01a1ebd4.png)





# 起動ファイルの中身

起動ファイルは src/index.ts です。
今回も、index.ts に全部入りで書きました。もちろん、実際に使う時は、適宜デイレクトリに小分けして使うようですね。

```ts: src/index.tsの中身
import { Elysia } from 'elysia';
import type { WS } from '@types/bun';
import { html } from '@elysiajs/html'
import { Database } from 'bun:sqlite';
import { adjustHours } from "./utils";

// チャット名
const chatName = 'myChat';
// バージョン
const version = '0.1.005';

type MsgType = 'msg' | 'info' | 'bc'; 

interface Head {
    type: MsgType;
}
interface Body {
    type: any;
}
interface MsgData {
    head: Head;
    body: Body;
}

//===========================================
// データベースの作成

// データベースファイルの名前を指定
const dbFileName = './db/'+chatName+'.sqlite';
// テーブルの名前を指定
const tableName = 'chat_logs';
// 新しいデータベースインスタンスを作成し、ファイルが存在しない場合はデータベースファイルを作成
const db = new Database(dbFileName, { create: true });
// 同時書き込みが行われる状況でパフォーマンスを大幅に向上させる先行書き込みログ モード(WAL) 
db.exec('PRAGMA journal_mode = WAL;');
// テーブルが存在しない場合はテーブルを作成
const sql_table_create =
    'CREATE TABLE IF NOT EXISTS ' 
    + tableName 
    + ' (id INTEGER PRIMARY KEY, name VARCHAR(255), msg VARCHAR(255), created_at TIMESTAMP);'
doQuery(db, sql_table_create);

// 出力するメッセ―ジ数
const limit = 20;

// クライアントを入れとく配列 ブロードキャスト用
let clients: WebSocket[] = [];

//===========================================
// サーバーを立てる HTTPとWebSocket
// 
const app = new Elysia()
    .use(html())
    .get('/', ({ cookie: { name } }) => { 
        // cookie から名前を取得
        (name.value)?name.value=name.value:name.value='通りすがりさん'
    return `
    <html lang='ja'>
        <head>
            <title>${chatName} updating</title>
            <script>${adjustHours} </script>
        </head>
        <body><Layout>
            <h1 style=margin-bottom:5px;>${chatName} v${version}</h1>
            
            <a href="https://qiita.com/toshirot/items/c5654156c8799ac28d83" target=qiita>
            →このチャットの作り方</a><br><br>

            名前: <input safe
                id="input_name"
                type="text"
                value="${name.value}"
                placeholder="名前を入れてください"><br>
            メッセージ: <input safe
                id="input_msg"
                type="text"
                onchange=""
                onkeyup="if(event.keyCode==13)btn_send.click();"}"
                placeholder="メッセージを入れてください"><br>
            <button id="btn_send">送信</button>
            
            <ul safe id=msgs></ul>

            <script>
                // 接続
                const socket = new WebSocket('ws://74.226.208.203:9011/ws');
                // 接続時イベント
                socket.onopen = function (event) {
                    socket.send(JSON.stringify({
                        head:{type: 'info'},
                        body:{
                            name: 'system',
                            msg: '誰かがサーバーへ接続しました。'
                        }
                    }))
                };
                // 着信時イベント
                socket.onmessage = function (event) {

                    // event.data is 
                    //  e.g. '{"head":{"type":"msg"},"body":[[52,"aa","aa","2023-12-20 14:39:04"]]}'
                    if(!event.data)return // 無ければ無視する
                    let data=JSON.parse(event.data) // object化する
                    if(!data.body)return // 無ければ無視する

                    // 下から上に向かって追記するので SELECT ASC で昇順取得したリストをafterbeginで追記する
                    data.body.reverse()
                    for(let i=0;i<${limit};i++){
                        // メッセージを出力する
                        if(!!data.body[i] && !!data.body[i]){
                            msgs.insertAdjacentHTML('afterbegin',
                              '<br><b>'
                              +data.body[i][0]+' '
                              +data.body[i][1]+': </b>'
                              +data.body[i][2]+' ('+adjustHours(data.body[i][3], +9)+')'
                            )
                        }
                    }

                };
                // 送信ボタンクリック時イベント
                btn_send.addEventListener('click', function () {
                    // 名前とメッセージがあれば送信する
                    if(!!input_name.value && !!input_msg.value) {
                        // 名前をcookieに保存する
                        document.cookie='name='+input_name.value;
                        // 送信する
                        socket.send(JSON.stringify({
                            head:{type: 'msg'},
                            body:{
                                name: input_name.value,
                                msg: input_msg.value
                            }
                        }));
                        // 送信したらメッセージ欄を空にする
                        input_msg.value='';
                    }
                });
            </script>
        </body>
    </html>
    `})
    // WebSocket サーバー
    .ws('/ws', {
        open(ws: WS): void {
            // クライアント配列を作る (ブロードキャスト等で利用する)。
            clients.push(ws)
            // DBからメッセージを 初期 limit件 降順で取り出してクライアントへ送信する
            let sql_select = 'SELECT * FROM ' + tableName + ' ORDER BY ID DESC LIMIT '+ limit +';'
            let res: any= doQuery(db, sql_select);
            // データ配列を接続してきたクライアントへ返す
            const data: MsgData = {
                head: {
                  type: "msg",
                },
                body: res,
            };
            // メッセージを送信する
            ws.send(JSON.stringify(data));
            
        },
        // メッセージが届いたら返すだけの簡単なエコーサーバー
        message(ws: WS, msgoj: MsgData): void {
            // メッセージの構文エラーははじく
            if (!msgoj || !msgoj.head || !msgoj.body) return;

            // Elysia の XSS やバリデーションの確認をまだしていないので、
            // 一応、msgoj を文字列化してスクリプトタグを除去し、オブジェクトへ戻す
            if(typeof msgoj=='object'){
                let msgstr=JSON.stringify(msgoj)
                msgstr=(''+msgstr).replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, '');
                msgoj=JSON.parse(msgstr)
            } else return; // オブジェクト以外は無視する
  
            // タイプにより処理を分ける
            // type:msg はDBへ登録する
            if(msgoj.head.type==='msg'){
                console.log('msg',msgoj.body)
                let sql_ins = 
                        'INSERT OR IGNORE INTO ' 
                        + tableName 
                        + ' VALUES (null, "'+msgoj.body.name+'", "'+msgoj.body.msg+'", CURRENT_TIMESTAMP);'
                // insert する
                doQuery(db, sql_ins)
                // 最後の 1件だけ select する
                let sql_1 = 'SELECT * FROM ' + tableName + ' ORDER BY ID DESC LIMIT 1;'
                let res = doQuery(db, sql_1)//こんな配列で返ってくる。 [[0件目], [1件目], [2件目], [3件目]] 
                // sql_1 結果セットのメッセージ配列をブロードキャストする
                broadCast(ws, res)
            } else if(msgoj.head.type==='info'){
                // infoは DB へ保存しない。
                // 届いたinfoメッセージをブロードキャストする
                let time=new Date()
                broadCast(ws, [['', '--※info', msgoj.body.msg,
                  // UTCから日本時間への変換をクライアント側でしてるので、
                  // クライアントから届いた日本時間をマイナス9時間して 
                  // SQLite出力同様のUTCに揃える
                  adjustHours(new Date(), -9)
                ]]) 
            } else {}
        }
    })
    .listen(9011, (token: any) => {
        if (token) {
            console.log('Listening to port 9011');
        } else {
            console.error('Failed to listen to port 9011');
        }
    });


//===========================================
// データベースクエリを実行する関数
//  @param {String} sql - 実行するSQLクエリ
//  @returns {Array} - 結果の配列
type QueryResultType = Array<any>; 
function doQuery(db: Database, sql: string): QueryResultType {
    return db.query(sql).values();
}

//===========================================
// 全クライアントへブロードキャストする関数
//  @param {Object} ws - WebSocket インスタンス
//  @param {String} msg - 送信するメッセージ
//  @returns {void} - なし

// 全クライアントへブロードキャストする
function broadCast(ws: WS, msg: any): void {
    clients.forEach(function (socket, i) {
        const data: MsgData = {
            head: {
              type: "bc",// broadCast
            },
            body: msg,
        };
        console.log(data)
        socket.send(JSON.stringify(data) );
    })
}

```
あとから、SQLite のタイムゾーンがUTCだったと思い出して、2023/12/23 にタイムゾーンを変更する関数を src/utiles.ts に置きました。

一応、SQLite DBに保存する日付とサーバー側は UTC のままにして、表示側で日本時間に変換しています。

因みに、src/index.ts で import { adjustHours } from "./utils";と読込み、サーバー側でもクライアント側でも同じ関数を利用しています。

```ts: src/utiles.tsの中身
//===========================================
// タイムゾーンを変更する e.g. UTC -> JST 
//  @param {Object} date - Date インスタンス
//  @param {Number} adjustHour - 調整する時間数 e.g. -9 | +9
//  @returns {string} - 時間の文字列 e.g. '2023-12-22 09:59'
export function adjustHours(date: Date, adjustHour: number): string {
    if(date instanceof Date === false)date=new Date(date)
    date.setHours(date.getHours() + adjustHour)
    return date.toLocaleString(
        ["ja-JP"], {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
      })
}
```

# 更新履歴

<b>Update：2023/12/24 v0.1.005:</b>
名前欄をcookie保存する
送信したらメッセージ欄をクリアする
<b>Update：2023/12/23 v0.1.004 </b> 
メッセージ欄の改行送信機能を追加
<b>Update：2023/12/23 v0.1.003 </b> SQLite の CURRENT_TIMESTAMP がUTC なのを忘れてたので直した。src/utiles.ts を追加してそこにタイムゾーンの変更関数 adjustHours を置きました。
```
├─ src/
│    ├─ index.ts  // bun dev で起動するファイル
│    └─ utiles.ts // タイムゾーンの変更関数を置いた
```


<b>Update：2023/12/22  v0.1.002 </b> 元記事の src/index.ts  にtypescript 的な型指定やinterface定義などを追加しておきました。

一応、追加したい機能もいくつかあるので、継続的にアップデートしようかなと思っています。

---------

# 最近 Qiita に書いた Bun 関連の記事10選

https://qiita.com/advent-calendar/2023/bunjs

https://qiita.com/toshirot/items/3f147350f51942a29bf3

https://qiita.com/toshirot/items/c0ecf87f86bf50a2912b

https://qiita.com/toshirot/items/01c7f779d87985b1f9be

https://qiita.com/toshirot/items/2f0db79b3c2480e64f41

https://qiita.com/toshirot/items/94616478d3e73e7cc5b9

https://qiita.com/toshirot/items/f6bd561bc2522f1d26e0

https://qiita.com/toshirot/items/a5dc53ef191d20bbeb42

https://qiita.com/toshirot/items/74476af27e67d8534c5a

https://qiita.com/toshirot/items/94961b6dde72be80ab0c

https://qiita.com/toshirot/items/7a0555b46b3a64a4f643