vadim/microchat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Vadim
2026-02-17 20:43:23 +03:00
commit 55d819f935
22 changed files with 5874 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.editorconfig Normal file
View File

@@ -0,0 +1,8 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100

1
.gitattributes vendored Normal file
View File

@@ -0,0 +1 @@
* text=auto eol=lf

39
.gitignore vendored Normal file
View File

@@ -0,0 +1,39 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.eslintcache
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/
# Vite
*.timestamp-*-*.mjs

10
.oxlintrc.json Normal file
View File

@@ -0,0 +1,10 @@
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
"env": {
"browser": true
},
"categories": {
"correctness": "error"
}
}

6
.prettierrc.json Normal file
View File

@@ -0,0 +1,6 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}

9
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,9 @@
{
"recommendations": [
"Vue.volar",
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"oxc.oxc-vscode",
"esbenp.prettier-vscode"
]
}

48
README.md Normal file
View File

@@ -0,0 +1,48 @@
# chat-client
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Recommended Browser Setup
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
- Firefox:
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

1
env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

26
eslint.config.ts Normal file
View File

@@ -0,0 +1,26 @@
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginOxlint from 'eslint-plugin-oxlint'
import skipFormatting from 'eslint-config-prettier/flat'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{vue,ts,mts,tsx}'],
},
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
...pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
skipFormatting,
)

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

5272
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

43
package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "chat-client",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "run-s lint:*",
"lint:oxlint": "oxlint . --fix",
"lint:eslint": "eslint . --fix --cache",
"format": "prettier --write --experimental-cli src/"
},
"dependencies": {
"pinia": "^3.0.4",
"vue": "^3.5.28"
},
"devDependencies": {
"@tsconfig/node24": "^24.0.4",
"@types/node": "^24.10.13",
"@vitejs/plugin-vue": "^6.0.4",
"@vue/eslint-config-typescript": "^14.6.0",
"@vue/tsconfig": "^0.8.1",
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-oxlint": "~1.46.0",
"eslint-plugin-vue": "~10.8.0",
"jiti": "^2.6.1",
"npm-run-all2": "^8.0.4",
"oxlint": "~1.47.0",
"prettier": "3.8.1",
"typescript": "~5.9.3",
"vite": "^7.3.1",
"vite-plugin-vue-devtools": "^8.0.6",
"vue-tsc": "^3.2.4"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

47
src/App.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
import WebSocketComponent from '@/components/WebSocketComponent.vue'
import { ref } from 'vue'
const email = ref('vadim.olonin@gmail.com')
async function onSubmit() {
console.log('onSubmit')
try {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email: email.value }),
}
const res = await fetch('http://localhost:5173/login', options)
if (res.ok) {
const data = await res.json()
console.log(data)
}
} catch (error) {
console.log(error)
}
}
</script>
<template>
<div>
<div>chat</div>
<form @submit.prevent="onSubmit">
<div>login</div>
<div>
<input v-model="email" placeholder="email" type="email" />
<button>login</button>
</div>
</form>
<hr />
<div>
<WebSocketComponent />
</div>
</div>
</template>
<style scoped></style>

60
src/components/WebSocketComponent.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useSharedWebSocket, WsDataType } from '../composables/useSharedWebSocket'
const message = ref('')
const { messages, chats, isConnected, error, send } = useSharedWebSocket({
// onMessage: (data) => {
// console.log('Received message:', data)
// },
})
const sendMessage = () => {
if (message.value.trim()) {
send({
type: WsDataType.MESSAGE,
data: {
text: message.value,
},
})
message.value = ''
}
}
</script>
<template>
<div>
<div class="status" :class="{ isConnected, disconnected: !isConnected }">
status: {{ isConnected ? 'connected' : 'disconnected' }}
</div>
<div v-if="error" class="error">Error: {{ error }}</div>
<hr />
<div>
<div>chats</div>
<div v-for="chat in chats" :key="chat.id">
<div>{{ chat.id }}</div>
<div>{{ chat.users }}</div>
</div>
</div>
<hr />
<div>
<div>messages:</div>
<div v-for="message in messages" :key="message.id">
{{ message }}
</div>
</div>
<div class="controls">
<input v-model="message" @keyup.enter="sendMessage" placeholder="Type message..." />
<button @click="sendMessage" :disabled="!isConnected">Send</button>
</div>
</div>
</template>
<style scoped></style>

129
src/composables/useSharedWebSocket.ts Normal file
View File

