components/MessageArea.vue

@@ -40,9 +40,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
+import type { MessageResponse, ScrollPosition, UserResponse, WSMessage } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
 import { generateIrcColor } from '#imports';
+import { WSEvent } from '~/types/enums';
 
 const { getDisplayName } = useProfile()
 const { fetchMe } = useApi()
@@ -195,17 +196,20 @@ if (accessToken && apiBase) {
 	ws.addEventListener("message", async (event) => {
 		console.log("event data:", event.data);
 		console.log("message uuid:", event.data.uuid);
-		const parsedData = JSON.parse(event.data);
-		console.log("[MSG] parsed message:", parsedData);
+		const message: WSMessage = JSON.parse(event.data);
+		console.log("[MSG] parsed message:", message);
 		
-		console.log("parsed message type:", messagesType.value[parsedData.uuid]);
-		console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
-		pushMessage(parsedData);
+		if (message.event == WSEvent.MessageSend) {
+			const messageObject = message.entity as MessageResponse;
+			console.log("parsed message type:", messagesType.value[messageObject.uuid]);
+			console.log("parsed message timestamp:", messageTimestamps.value[messageObject.uuid]);
+			pushMessage(messageObject);
 			await nextTick();
 			if (messagesElement.value) {
 				console.log("scrolling to bottom");
 				scrollToBottom(messagesElement.value);
 			}
+		}
 	});
 
 } else {

types/enums.ts

@@ -9,3 +9,10 @@ export const enum Permission {
 	BanMember = 128,
 	KickMember = 256
 }
+
+export const enum WSEvent {
+	MessageSend,
+	MessageDelete,
+	MessageEdit,
+	Error
+}

types/interfaces.ts

@@ -1,3 +1,5 @@
+import type { WSEvent } from "./enums"
+
 export interface ChannelPermissionResponse {
 	channel_uuid: string,
 	role_uuid: string,
@@ -56,6 +58,19 @@ export interface MessageResponse {
 	member: GuildMemberResponse,
 }
 
+export interface IMessageDelete {
+	uuid: string
+}
+
+export interface WSError {
+	message: string
+}
+
+export interface WSMessage {
+	event: WSEvent,
+	entity: MessageResponse | IMessageDelete | WSError
+}
+
 export interface InviteResponse {
 	id: string,
 	user_uuid: string,