Implement websockets

[shinobiseb]

Key Concepts for Real-Time Chat Updates

WebSocket Communication

• WebSockets allow for two-way communication between the client and server. This means that your server can push updates to connected clients without the clients having to poll the server continuously.

Setting Up a WebSocket Server

• Integrate a WebSocket server in your Next.js application to handle incoming connections from clients. This server will listen for changes from the database and broadcast updates to all connected clients.

Database Change Tracking

• Use a MongoDB Change Stream (like your watchMessages function) to monitor changes to your chat documents. When a new message is added or an existing message is updated, the Change Stream will trigger an event.

Client-Side WebSocket Connection

• On the client side (in your chat window component), establish a WebSocket connection to the server when the component mounts. This connection will listen for messages from the server.

Handling Incoming Messages

• When the WebSocket connection receives a message (such as a new chat message), update the local state in your chat window component to reflect the new message. This will cause the component to re-render and display the latest messages.

Sending Messages

• When a user sends a message, you might still want to use a regular API request to save the message to the database. Once confirmed, you can then emit this new message to all connected clients via the WebSocket server.

[shinobiseb]

Sockets and refetch function work however client side "socket.onmessage" is only being fired when a user sends a message

The intended function is for whenever a refetch message is sent via websocket, the client will fetchMessagesFromChat.

Need to refactor logic within server likely

[shinobiseb]

Also, need to find a way to implement watch.ts still (watchMessages()) for better performance likely