chatroom

examples/chatroom/frontend/src/Chatroom.ts

@@ -0,0 +1,101 @@
+import { WsClient } from "tsrpc-browser";
+import { MsgChat } from "./shared/protocols/MsgChat";
+import { serviceProto } from './shared/protocols/serviceProto';
+
+export interface ChatroomProps {
+    title: string;
+}
+
+export class Chatroom {
+
+    elem: HTMLDivElement;
+    props: ChatroomProps;
+
+    input: HTMLInputElement;
+    list: HTMLUListElement;
+    header: HTMLElement;
+
+    client = new WsClient(serviceProto, {
+        server: 'ws://127.0.0.1:3000',
+        logger: console
+    })
+
+    constructor(elem: HTMLDivElement, props: ChatroomProps) {
+        this.elem = elem;
+        this.props = props;
+
+        this.elem.innerHTML = `
+<header></header>
+<ul class="list"></ul>
+<div class="send">
+    <input placeholder="Say something..." />
+    <button>Send</button>
+</div>`;
+        this.input = this.elem.querySelector('.send>input')!;
+        this.list = this.elem.querySelector('ul.list')!;
+        this.header = this.elem.querySelector('header')!;
+
+        // Connect at startup
+        this.connect();
+
+        // Listen Msg
+        this.client.listenMsg('Chat', v => { this.onChatMsg(v) })
+
+        // Bind Event
+        this.elem.querySelector('button')!.onclick = () => { this.send() };
+        this.input.onkeypress = e => {
+            if (e.key === 'Enter') {
+                this.send();
+            }
+        }
+
+        // When disconnected
+        this.client.flows.postDisconnectFlow.push(v => {
+            // Retry after 2 seconds
+            this.header.innerText = `🔴  Disconnected`;
+            setTimeout(() => {
+                this.connect();
+            }, 2000)
+            return v;
+        })
+    }
+
+    async connect(): Promise<void> {
+        this.header.innerText = `🟡 Connecting...`;
+        let res = await this.client.connect();
+        if (!res.isSucc) {
+            this.header.innerText = `🔴 Disconnected`;
+
+            // Retry after 2 seconds
+            await new Promise(rs => { setTimeout(rs, 2000) });
+            await this.connect();
+        }
+
+        this.header.innerText = '🟢 ' + this.props.title;
+    }
+
+    async send() {
+        let ret = await this.client.callApi('Send', {
+            content: this.input.value
+        });
+
+        // Error
+        if (!ret.isSucc) {
+            alert(ret.err.message);
+            return;
+        }
+
+        // Success
+        this.input.value = '';
+    }
+
+    onChatMsg(msg: MsgChat) {
+        let li = document.createElement('li');
+        li.innerHTML = `<div class="content"></div><div class="time"></div>`;
+        (li.querySelector('.content') as HTMLDivElement).innerText = msg.content;
+        (li.querySelector('.time') as HTMLDivElement).innerText = msg.time.toLocaleTimeString();
+
+        this.list.appendChild(li);
+        this.list.scrollTo(0, this.list.scrollHeight);
+    }
+}

examples/chatroom/frontend/src/index.ts

@@ -0,0 +1,9 @@
+import { Chatroom } from "./Chatroom";
+
+document.querySelectorAll('.chat-room').forEach((v, i) => {
+    new Chatroom(v as HTMLDivElement, {
+        title: `Client #${i + 1}`
+    });
+});
+
+export { };

examples/chatroom/frontend/src/shared/protocols/MsgChat.ts

@@ -0,0 +1,4 @@
+export interface MsgChat {
+    content: string,
+    time: Date
+}

examples/chatroom/frontend/src/shared/protocols/PtlSend.ts

@@ -0,0 +1,7 @@
+export interface ReqSend {
+    content: string
+}
+
+export interface ResSend {
+    time: Date
+}

examples/chatroom/frontend/src/shared/protocols/serviceProto.ts

@@ -0,0 +1,75 @@
+import { ServiceProto } from 'tsrpc-proto';
+import { MsgChat } from './MsgChat';
+import { ReqSend, ResSend } from './PtlSend';
+
+export interface ServiceType {
+    api: {
+        "Send": {
+            req: ReqSend,
+            res: ResSend
+        }
+    },
+    msg: {
+        "Chat": MsgChat
+    }
+}
+
+export const serviceProto: ServiceProto<ServiceType> = {
+    "services": [
+        {
+            "id": 0,
+            "name": "Chat",
+            "type": "msg"
+        },
+        {
+            "id": 1,
+            "name": "Send",
+            "type": "api"
+        }
+    ],
+    "types": {
+        "MsgChat/MsgChat": {
+            "type": "Interface",
+            "properties": [
+                {
+                    "id": 0,
+                    "name": "content",
+                    "type": {
+                        "type": "String"
+                    }
+                },
+                {
+                    "id": 1,
+                    "name": "time",
+                    "type": {
+                        "type": "Date"
+                    }
+                }
+            ]
+        },
+        "PtlSend/ReqSend": {
+            "type": "Interface",
+            "properties": [
+                {
+                    "id": 0,
+                    "name": "content",
+                    "type": {
+                        "type": "String"
+                    }
+                }
+            ]
+        },
+        "PtlSend/ResSend": {
+            "type": "Interface",
+            "properties": [
+                {
+                    "id": 0,
+                    "name": "time",
+                    "type": {
+                        "type": "Date"
+                    }
+                }
+            ]
+        }
+    }
+};