global-object-client

Try this

$3

index.html

``html











`typescript
import { GlobalObject } from 'global-object-client'

import { Chat } from './chat'

interface Chat {
id: string
name: string
}

;(async () => {
const chatsSection = document.querySelector('#chats') as HTMLDivElement

const listOfChats = document.querySelector('#listOfChats') as HTMLDivElement

const chats = await GlobalObject.get(SERVER_URL + '/chats')

function render() {
if (!Array.isArray(chats)) return

listOfChats.innerHTML = ''

chats.forEach(({ id, name }) => {
const chat = document.createElement('button')

chat.classList.add('chat')

chat.textContent = name

chat.addEventListener('click', () => {
chatsSection.style.display = 'none'
Chat(id)
})

listOfChats.appendChild(chat)
})
}

render()

chats.addEventListener('change', render)
})()
`

src/chats.ts

`typescript
import { GlobalObject } from 'global-object-client'

import { SERVER_URL } from './env.json'

interface Message {
author: string
text: string
time: number
}

const userName = localStorage.getItem('userName') || Math.random().toString()

localStorage.setItem('userName', userName)

const messages = document.querySelector('.messages') as HTMLDivElement
const inputMessage = document.querySelector('.inputMessage') as HTMLInputElement
const sendBtn = document.querySelector('.sendBtn') as HTMLButtonElement
const chat = document.querySelector('#chat') as HTMLDivElement

export function Chat(id: string) {
chat.style.display = 'block'

GlobalObject.get(SERVER_URL + /chat/${id}).then((gObj) => {
function render() {
if (!Array.isArray(gObj)) return
if (GlobalObject.getState(gObj) !== 'added') return

messages.innerHTML = ''

gObj.forEach(({ text, time, author }) => {
const messageDiv = document.createElement('div')
const messageDivInner = document.createElement('div')
const timeSpan = document.createElement('span')
const textSpan = document.createElement('span')
messageDiv.classList.add('message')
if (author === userName) messageDiv.classList.add('myMessage')

textSpan.classList.add('text')
textSpan.textContent = text

timeSpan.classList.add('time')
const date = new Date(time)
timeSpan.textContent =
date.getHours() +
':' +
(date.getMinutes() < 10 ? '0' : '') +
date.getMinutes()

messageDivInner.appendChild(textSpan)
messageDivInner.appendChild(timeSpan)
messageDiv.appendChild(messageDivInner)
messages.appendChild(messageDiv)
})
}

function sendMassage() {
if (!Array.isArray(gObj) || !inputMessage.value.trim()) return

const message: Message = {
author: userName,
text: inputMessage.value,
time: Date.now(),
}

gObj.push(message)
inputMessage.value = ''
}

render()

gObj.addEventListener('change', render)
gObj.addEventListener('remove', render)

sendBtn.addEventListener('click', sendMassage)
document.addEventListener(
'keypress',
({ key }) => key === 'Enter' && sendMassage()
)
})
}
`

$3

main.ts

`typescript
import { GlobalObject } from 'global-object-server'

import express from 'express'
import { createServer } from 'node:http'

interface Message {
author: string
text: string
time: number
}

interface Chat {
id: string
name: string
}

const app = express()

app.use(function (_, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'X-Requested-With')
res.header('Access-Control-Allow-Headers', 'Content-Type')
res.header(
'Access-Control-Allow-Methods',
'PUT, GET, POST, DELETE, OPTIONS'
)
next()
})

const server = createServer(app)

GlobalObject.config.server = server

const chats = GlobalObject.create([])

for (let i = 1; i <= 10; i++) {
chats[i - 1] = {
name: String(i),
id: String(i),
}

const chat = GlobalObject.create([
{
author: 'Server',
text: Chat ${i} started,
time: Date.now(),
},
])

GlobalObject.send(chat, PORT, /chat/${i})
}

GlobalObject.send(chats, PORT, '/chats')
``