how do L launch langgraph for stream printing data in front_end.js?

[jeremygan2021]

Checked other resources

• I added a very descriptive title to this question.
• I searched the LangChain documentation with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.

Commit to Help

• I commit to help with one of those options 👆

Example Code

async def process_message_async(self, player_input, messages=None, thread_id=None):
    if messages is None:
        messages = []
    
    if thread_id is None:
        thread_id = id(messages)  # Use the memory address of the messages list as a unique identifier
    
    # Add new user message
    messages.append(HumanMessage(content=player_input))
    
    # Build the state
    state = {'messages': messages}
    
    try:
        # Call the asynchronous `ainvoke` method
        result = await self.app.ainvoke(
            state,
            config={
                "configurable": {
                    "thread_id": thread_id,
                    "checkpoint_ns": "default",  # Can modify namespace if needed
                }
            }
        )
        
        # Get AI's response
        ai_message = result['messages'][-1]
        
        # Add AI's response to the message list
        messages.append(ai_message)
        
        # Return AI's response content and the updated message list
        return ai_message.content, messages
    
    except asyncio.TimeoutError:
        print("Connection timeout, please try again.")
        return "Sorry, the connection timed out while processing your request.", messages
    except Exception as e:
        print(f"An error occurred while processing the message: {str(e)}")
        return "Sorry, there was a problem processing your message.", messages

django view.py

 @sync_to_async
def get_session_data(session, key, default=None):
    return session.get(key, default)

@sync_to_async
def set_session_data(session, key, value):
    session[key] = value


@csrf_exempt
@require_POST
async def listen_character_creation_async(request):
    """
    Handle character creation requests asynchronously.
    """
    try:
        # Check if 'messages' exist in the session
        messages_exist = await get_session_data(request.session, 'messages', default=None)
        if messages_exist is None:
            await set_session_data(request.session, 'messages', [])
    
        data = json.loads(request.body)
        player_input = data.get('player_input')
        is_new_conversation = data.get('is_new_conversation', False)
        thread_id = data.get('thread_id')
    
    except json.JSONDecodeError:
        return JsonResponse({'status': 'error', 'message': 'Invalid JSON data'}, status=400)
    except Exception as e:
        print(f"An exception occurred while processing the request: {str(e)}")
        return JsonResponse({'status': 'error', 'message': 'Internal server error'}, status=500)
    
    print(f"is_new_conversation: {is_new_conversation}")
    if player_input:
        try:
            # If it is a new conversation, clear the session message history
            if is_new_conversation:
                print("--------------[system_info]-------------------")
                print(f"Conversation saved: {thread_id}")
                saved_messages = await get_session_data(request.session, 'messages', [])
                save_conversation(thread_id, saved_messages)
                await set_session_data(request.session, 'messages', [])
                print("--------------[system_info]-------------------")
                print("History memory cleared")
                print("")
                print("--------------[thread_id]-------------------")
                print(f"thread_id: {thread_id}")
                print("---------------------------------")
                print("")
    
            # Get message list from the session
            print("")
            print("---------------------------------")
            print(f"thread_id: {thread_id}")
            print("---------------------------------")
            print("")
            print(f"Received player input: {player_input}")
            print("")
            serialized_messages = await get_session_data(request.session, 'messages', [])
            messages = deserialize_messages(serialized_messages)
            print("")
            print("--------------[messages]-------------------")
            print(f"messages: {messages}")
            print("---------------------------------")
            print("")
    
            # Use Agent's asynchronous message processing method
            ai_response, messages = await agent.process_message_async(player_input, messages=messages)
            print("")
            print("--------------[ai_response]-------------------")
            print(f"ai_response: {ai_response}")
            print("---------------------------------")
            print("")
    
            # Serialize the updated message list and store it in the session
            await set_session_data(request.session, 'messages', serialize_messages(messages))
    
            # Return AI's response
            return JsonResponse({'status': 'success',
                                 'message': ai_response,
                                 "Create_info": agent.Create_info})
        except Exception as e:
            print(f"Error processing the message: {str(e)}")
            return JsonResponse({'status': 'error', 'message': 'Error processing the message'}, status=500)
    else:
        return JsonResponse({'status': 'error', 'message': 'Missing player input'}, status=400)

        

front_end.js

function sendUserInput(playerInput) {
    removeLoadingAnimation();
    const isNewConversation = isFirstClick;
    if (!threadId || isNewConversation) {
        threadId = Date.now().toString();
    }
    
    showLoadingAnimation(); // Show loading animation before sending request
    chatContainer.offsetHeight;
    const startTime = Date.now();

    fetch('/listen-character-creation/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCSRFToken(),
        },
        body: JSON.stringify({ 
            player_input: playerInput,
            thread_id: threadId,
            is_new_conversation: isNewConversation
        }),
    })
    .then(response => {
        if (!response.body) {
            throw new Error('This browser does not support stream response.');
        }
        displayResponseAsync(response);
    })
    .catch(error => {
        console.error('Error:', error);
        removeLoadingAnimation();
        addMessage('Server error, please try again later.', false);
    });
    isFirstClick = false; 
}

async function displayResponseAsync(response) {
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let done = false;
    let receivedText = '';

    while (!done) {
        const { value, done: doneReading } = await reader.read();
        done = doneReading;
        if (value) {
            const chunk = decoder.decode(value, { stream: true });
            receivedText += chunk;
            addMessage(chunk, false);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
    }

    // Process the complete response
    try {
        const data = JSON.parse(receivedText);
        if (data.status === 'success') {
            if (data.Create_info) {
                Object.assign(character, data.Create_info);
                updateCharacterSummary();
            }
            if (data.next_step !== undefined) {
                currentStep = data.next_step;
                if (currentStep < steps.length) {
                    addMessage(steps[currentStep].question);
                } else {
                    addMessage("Congratulations! Your character creation is complete.");
                }
            }
        } else {
            addMessage(data.message, false);
        }
    } catch (error) {
        console.error('Error parsing response:', error);
        addMessage('The format of the server response is incorrect.', false);
    }
}

    ```

Description

how should I recorrect my code in order to pass the data asteam print?

System Info

[15/Oct/2024 17:09:39] "POST /listen-character-creation/ HTTP/1.1" 200 886

it can shoot the stream mode。