lks/websocket-chat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch to object oriented message format

Browse Source
This commit is contained in:
Lucas Schumacher
2023-11-05 17:00:17 -05:00
parent cd57573288
commit 6d24f03648
4 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/Chat.vue
View File

@@ -5,7 +5,7 @@ const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const input = ref('')
const msgs = ref(['Server: Welcome to chat app', 'Server: This is an example message'])
const msgs = ref([{ username: 'Server', message: 'Welcome to Chat App' }, { username: 'Server', message: 'This is an example message' }])
let ws;
async function sendMsg(ev) {
@@ -29,9 +29,10 @@ onMounted(async () => {
window.location.hash = "/login"
};
ws.onmessage = function (event) {
console.log(event)
msgs.value.push(event.data)
ws.onmessage = async function (event) {
console.log("event data: " + event.data)
msgs.value.push(JSON.parse(event.data))
console.log("msgs:" + msgs.value)
};
console.log(ws)
@@ -42,12 +43,12 @@ onMounted(async () => {
<main>
<div class="overflow-auto position-relative pb-5">
<div v-for="msg in msgs" class="card m-3 text-bg-secondary">
<div class="card-body">{{ msg }}</div>
<div class="card-body">{{ msg.username }}: {{ msg.message }}</div>
</div>
<!--
<div v-for="msg in msgs" class="input-group">
<div class="alert alert-primary">User</div>
<div class="alert alert-secondary">{{ msg }}</div>
<div class="alert alert-primary">{{ msg.username }}</div>
<div class="alert alert-secondary">{{ msg.message }}</div>
</div>
-->
<form onsubmit="event.preventDefault();" class="container-fluid fixed-bottom mb-3">