commit effbf7dd66f98f4b7cfb3813e6e56055d2aa6273 · gmstn.systems/gemstone-app

+22 -11

app/hooks/useWebSocket.ts

···

       1
       1
       +
       import type { ShardMessage } from "@/app/lib/types/messages";

     

       2
       2
       +
       import {

     

       3
       3
       +
           validateHistoryMessage,

     

       4
       4
       +
           validateNewMessage,

     

       5
       5
       +
           validateWsMessageString,

     

       6
       6
       +
           validateWsMessageType,

     

       7
       7
       +
       } from "@/app/lib/validators";

     

       1
       8
        
       import { useEffect, useRef, useState } from "react";

     

       2
       9
        
       

     

       3
       10
        
       export function useWebSocket(url: string) {

     

       4
       4
       -
           const [messages, setMessages] = useState<

     

       5
       5
       -
               { text: string; timestamp: string }[]

     

       6
       6
       -
           >([]);

     

       11
       11
       +
           const [messages, setMessages] = useState<ShardMessage[]>([]);

     

       7
       12
        
           const [isConnected, setIsConnected] = useState(false);

     

       8
       13
        
           const ws = useRef<WebSocket | null>(null);

     

       9
       14
        
       

     
···

       17
       22
        
               };

     

       18
       23
        
       

     

       19
       24
        
               ws.current.onmessage = (event) => {

     

       20
       20
       -
                   const data = JSON.parse(event.data);

     

       25
       25
       +
                   const eventData = validateWsMessageString(event.data);

     

       26
       26
       +
                   if (!eventData) return;

     

       27
       27
       +
       

     

       28
       28
       +
                   const data: unknown = JSON.parse(eventData);

     

       29
       29
       +
                   const wsMessage = validateWsMessageType(data);

     

       30
       30
       +
                   if (!wsMessage) return;

     

       21
       31
        
       

     

       22
       22
       -
                   if (data.type === "shard/history") {

     

       23
       23
       -
                       setMessages(data.messages);

     

       24
       24
       -
                   } else if (data.type === "shard/message") {

     

       25
       25
       -
                       setMessages((prev) => [

     

       26
       26
       -
                           ...prev,

     

       27
       27
       -
                           { text: data.text, timestamp: data.timestamp },

     

       28
       28
       -
                       ]);

     

       32
       32
       +
                   if (wsMessage.type === "shard/history") {

     

       33
       33
       +
                       const history = validateHistoryMessage(wsMessage);

     

       34
       34
       +
                       if (!history) return;

     

       35
       35
       +
                       if (history.messages) setMessages(history.messages);

     

       36
       36
       +
                   } else {

     

       37
       37
       +
                       const message = validateNewMessage(wsMessage);

     

       38
       38
       +
                       if (!message) return;

     

       39
       39
       +
                       setMessages((prev) => [...prev, message]);

     

       29
       40
        
                   }

     

       30
       41
        
               };

     

       31
       42

+1 -2

app/index.tsx

···

       1
       1
        
       import ChatComponent from "@/app/components/ChatComponent";

     

       2
       2
       -
       import { Text, View } from "react-native";

     

       2
       2
       +
       import { View } from "react-native";

     

       3
       3
        
       

     

       4
       4
        
       export default function Index() {

     

       5
       5
        
           return (

     
···

       10
       10
        
                       alignItems: "center",

     

       11
       11
        
                   }}

     

       12
       12
        
               >

     

       13
       13
       -
                   <Text>Edit app/index.tsx to edit this screen.</Text>

     

       14
       13
        
                   <ChatComponent />

     

       15
       14
        
               </View>

     

       16
       15
        
           );

+22

app/lib/types/messages.ts