@@ -0,0 +1,129 @@
import { ref, onUnmounted, onMounted } from 'vue'
export interface Message {
id: number
text: string
userId: string
createdAt: string
}
export interface Chat {
id: string
type_id: number
users: User[]
}
export interface User {
id: number
email: string
}
export interface WsData {
type: WsDataType
// data: Chat | Message | User | User[] | Message[] | Chat[]
data: {text: string}
}
export enum WsDataType {
CHAT = 'CHAT',
USER = 'USER',
MESSAGE = 'MESSAGE',
STATUS = 'STATUS',
ERROR = 'ERROR',
}
export enum COMMAND {
CONNECT = 'CONNECT',
SEND = 'SEND',
CLOSE = 'CLOSE',
}
export function useSharedWebSocket(options?: { url?: string; autoConnect?: true }) {
const url = options?.url || 'ws://localhost:3000/ws'
const autoConnect = options?.autoConnect ?? true
console.log('useSharedWebSocket', url, autoConnect)
const messages = ref<Message[]>([])
const chats = ref<Chat[]>([])
const users = ref<unknown[]>([])
const isConnected = ref(false)
const error = ref<string>()
const worker = ref<SharedWorker>()
const initWorker = () => {
if (!window.SharedWorker) {
console.warn('SharedWorker not supported')
error.value = 'SharedWorker not supported'
}
worker.value = new SharedWorker(new URL('@/workers/worker.js', import.meta.url), {
type: 'module',
})
worker.value.port.onmessage = (event) => {
const { type, data, connected, message } = event.data
console.log(event.data)
switch (type) {
case WsDataType.USER:
console.log('USER')
break
case WsDataType.CHAT:
console.log('chat')
chats.value = data
break
case WsDataType.MESSAGE:
messages.value.push(data)
// if (options.onMessage) {
// options.onMessage(data)
// }
break
case WsDataType.STATUS:
isConnected.value = connected
break
case WsDataType.ERROR:
error.value = message
break
}
}
worker.value.port.postMessage({
command: COMMAND.CONNECT,
data: { url },
})
}
const send = (data: WsData) => {
if (worker.value) {
worker.value.port.postMessage({
command: COMMAND.SEND,
data: data,
})
}
}
const close = () => {
if (worker.value) {
worker.value.port.postMessage({ command: COMMAND.CLOSE })
}
}
onMounted(() => {
if (autoConnect) initWorker()
})
onUnmounted(() => {
if (worker.value) close()
})
return {
messages,
chats,
isConnected,
error,
send,
close,
initWorker,
}
}

9
src/main.ts Normal file
View File

@@ -0,0 +1,9 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

88
src/workers/worker.js Normal file
View File

@@ -0,0 +1,88 @@
let socket
let clients = []
let reconnectAttempts = 0
const MAX_RECONNECT_ATTEMPTS = 5
function connectWebSocket(url) {
try {
socket = new WebSocket(url)
socket.onopen = () => {
console.log('[Shared Worker] WebSocket connected')
reconnectAttempts = 0
broadcast({ type: 'STATUS', connected: true })
}
socket.onmessage = (event) => {
console.log('[Shared Worker] Get message')
const data = JSON.parse(event.data)
broadcast(data)
}
socket.onclose = () => {
console.log('[Shared Worker] WebSocket disconnected')
broadcast({ type: 'STATUS', connected: false })
// if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
// reconnectAttempts++
// setTimeout(() => {
// console.log(`[Shared Worker] Reconnecting (attempt ${reconnectAttempts})...`)
// connectWebSocket(url)
// }, 1000 * reconnectAttempts)
// }
}
socket.onerror = (error) => {
console.error('[Shared Worker] WebSocket error:', error)
broadcast({ type: 'ERROR', message: error.message })
}
} catch (error) {
console.error('[Shared Worker] Failed to create WebSocket:', error)
}
}
function broadcast(message) {
clients.forEach((port) => port.postMessage(message))
}
onconnect = function (event) {
const port = event.ports[0]
clients.push(port)
port.onmessage = function (e) {
const { command, data } = e.data
console.log('Received command', command, data)
switch (command) {
case 'CONNECT':
if (!socket || socket.readyState !== WebSocket.OPEN) {
connectWebSocket(data.url)
}
break
case 'SEND':
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify(data))
} else {
port.postMessage('[Shared Worker] WebSocket not open. Cannot send message.')
}
break
case 'CLOSE':
if (socket && socket.readyState === WebSocket.OPEN) {
socket.close()
}
break
}
}
const status = { type: 'STATUS' }
if (socket) {
status.connected = socket.readyState === WebSocket.OPEN
} else {
status.connected = false
}
port.postMessage(status)
}

12
tsconfig.app.json Normal file
View File

@@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}

11
tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

19
tsconfig.node.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node24/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

23
vite.config.ts Normal file
View File

@@ -0,0 +1,23 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
// vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
server: {
proxy: {
'/login': 'http://localhost:3000',
},
},
})