adb/matrix-chat
adb/matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

dynamic loaded chat and PWA

Browse Source
This commit is contained in:
adb 2020-11-08 23:36:13 +01:00
parent fd4fff2a78
commit 451b30c3f2
8 changed files with 74 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
api.js
View File

@ -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, "&lt").replace(/>/g, "&gt").replace(/\n/g, "<br>")
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"}))
})

4
public/index.html
View File

@ -3,6 +3,10 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- PWA support -->
<link rel="manifest" href="./manifest.json"/>
<meta name="theme-color" content="#2F3BA2"/>
<meta name="description" content="open chat"/>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
<title><%= htmlWebpackPlugin.options.title %></title>

9
public/manifest.json Normal file
View File

@ -0,0 +1,9 @@
{
"name": "open chat",
"short_name": "open chat",
"start_url": "/",
"display": "standalone",
"background_color": "#14181b",
"theme_color": "#00BCD4",
"orientation": "portrait-primary"
}

1
src/components/messageReceive.vue
View File

@ -32,5 +32,6 @@ export default {
background-color: #42b983;
border-radius: 1rem 1rem 1rem 0;
text-align: left;
word-break: break-word;
}
</style>

14
src/components/newMessage.vue
View File

@ -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 +=
`<div class="messageContainer" data-v-032da2b2="">
<div class="message" data-v-032da2b2="">
${this.msg.content.text
.replace(/</g, "&lt")
.replace(/>/g, "&gt")
.replace(/\n/g, "<br>")}
</div>
</div>`;
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
}
}
}

12
src/components/topBanner.vue
View File

@ -6,8 +6,8 @@
</router-link>
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
<div id="container">
<div id="chatName">{{roomInfo.name}}</div>
<div id="users">{{roomInfo.user.length}} members</div>
<div id="chatName">{{chatroom.name}}</div>
<div id="users">{{chatroom.user.length}} members</div>
</div>
<icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
</div>
@ -15,6 +15,7 @@
</template>
<script>
import icon from '@/components/icon.vue';
import main from '@/main.js';
export default {
name: "topBanner",
@ -23,10 +24,7 @@ export default {
},
data(){
return {
roomInfo: {
name: "open chat",
user: []
}
chatroom: main.data().chatroom
}
}
}
@ -37,7 +35,7 @@ export default {
width: 100%;
height: 3rem;
background-color: #1d1d1d;
box-shadow: 0 3px 10px #111;
box-shadow: 0 0px 5px #111;
}
.smallIcon{
top: 0.25rem;

45
src/main.js
View File

@ -27,12 +27,12 @@ const router = new VueRouter({
]
})
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
}).$mount('#app')
let chatroom = {
name: "open chat",
user: [],
username: "you",
messages: []
};
export default {
mounted() {
@ -40,10 +40,7 @@ export default {
},
data(){
return {
roomInfo: {
name: "open chat",
user: []
}
chatroom: chatroom
}
},
methods: {
@ -63,9 +60,22 @@ export default {
}
}
const wsurl = 'ws://127.0.0.1:8090'
const socket = new WebSocket(wsurl)
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App},
data(){
return {
chatroom: chatroom
}
}
}).$mount('#app')
const wsurl = 'ws://127.0.0.1:8090'
//const wsurl = 'wss://chat.adb.sh:8080'
const socket = new WebSocket(wsurl)
function element(id){ return document.getElementById(id)}
socket.onopen = () => {
@ -86,16 +96,11 @@ socket.onmessage = (e) => {
if (msg.type === 'error') show_error(msg.content)
else if (msg.type === 'route') router.push({path: msg.path})
else if (msg.type === 'room'){
this.roomInfo.user = msg.user
chatroom.user = msg.user
}
else if (msg.type === "info") chatroom.username = msg.username
else if (msg.type === 'message'){
//just for now, ik it's dirty
element('messages').innerHTML +=
`<div class="messageContainer" data-v-a1576e28="">
<div class="message" data-v-a1576e28="">
${msg.content.text}
</div>
</div>`;
chatroom.messages.push(msg)
let msgContainer = document.getElementById("messagesContainer")
if (msgContainer.scrollHeight < msgContainer.scrollTop + 1000) msgContainer.scrollTo(0, msgContainer.scrollHeight)
}

20
src/views/chat.vue
View File

@ -2,9 +2,15 @@
<div>
<div ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages">
<p style="margin-left: 1rem; font-style: italic;">You entered the chat</p>
<message style="display: none;" />
<messageReceive style="display: none;" />
<p style="text-align: center; font-style: italic;">you entered the chat</p>
<div v-for="(message, i) in chatroom.messages" :key="message.time">
<div v-if="message.content.user !== chatroom.username && function(){
return i===0 || chatroom.messages[i-1].content.user!==message.content.user;}()"
style="margin-left: 2rem; margin-top: 1rem">{{message.content.user}}
</div>
<messageReceive v-if="message.content.user !== chatroom.username" :msg=message.content.text />
<message v-if="message.content.user === chatroom.username" :msg=message.content.text />
</div>
</div>
</div>
<newMessage />
@ -16,7 +22,8 @@
import message from '@/components/message.vue';
import messageReceive from '@/components/messageReceive.vue';
import newMessage from '@/components/newMessage.vue';
import topBanner from "@/components/topBanner";
import topBanner from '@/components/topBanner.vue';
import main from '@/main.js';
export default {
name: 'chat',
@ -25,6 +32,11 @@ export default {
messageReceive,
newMessage,
topBanner
},
data(){
return {
chatroom: main.data().chatroom
}
}
}
</script>