···

       1
       1
       +
       import { z } from "zod";

     

       2
       2
       +
       

     

       3
       3
       +
       export const websocketMessageSchema = z.object({

     

       4
       4
       +
           type: z.union([z.literal("shard/message"), z.literal("shard/history")]),

     

       5
       5
       +
       });

     

       6
       6
       +
       

     

       7
       7
       +
       export type WebsocketMessage = z.infer<typeof websocketMessageSchema>;

     

       8
       8
       +
       

     

       9
       9
       +
       export const shardMessageSchema = websocketMessageSchema.extend({

     

       10
       10
       +
           type: z.literal("shard/message"),

     

       11
       11
       +
           text: z.string(),

     

       12
       12
       +
           timestamp: z.coerce.date(),

     

       13
       13
       +
       });

     

       14
       14
       +
       

     

       15
       15
       +
       export type ShardMessage = z.infer<typeof shardMessageSchema>;

     

       16
       16
       +
       

     

       17
       17
       +
       export const historyMessageSchema = websocketMessageSchema.extend({

     

       18
       18
       +
           type: z.literal("shard/history"),

     

       19
       19
       +
           messages: z.optional(z.array(shardMessageSchema)),

     

       20
       20
       +
       });

     

       21
       21
       +
       

     

       22
       22
       +
       export type HistoryMessage = z.infer<typeof historyMessageSchema>;

-39

app/lib/validator.ts

···

       1
       1
       -
       export function assertShardMessage(

     

       2
       2
       -
           json: unknown,

     

       3
       3
       -
       ): asserts json is ShardMessage {

     

       4
       4
       -
           if (typeof json !== "object") {

     

       5
       5
       -
               throw new Error("not a js object");

     

       6
       6
       -
           }

     

       7
       7
       -
       

     

       8
       8
       -
           const candidate = json as Record<string, unknown>;

     

       9
       9
       -
       

     

       10
       10
       -
           if (candidate.type !== "shard/message") {

     

       11
       11
       -
               throw new Error("Invalid type");

     

       12
       12
       -
           }

     

       13
       13
       -
       

     

       14
       14
       -
           if (typeof candidate.text !== "string") {

     

       15
       15
       -
               throw new Error("Invalid text");

     

       16
       16
       -
           }

     

       17
       17
       -
       

     

       18
       18
       -
           const timestamp = new Date(candidate.timestamp as string);

     

       19
       19
       -
       

     

       20
       20
       -
           if (!(timestamp instanceof Date)) {

     

       21
       21
       -
               throw new Error("Invalid timestamp");

     

       22
       22
       -
           }

     

       23
       23
       -
       }

     

       24
       24
       -
       

     

       25
       25
       -
       // example. we will use zod in the future.

     

       26
       26
       -
       export const validateShardMessage = (json: unknown) => {

     

       27
       27
       -
           try {

     

       28
       28
       -
               assertShardMessage(json);

     

       29
       29
       -
               return { success: true, data: json };

     

       30
       30
       -
           } catch (e: unknown) {

     

       31
       31
       -
               return { error: e };

     

       32
       32
       -
           }

     

       33
       33
       -
       };

     

       34
       34
       -
       

     

       35
       35
       -
       export interface ShardMessage {

     

       36
       36
       -
           type: "shard/message";

     

       37
       37
       -
           text: string;

     

       38
       38
       -
           timestamp: Date;

     

       39
       39
       -
       }

+64

app/lib/validators.ts

