notebook/agentchat_websockets.ipynb

{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "9a71fa36",
   "metadata": {},
   "source": [
    "# Websockets: Streaming input and output using websockets\n",
    "\n",
    "This notebook demonstrates how to use the [`IOStream`](https://docs.ag2.ai/latest/docs/api-reference/autogen/io/IOStream) class to stream both input and output using websockets. The use of websockets allows you to build web clients that are more responsive than the one using web methods. The main difference is that the webosockets allows you to push data while you need to poll the server for new response using web methods.\n",
    "\n",
    "\n",
    "In this guide, we explore the capabilities of the [`IOStream`](https://docs.ag2.ai/latest/docs/api-reference/autogen/io/IOStream) class. It is specifically designed to enhance the development of clients such as web clients which use  websockets for streaming both input and output. The [`IOStream`](https://docs.ag2.ai/latest/docs/api-reference/autogen/io/IOStream) stands out by enabling a more dynamic and interactive user experience for web applications.\n",
    "\n",
    "Websockets technology is at the core of this functionality, offering a significant advancement over traditional web methods by allowing data to be \"pushed\" to the client in real-time. This is a departure from the conventional approach where clients must repeatedly \"poll\" the server to check for any new responses. By employing the underlining [websockets](https://websockets.readthedocs.io/) library, the IOStream class facilitates a continuous, two-way communication channel between the server and client. This ensures that updates are received instantly, without the need for constant polling, thereby making web clients more efficient and responsive.\n",
    "\n",
    "The real power of websockets, leveraged through the [`IOStream`](https://docs.ag2.ai/latest/docs/api-reference/autogen/io/IOStream) class, lies in its ability to create highly responsive web clients. This responsiveness is critical for applications requiring real-time data updates such as chat applications. By integrating the [`IOStream`](https://docs.ag2.ai/latest/docs/api-reference/autogen/io/IOStream) class into your web application, you not only enhance user experience through immediate data transmission but also reduce the load on your server by eliminating unnecessary polling.\n",
    "\n",
    "In essence, the transition to using websockets through the [`IOStream`](https://docs.ag2.ai/latest/docs/api-reference/autogen/io/IOStream) class marks a significant enhancement in web client development. This approach not only streamlines the data exchange process between clients and servers but also opens up new possibilities for creating more interactive and engaging web applications. By following this guide, developers can harness the full potential of websockets and the [`IOStream`](https://docs.ag2.ai/latest/docs/api-reference/autogen/io/IOStream) class to push the boundaries of what is possible with web client responsiveness and interactivity.\n",
    "\n",
    "## Requirements\n",
    "\n",
    "````{=mdx}\n",
    ":::info Requirements\n",
    "Some extra dependencies are needed for this notebook, which can be installed via pip:\n",
    "\n",
    "```bash\n",
    "pip install -U ag2[openai,websockets] fastapi uvicorn\n",
    "```\n",
    "\n",
    "> **Note:** If you have been using `autogen` or `pyautogen`, all you need to do is upgrade it using:  \n",
    "> ```bash\n",
    "> pip install -U autogen[openai,websockets]\n",
    "> ```\n",
    "> or  \n",
    "> ```bash\n",
    "> pip install -U pyautogen[openai,websockets]\n",
    "> ```\n",
    "> as `pyautogen`, `autogen`, and `ag2` are aliases for the same PyPI package.  \n",
    "\n",
    "\n",
    "For more information, please refer to the [installation guide](https://docs.ag2.ai/docs/user-guide/basic-concepts/installing-ag2).\n",
    ":::\n",
    "````"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "5ebd2397",
   "metadata": {},
   "source": [
    "## Set your API Endpoint\n",
    "\n",
    "The [`config_list_from_json`](https://docs.ag2.ai/docs/api-reference/autogen/config_list_from_json#config-list-from-json) function loads a list of configurations from an environment variable or a json file."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dca301a4",
   "metadata": {},
   "outputs": [],
   "source": [
    "from datetime import datetime\n",
    "from tempfile import TemporaryDirectory\n",
    "\n",
    "from websockets.sync.client import connect as ws_connect\n",
    "\n",
    "import autogen\n",
    "from autogen.io.websockets import IOWebsockets\n",
    "\n",
    "config_list = autogen.config_list_from_json(\n",
    "    env_or_file=\"OAI_CONFIG_LIST\",\n",
    "    filter_dict={\n",
    "        \"model\": [\"gpt-4o-mini\"],\n",
    "    },\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "92fde41f",
   "metadata": {},
   "source": [
    "````{=mdx}\n",
    ":::tip\n",
    "Learn more about configuring LLMs for agents [here](https://docs.ag2.ai/docs/user-guide/basic-concepts/llm-configuration/llm-configuration).\n",
    ":::\n",
    "````"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "2b9526e7",
   "metadata": {},
   "source": [
    "## Defining `on_connect` function\n",
    "\n",
    "An `on_connect` function is a crucial part of applications that utilize websockets, acting as an event handler that is called whenever a new client connection is established. This function is designed to initiate any necessary setup, communication protocols, or data exchange procedures specific to the newly connected client. Essentially, it lays the groundwork for the interactive session that follows, configuring how the server and the client will communicate and what initial actions are to be taken once a connection is made. Now, let's delve into the details of how to define this function, especially in the context of using the AG2 framework with websockets.\n",
    "\n",
    "\n",
    "Upon a client's connection to the websocket server, the server automatically initiates a new instance of the [`IOWebsockets`](https://docs.ag2.ai/docs/api-reference/autogen/io/IOWebsockets#iowebsockets) class. This instance is crucial for managing the data flow between the server and the client. The `on_connect` function leverages this instance to set up the communication protocol, define interaction rules, and initiate any preliminary data exchanges or configurations required for the client-server interaction to proceed smoothly.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9fb85afb",
   "metadata": {},
   "outputs": [],
   "source": [
    "def on_connect(iostream: IOWebsockets) -> None:\n",
    "    print(f\" - on_connect(): Connected to client using IOWebsockets {iostream}\", flush=True)\n",
    "\n",
    "    print(\" - on_connect(): Receiving message from client.\", flush=True)\n",
    "\n",
    "    # 1. Receive Initial Message\n",
    "    initial_msg = iostream.input()\n",
    "    print(f\"{initial_msg=}\")\n",
    "\n",
    "    try:\n",
    "        # 2. Instantiate ConversableAgent\n",
    "        agent = autogen.ConversableAgent(\n",
    "            name=\"chatbot\",\n",
    "            system_message=\"Complete a task given to you and reply TERMINATE when the task is done. If asked about the weather, use tool 'weather_forecast(city)' to get the weather forecast for a city.\",\n",
    "            llm_config={\n",
    "                \"config_list\": config_list,\n",
    "                \"stream\": True,\n",
    "            },\n",
    "        )\n",
    "\n",
    "        # 3. Define UserProxyAgent\n",
    "        user_proxy = autogen.UserProxyAgent(\n",
    "            name=\"user_proxy\",\n",
    "            system_message=\"A proxy for the user.\",\n",
    "            is_termination_msg=lambda x: x.get(\"content\", \"\") and x.get(\"content\", \"\").rstrip().endswith(\"TERMINATE\"),\n",
    "            human_input_mode=\"NEVER\",\n",
    "            max_consecutive_auto_reply=10,\n",
    "            code_execution_config=False,\n",
    "        )\n",
    "\n",
    "        # 4. Define Agent-specific Functions\n",
    "        def weather_forecast(city: str) -> str:\n",
    "            return f\"The weather forecast for {city} at {datetime.now()} is sunny.\"\n",
    "\n",
    "        autogen.register_function(\n",
    "            weather_forecast, caller=agent, executor=user_proxy, description=\"Weather forecast for a city\"\n",
    "        )\n",
    "\n",
    "        # 5. Initiate conversation\n",
    "        print(\n",
    "            f\" - on_connect(): Initiating chat with agent {agent} using message '{initial_msg}'\",\n",
    "            flush=True,\n",
    "        )\n",
    "        user_proxy.initiate_chat(\n",
    "            agent,\n",
    "            message=initial_msg,\n",
    "        )\n",
    "    except Exception as e:\n",
    "        print(f\" - on_connect(): Exception: {e}\", flush=True)\n",
    "        raise e"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1124796",
   "metadata": {},
   "source": [
    "Here's an explanation on how a typical `on_connect` function such as the one in the example above is defined:\n",
    "\n",
    "1. **Receive Initial Message**: Immediately after establishing a connection, receive an initial message from the client. This step is crucial for understanding the client's request or initiating the conversation flow.\n",
    "\n",
    "2. **Instantiate ConversableAgent**: Create an instance of ConversableAgent with a specific system message and the LLM configuration. If you need more than one agent, make sure they don't share the same `llm_config` as \n",
    "adding a function to one of them will also attempt to add it to another.\n",
    "\n",
    "2. **Instantiate UserProxyAgent**: Similarly, create a UserProxyAgent instance, defining its termination condition, human input mode, and other relevant parameters. There is no need to define `llm_config` as the UserProxyAgent\n",
    "does not use LLM.\n",
    "\n",
    "4. **Define Agent-specific Functions**: If your conversable agent requires executing specific tasks, such as fetching a weather forecast in the example above, define these functions within the on_connect scope. Decorate these functions accordingly to link them with your agents.\n",
    "\n",
    "5. **Initiate Conversation**: Finally, use the `initiate_chat` method of your `UserProxyAgent` to start the interaction with the conversable agent, passing the initial message and a cache mechanism for efficiency."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "62ef868a",
   "metadata": {},
   "source": [
    "## Testing websockets server with Python client\n",
    "\n",
    "Testing an `on_connect` function with a Python client involves simulating a client-server interaction to ensure the setup, data exchange, and communication protocols function as intended. Here’s a brief explanation on how to conduct this test using a Python client:\n",
    "\n",
    "1. **Start the Websocket Server**: Use the `IOWebsockets.run_server_in_thread method` to start the server in a separate thread, specifying the on_connect function and the port. This method returns the URI of the running websocket server.\n",
    "\n",
    "2. **Connect to the Server**: Open a connection to the server using the returned URI. This simulates a client initiating a connection to your websocket server.\n",
    "\n",
    "3. **Send a Message to the Server**: Once connected, send a message from the client to the server. This tests the server's ability to receive messages through the established websocket connection.\n",
    "\n",
    "4. **Receive and Process Messages**: Implement a loop to continuously receive messages from the server. Decode the messages if necessary, and process them accordingly. This step verifies the server's ability to respond back to the client's request.\n",
    "\n",
    "This test scenario effectively evaluates the interaction between a client and a server using the `on_connect` function, by simulating a realistic message exchange. It ensures that the server can handle incoming connections, process messages, and communicate responses back to the client, all critical functionalities for a robust websocket-based application."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4fbe004d",
   "metadata": {},
   "outputs": [],
   "source": [
    "with IOWebsockets.run_server_in_thread(on_connect=on_connect, port=8765) as uri:\n",
    "    print(f\" - test_setup() with websocket server running on {uri}.\", flush=True)\n",
    "\n",
    "    with ws_connect(uri) as websocket:\n",
    "        print(f\" - Connected to server on {uri}\", flush=True)\n",
    "\n",
    "        print(\" - Sending message to server.\", flush=True)\n",
    "        # websocket.send(\"2+2=?\")\n",
    "        websocket.send(\"Check out the weather in Paris and write a poem about it.\")\n",
    "\n",
    "        while True:\n",
    "            try:\n",
    "                message = websocket.recv()\n",
    "                message = message.decode(\"utf-8\") if isinstance(message, bytes) else message\n",
    "\n",
    "                print(message)\n",
    "\n",
    "                # if \"TERMINATE\" in message:\n",
    "                #     print()\n",
    "                #     print(\" - Received TERMINATE message. Exiting.\", flush=True)\n",
    "                #     break\n",
    "            except Exception as e:\n",
    "                print(\"Connection closed:\", e, flush=True)\n",
    "                break"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3a656564",
   "metadata": {},
   "source": [
    "## Testing websockets server running inside FastAPI server with HTML/JS client\n",
    "\n",
    "The code snippets below outlines an approach for testing an `on_connect` function in a web environment using [FastAPI](https://fastapi.tiangolo.com/) to serve a simple interactive HTML page. This method allows users to send messages through a web interface, which are then processed by the server running the AG2 framework via websockets. Here's a step-by-step explanation:\n",
    "\n",
    "1. **FastAPI Application Setup**: The code initiates by importing necessary libraries and setting up a FastAPI application. FastAPI is a modern, fast web framework for building APIs with Python 3.7+ based on standard Python type hints.\n",
    "\n",
    "2. **HTML Template for User Interaction**: An HTML template is defined as a multi-line Python string, which includes a basic form for message input and a script for managing websocket communication. This template creates a user interface where messages can be sent to the server and responses are displayed dynamically.\n",
    "\n",
    "3. **Running the Websocket Server**: The `run_websocket_server` async context manager starts the websocket server using `IOWebsockets.run_server_in_thread` with the specified `on_connect` function and port. This server listens for incoming websocket connections.\n",
    "\n",
    "4. **FastAPI Route for Serving HTML Page**: A FastAPI route (`@app.get(\"/\")`) is defined to serve the HTML page to users. When a user accesses the root URL, the HTML content for the websocket chat is returned, allowing them to interact with the websocket server.\n",
    "\n",
    "5. **Starting the FastAPI Application**: Lastly, the FastAPI application is started using Uvicorn, an ASGI server, configured with the app and additional parameters as needed. The server is then launched to serve the FastAPI application, making the interactive HTML page accessible to users.\n",
    "\n",
    "This method of testing allows for interactive communication between the user and the server, providing a practical way to demonstrate and evaluate the behavior of the on_connect function in real-time. Users can send messages through the webpage, and the server processes these messages as per the logic defined in the on_connect function, showcasing the capabilities and responsiveness of the AG2 framework's websocket handling in a user-friendly manner."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5e55dc06",
   "metadata": {},
   "outputs": [],
   "source": [
    "from contextlib import asynccontextmanager\n",
    "from pathlib import Path\n",
    "\n",
    "from fastapi import FastAPI\n",
    "from fastapi.responses import HTMLResponse\n",
    "\n",
    "PORT = 8000\n",
    "\n",
    "html = \"\"\"\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "    <head>\n",
    "        <title>AG2 websocket test</title>\n",
    "    </head>\n",
    "    <body>\n",
    "        <h1>WebSocket Chat</h1>\n",
    "        <form action=\"\" onsubmit=\"sendMessage(event)\">\n",
    "            <input type=\"text\" id=\"messageText\" autocomplete=\"off\"/>\n",
    "            <button>Send</button>\n",
    "        </form>\n",
    "        <ul id='messages'>\n",
    "        </ul>\n",
    "        <script>\n",
    "            var ws = new WebSocket(\"ws://localhost:8080/ws\");\n",
    "            ws.onmessage = function(event) {\n",
    "                var messages = document.getElementById('messages')\n",
    "                var message = document.createElement('li')\n",
    "                var content = document.createTextNode(event.data)\n",
    "                message.appendChild(content)\n",
    "                messages.appendChild(message)\n",
    "            };\n",
    "            function sendMessage(event) {\n",
    "                var input = document.getElementById(\"messageText\")\n",
    "                ws.send(input.value)\n",
    "                input.value = ''\n",
    "                event.preventDefault()\n",
    "            }\n",
    "        </script>\n",
    "    </body>\n",
    "</html>\n",
    "\"\"\"\n",
    "\n",
    "\n",
    "@asynccontextmanager\n",
    "async def run_websocket_server(app):\n",
    "    with IOWebsockets.run_server_in_thread(on_connect=on_connect, port=8080) as uri:\n",
    "        print(f\"Websocket server started at {uri}.\", flush=True)\n",
    "\n",
    "        yield\n",
    "\n",
    "\n",
    "app = FastAPI(lifespan=run_websocket_server)\n",
    "\n",
    "\n",
    "@app.get(\"/\")\n",
    "async def get():\n",
    "    return HTMLResponse(html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d92e50b5",
   "metadata": {},
   "outputs": [],
   "source": [
    "import uvicorn\n",
    "\n",
    "config = uvicorn.Config(app)\n",
    "server = uvicorn.Server(config)\n",
    "await server.serve()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1c8c9f61",
   "metadata": {},
   "source": [
    "The testing setup described above, leveraging FastAPI and websockets, not only serves as a robust testing framework for the on_connect function but also lays the groundwork for developing real-world applications. This approach exemplifies how web-based interactions can be made dynamic and real-time, a critical aspect of modern application development.\n",
    "\n",
    "For instance, this setup can be directly applied or adapted to build interactive chat applications, real-time data dashboards, or live support systems. The integration of websockets enables the server to push updates to clients instantly, a key feature for applications that rely on the timely delivery of information. For example, a chat application built on this framework can support instantaneous messaging between users, enhancing user engagement and satisfaction.\n",
    "\n",
    "Moreover, the simplicity and interactivity of the HTML page used for testing reflect how user interfaces can be designed to provide seamless experiences. Developers can expand upon this foundation to incorporate more sophisticated elements such as user authentication, message encryption, and custom user interactions, further tailoring the application to meet specific use case requirements.\n",
    "\n",
    "The flexibility of the FastAPI framework, combined with the real-time communication enabled by websockets, provides a powerful toolset for developers looking to build scalable, efficient, and highly interactive web applications. Whether it's for creating collaborative platforms, streaming services, or interactive gaming experiences, this testing setup offers a glimpse into the potential applications that can be developed with these technologies."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cfb50946",
   "metadata": {},
   "source": [
    "## Testing  websockets server with HTML/JS client\n",
    "\n",
    "The provided code snippet below is an example of how to create an interactive testing environment for an `on_connect` function using Python's built-in `http.server` module. This setup allows for real-time interaction within a web browser, enabling developers to test the websocket functionality in a more user-friendly and practical manner. Here's a breakdown of how this code operates and its potential applications:\n",
    "\n",
    "1. **Serving a Simple HTML Page**: The code starts by defining an HTML page that includes a form for sending messages and a list to display incoming messages. JavaScript is used to handle the form submission and websocket communication.\n",
    "\n",
    "2. **Temporary Directory for HTML File**: A temporary directory is created to store the HTML file. This approach ensures that the testing environment is clean and isolated, minimizing conflicts with existing files or configurations.\n",
    "\n",
    "3. **Custom HTTP Request Handler**: A custom subclass of `SimpleHTTPRequestHandler` is defined to serve the HTML file. This handler overrides the do_GET method to redirect the root path (`/`) to the `chat.html` page, ensuring that visitors to the server's root URL are immediately presented with the chat interface.\n",
    "\n",
    "4. **Starting the Websocket Server**: Concurrently, a websocket server is started on a different port using the `IOWebsockets.run_server_in_thread` method, with the previously defined `on_connect` function as the callback for new connections.\n",
    "\n",
    "5. **HTTP Server for the HTML Interface**: An HTTP server is instantiated to serve the HTML chat interface, enabling users to interact with the websocket server through a web browser.\n",
    "\n",
    "This setup showcases a practical application of integrating websockets with a simple HTTP server to create a dynamic and interactive web application. By using Python's standard library modules, it demonstrates a low-barrier entry to developing real-time applications such as chat systems, live notifications, or interactive dashboards.\n",
    "\n",
    "The key takeaway from this code example is how easily Python's built-in libraries can be leveraged to prototype and test complex web functionalities. For developers looking to build real-world applications, this approach offers a straightforward method to validate and refine websocket communication logic before integrating it into larger frameworks or systems. The simplicity and accessibility of this testing setup make it an excellent starting point for developing a wide range of interactive web applications.\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "708a98de",
   "metadata": {},
   "outputs": [],
   "source": [
    "from http.server import HTTPServer, SimpleHTTPRequestHandler\n",
    "\n",
    "PORT = 8000\n",
    "\n",
    "# Format JSON-based messages for display\n",
    "js_formatters = \"\"\"\n",
    "function formatMessageContent(content) {\n",
    "    if (content && typeof content === 'object') {\n",
    "        // Create a copy without uuid\n",
    "        const formatted = {};\n",
    "        for (const [key, value] of Object.entries(content)) {\n",
    "            if (key !== 'uuid') {\n",
    "                formatted[key] = value;\n",
    "            }\n",
    "        }\n",
    "        return JSON.stringify(formatted, null, 2);\n",
    "    }\n",
    "    return String(content);\n",
    "}\n",
    "\n",
    "function format_message(data) {\n",
    "    try {\n",
    "        let msg = typeof data === 'string' ? JSON.parse(data) : data;\n",
    "        let formatted = {\n",
    "            type: msg.type || '',\n",
    "            content: formatMessageContent(msg.content)\n",
    "        };\n",
    "\n",
    "        // Add any additional fields\n",
    "        for (const [key, value] of Object.entries(msg)) {\n",
    "            if (key !== 'type' && key !== 'content') {\n",
    "                formatted[key] = value;\n",
    "            }\n",
    "        }\n",
    "\n",
    "        return JSON.stringify(formatted, null, 2);\n",
    "    } catch (e) {\n",
    "        return String(data);\n",
    "    }\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "html = f\"\"\"\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "    <head>\n",
    "        <title>AG2 websocket</title>\n",
    "        <link href=\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n",
    "        <style>\n",
    "            body {{\n",
    "                font-family: 'JetBrains Mono', monospace;\n",
    "                max-width: 800px;\n",
    "                margin: 20px auto;\n",
    "                padding: 20px;\n",
    "            }}\n",
    "            h1 {{\n",
    "                text-align: center;\n",
    "            }}\n",
    "            form {{\n",
    "                margin: 20px 0;\n",
    "                text-align: center;\n",
    "            }}\n",
    "            input {{\n",
    "                width: 80%;\n",
    "                padding: 8px;\n",
    "                margin-right: 10px;\n",
    "                font-family: inherit;\n",
    "            }}\n",
    "            button {{\n",
    "                padding: 8px 20px;\n",
    "                background: #4285f4;\n",
    "                color: white;\n",
    "                border: none;\n",
    "                border-radius: 4px;\n",
    "                cursor: pointer;\n",
    "                font-family: inherit;\n",
    "            }}\n",
    "            #messages {{\n",
    "                list-style: none;\n",
    "                padding: 0;\n",
    "                margin: 0;\n",
    "            }}\n",
    "            #messages li {{\n",
    "                padding: 8px;\n",
    "                margin: 4px 0;\n",
    "                background: #f1f3f4;\n",
    "                border-radius: 4px;\n",
    "                white-space: pre-wrap;\n",
    "                word-wrap: break-word;\n",
    "                font-family: monospace;\n",
    "            }}\n",
    "        </style>\n",
    "    </head>\n",
    "    <body>\n",
    "        <h1>AG2 Structured Messages w/ websockets</h1>\n",
    "        <form action=\"\" onsubmit=\"sendMessage(event)\">\n",
    "            <input type=\"text\" id=\"messageText\" autocomplete=\"off\"/>\n",
    "            <button>Send</button>\n",
    "        </form>\n",
    "        <ul id='messages'>\n",
    "        </ul>\n",
    "        <script>\n",
    "            {js_formatters}\n",
    "\n",
    "            var ws = new WebSocket(\"ws://localhost:8082\");\n",
    "            ws.onmessage = function(event) {{\n",
    "                var messages = document.getElementById('messages')\n",
    "                var message = document.createElement('li')\n",
    "                var formattedContent = format_message(event.data)\n",
    "                var content = document.createTextNode(formattedContent)\n",
    "                message.appendChild(content)\n",
    "                messages.appendChild(message)\n",
    "            }};\n",
    "\n",
    "            function sendMessage(event) {{\n",
    "                var input = document.getElementById(\"messageText\")\n",
    "                ws.send(input.value)\n",
    "                input.value = ''\n",
    "                event.preventDefault()\n",
    "            }}\n",
    "        </script>\n",
    "    </body>\n",
    "</html>\n",
    "\"\"\"\n",
    "\n",
    "# The rest of the server setup code remains the same\n",
    "with TemporaryDirectory() as temp_dir:\n",
    "    path = Path(temp_dir) / \"chat.html\"\n",
    "    with open(path, \"w\") as f:\n",
    "        f.write(html)\n",
    "\n",
    "    class MyRequestHandler(SimpleHTTPRequestHandler):\n",
    "        def __init__(self, *args, **kwargs):\n",
    "            super().__init__(*args, directory=temp_dir, **kwargs)\n",
    "\n",
    "        def do_GET(self):  # noqa: N802\n",
    "            if self.path == \"/\":\n",
    "                self.path = \"/chat.html\"\n",
    "            return SimpleHTTPRequestHandler.do_GET(self)\n",
    "\n",
    "    handler = MyRequestHandler\n",
    "\n",
    "    with IOWebsockets.run_server_in_thread(on_connect=on_connect, port=8082) as uri:\n",
    "        print(f\"Websocket server started at {uri}.\", flush=True)\n",
    "\n",
    "        with HTTPServer((\"\", PORT), handler) as httpd:\n",
    "            print(\"HTTP server started at http://localhost:\" + str(PORT))\n",
    "            try:\n",
    "                httpd.serve_forever()\n",
    "            except KeyboardInterrupt:\n",
    "                print(\" - HTTP server stopped.\", flush=True)"
   ]
  }
 ],
 "metadata": {
  "front_matter": {
   "description": "Websockets facilitate real-time, bidirectional communication between web clients and servers, enhancing the responsiveness and interactivity of AG2-powered applications.",
   "tags": [
    "websockets",
    "streaming"
   ]
  },
  "kernelspec": {
   "display_name": ".venv-3.9",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.20"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}