=============================== Part 3 - Your First Turbo Frame =============================== Listen to Turbo Streams ========================= It's time to start creating a dynamic, interactive application. Start by getting Django to listen to websockets by modifying ``asgi.py`` to the following: .. code-block:: python :caption: turbodjango/asgi.py import os from django.core.asgi import get_asgi_application from channels.routing import ProtocolTypeRouter from turbo.consumers import TurboStreamsConsumer os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'turbodjango.settings') application = ProtocolTypeRouter({ "http": get_asgi_application(), "websocket": TurboStreamsConsumer.as_asgi() }) A Component-Based Mindset ========================= Like many modern JavaScript-based frameworks, it is helpful to start thinking of the webpage as constructed of components. This means breaking down templates into sub-templates with one specific function that are used as the building blocks for each page. With that in mind, let's make a `components/` directory for these sub-templates and start work on our first component - a form to create a message in the chat room. .. code-block:: html :caption: templates/chat/room_detail.html