Can you provide sample code for Zustand real-time updates

javascript
import create from 'zustand';
import { immer } from 'zustand/middleware/immer';

// Define the store
const useStore = create(
  immer((set, get) => ({
    messages: [],
    addMessage: (message) =>
      set((state) => {
        state.messages.push(message);
      }),
    removeMessage: (index) =>
      set((state) => {
        state.messages.splice(index, 1);
      }),
  }))
);

// Real-time updates
const socket = new WebSocket('ws://your-websocket-server.com');

socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  useStore.getState().addMessage(message);
};

// Usage in a component
const MessagesComponent = () => {
  const messages = useStore((state) => state.messages);

  return (
    <div>
      <h2>Messages</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>
            {message}
            <button onClick={() => useStore.getState().removeMessage(index)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

In this example, we're using the `immer` middleware to handle state updates in an immutable way. The store has two actions: `addMessage` and `removeMessage`.

To implement real-time updates, we're using a WebSocket connection to receive new messages from the server. Whenever a new message is received, we call the `addMessage` action to update the store.

In the `MessagesComponent`, we're using the `useStore` hook to access the `messages` state and render the list of messages. Each message has a "Remove" button that calls the `removeMessage` action to remove the message from the store.

This is a basic example, but you can expand on it to handle more complex real-time updates and state management scenarios. The key points are:

1. Use the `immer` middleware to handle immutable state updates.
2. Implement a WebSocket connection to receive real-time updates.
3. Call the appropriate store actions to update the state when new data is received.
4. Use the `useStore` hook to access the state and actions in your components.

Remember to replace `'ws://your-websocket-server.com'` with the actual WebSocket server URL you're using.