···

       1
       1
       +
       import {

     

       2
       2
       +
           historyMessageSchema,

     

       3
       3
       +
           shardMessageSchema,

     

       4
       4
       +
           websocketMessageSchema,

     

       5
       5
       +
       } from "@/app/lib/types/messages";

     

       6
       6
       +
       import { z } from "zod";

     

       7
       7
       +
       

     

       8
       8
       +
       export const validateWsMessageString = (data: unknown) => {

     

       9
       9
       +
           const { success, error, data: message } = z.string().safeParse(data);

     

       10
       10
       +
           if (!success) {

     

       11
       11
       +
               console.error("Error decoding websocket message");

     

       12
       12
       +
               console.error(error);

     

       13
       13
       +
               return;

     

       14
       14
       +
           }

     

       15
       15
       +
           return message;

     

       16
       16
       +
       };

     

       17
       17
       +
       

     

       18
       18
       +
       export const validateWsMessageType = (data: unknown) => {

     

       19
       19
       +
           const {

     

       20
       20
       +
               success: wsMessageSuccess,

     

       21
       21
       +
               error: wsMessageError,

     

       22
       22
       +
               data: wsMessage,

     

       23
       23
       +
           } = websocketMessageSchema.loose().safeParse(data);

     

       24
       24
       +
           if (!wsMessageSuccess) {

     

       25
       25
       +
               console.error(

     

       26
       26
       +
                   "Error parsing websocket message. The data might be the wrong shape.",

     

       27
       27
       +
               );

     

       28
       28
       +
               console.error(wsMessageError);

     

       29
       29
       +
               return;

     

       30
       30
       +
           }

     

       31
       31
       +
           return wsMessage;

     

       32
       32
       +
       };

     

       33
       33
       +
       

     

       34
       34
       +
       export const validateHistoryMessage = (data: unknown) => {

     

       35
       35
       +
           const {

     

       36
       36
       +
               success: historySuccess,

     

       37
       37
       +
               error: historyError,

     

       38
       38
       +
               data: history,

     

       39
       39
       +
           } = historyMessageSchema.safeParse(data);

     

       40
       40
       +
           if (!historySuccess) {

     

       41
       41
       +
               console.error(

     

       42
       42
       +
                   "History message schema parsing failed. Did your type drift?",

     

       43
       43
       +
               );

     

       44
       44
       +
               console.error(historyError);

     

       45
       45
       +
               return;

     

       46
       46
       +
           }

     

       47
       47
       +
           return history;

     

       48
       48
       +
       };

     

       49
       49
       +
       

     

       50
       50
       +
       export const validateNewMessage = (data: unknown) => {

     

       51
       51
       +
           const {

     

       52
       52
       +
               success: messageSuccess,

     

       53
       53
       +
               error: messageError,

     

       54
       54
       +
               data: message,

     

       55
       55
       +
           } = shardMessageSchema.safeParse(data);

     

       56
       56
       +
           if (!messageSuccess) {

     

       57
       57
       +
               console.error(

     

       58
       58
       +
                   "New message schema parsing failed. Did your type drift?",

     

       59
       59
       +
               );

     

       60
       60
       +
               console.error(messageError);

     

       61
       61
       +
               return;

     

       62
       62
       +
           }

     

       63
       63
       +
           return message;

     

       64
       64
       +
       };

+2 -1

package.json

···

       40
       40
        
               "react-native-safe-area-context": "~5.6.0",

     

       41
       41
        
               "react-native-screens": "~4.16.0",

     

       42
       42
        
               "react-native-web": "~0.21.0",

     

       43
       43
       -
               "react-native-worklets": "0.5.1"

     

       43
       43
       +
               "react-native-worklets": "0.5.1",

     

       44
       44
       +
               "zod": "^4.1.12"

     

       44
       45
        
           },

     

       45
       46
        
           "devDependencies": {

     

       46
       47
        
               "@types/react": "~19.1.0",

pnpm-lock.yaml

···

       83
       83
        
             react-native-worklets:

     

       84
       84
        
               specifier: 0.5.1

     

       85
       85
        
               version: 0.5.1(@babel/core@7.28.4)(react-native@0.81.4(@babel/core@7.28.4)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)

     

       86
       86
       +
             zod:

     

       87
       87
       +
               specifier: ^4.1.12

     

       88
       88
       +
               version: 4.1.12

     

       86
       89
        
           devDependencies:

     

       87
       90
        
             '@types/react':

     

       88
       91
        
               specifier: ~19.1.0

     
···

       4339
       4342
        
       

     

       4340
       4343
        
         zod@3.25.76:

     

       4341
       4344
        
           resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}

     

       4345
       4345
       +
       

     

       4346
       4346
       +
         zod@4.1.12:

     

       4347
       4347
       +
           resolution: {integrity: sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==}

     

       4342
       4348
        
       

     

       4343
       4349
        
       snapshots:

     

       4344
       4350
        
       

     
···

       9507
       9513
        
             zod: 3.25.76

     

       9508
       9514
        
       

     

       9509
       9515
        
         zod@3.25.76: {}

     

       9516
       9516
       +
       

     

       9517
       9517
       +
         zod@4.1.12: {}