From 451b30c3f21409f015d4aa5c8ba1f5f2c854d6e5 Mon Sep 17 00:00:00 2001 From: adb Date: Sun, 8 Nov 2020 23:36:13 +0100 Subject: [PATCH] dynamic loaded chat and PWA --- api.js | 19 ++++++++------ public/index.html | 4 +++ public/manifest.json | 9 +++++++ src/components/messageReceive.vue | 1 + src/components/newMessage.vue | 14 +++------- src/components/topBanner.vue | 12 ++++----- src/main.js | 43 +++++++++++++++++-------------- src/views/chat.vue | 20 +++++++++++--- 8 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 public/manifest.json diff --git a/api.js b/api.js index 52bc29c..c18fd77 100644 --- a/api.js +++ b/api.js @@ -27,7 +27,7 @@ wss.on('connection', (ws, req) => { console.log(`${req.socket.remoteAddress} connected`) ws.on('message', msgJSON => { let msg = JSON.parse(msgJSON) - console.log(`${req.socket.remoteAddress} => ${msgJSON}`) + console.log(`${req.socket.remoteAddress} (${thisuser}) => ${msgJSON}`) if (msg.type === 'message') if (thisuser === ""){ ws.send(JSON.stringify({type: "error", content: "please login before writing"})) @@ -37,23 +37,26 @@ wss.on('connection', (ws, req) => { else{ msg.content.user = thisuser msg.content.text = msg.content.text.replace(//g, ">").replace(/\n/g, "
") - wss.clients.forEach(client => { - if (client !== ws) client.send(JSON.stringify(msg))}) + wss.clients.forEach(client => client.send(JSON.stringify(msg))) } else if (msg.type === 'login' && msg.content.user !== ""){ - if (msg.content.user >= 20) ws.send(JSON.stringify({type: "error", content: "username is too long"})) - else if (function(){ - for (let i = 0; i < user.length; i++) if (user[i] === msg.content.user) return true - return false - }() === true) ws.send(JSON.stringify({type: "error", content: "username already exist"})) + if (msg.content.user.length >= 20) ws.send(JSON.stringify({type: "error", content: "username is too long"})) + else if (msg.content.user === "you" || user.indexOf(msg.content.user) !== -1) + ws.send(JSON.stringify({type: "error", content: "username already exist"})) else{ thisuser = msg.content.user user.push(msg.content.user) ws.send('{"type":"route","path":"/chat"}') + ws.send(JSON.stringify({type: "info", username: thisuser})) wss.clients.forEach(client => client.send(JSON.stringify({type: "room", name: "open chat", user: user}))) } } }) + ws.on('close', () => { + user.splice(user.indexOf(thisuser), 1); + console.log(`${req.socket.remoteAddress} (${thisuser}) closed`) + }) + ws.send(JSON.stringify({type: "info", time: Date.now(), content: "connected"})) }) \ No newline at end of file diff --git a/public/index.html b/public/index.html index 212c8ea..61a5cfe 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,10 @@ + + + + <%= htmlWebpackPlugin.options.title %> diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..1aa6a1e --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,9 @@ +{ + "name": "open chat", + "short_name": "open chat", + "start_url": "/", + "display": "standalone", + "background_color": "#14181b", + "theme_color": "#00BCD4", + "orientation": "portrait-primary" +} \ No newline at end of file diff --git a/src/components/messageReceive.vue b/src/components/messageReceive.vue index 5c4e5ea..2a1b2ff 100644 --- a/src/components/messageReceive.vue +++ b/src/components/messageReceive.vue @@ -32,5 +32,6 @@ export default { background-color: #42b983; border-radius: 1rem 1rem 1rem 0; text-align: left; + word-break: break-word; } \ No newline at end of file diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue index bbf865a..2645085 100644 --- a/src/components/newMessage.vue +++ b/src/components/newMessage.vue @@ -22,16 +22,6 @@ export default { if (this.msg.content.text !== "") { this.msg.time = Date.now() main.methods.sendWebSocket(this.msg) - //just for now, ik it's dirty - document.getElementById('messages').innerHTML += - `
-
- ${this.msg.content.text - .replace(//g, ">") - .replace(/\n/g, "
")} -
-
`; this.msg.content.text = "" document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)" document.getElementById("newMessageInput").style.height = "1.25rem" @@ -54,9 +44,11 @@ export default { type: "message", time: Date.now(), content: { + user: "you", text: "" } - } + }, + chatroom: main.data().chatroom } } } diff --git a/src/components/topBanner.vue b/src/components/topBanner.vue index 67bbe1f..6b7a563 100644 --- a/src/components/topBanner.vue +++ b/src/components/topBanner.vue @@ -6,8 +6,8 @@
-
{{roomInfo.name}}
-
{{roomInfo.user.length}} members
+
{{chatroom.name}}
+
{{chatroom.user.length}} members
@@ -15,6 +15,7 @@